","image":"http://www.luping.net/uploads/20241104/17307198076728b03faccae.jpg","datePublished":"2024-11-08T22:31:00+08:00","dateModified":"2024-11-08T22:31:00+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
  

  
    
    
    

  

    

      

        "일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.      

      

    

  

  

    

      

        
        
      

      

        

          온라인 도구
        

        

          소프트웨어 튜토리얼
        

        

          사이트 탐색
        

        

          프로그램 작성
        

      

      
    

  






    
    
    

      

        
        첫 장 > 프로그램 작성 > 서버와 클라이언트를 차단하지 않고 서버에서 업로드된 파일의 현재 쓰기 크기를 실시간으로 읽고 에코하는 방법은 무엇입니까?
      

      

        

          

            

              
서버와 클라이언트를 차단하지 않고 서버에서 업로드된 파일의 현재 쓰기 크기를 실시간으로 읽고 에코하는 방법은 무엇입니까?

              

                

                  2024-11-08에 게시됨                

                

                  
                  검색:844
                 
                

                
                
                
                
                
                
                
                
              

            

            

            

              
              
How to Read and Echo Currently Writing Size of Uploaded File in Server in Realtime Without Blocking Server and Client?
서버와 클라이언트를 차단하지 않고 서버 측에 작성 중인 업로드 파일의 크기를 실시간으로 읽고 인쇄하는 방법은 무엇입니까? 
이 문제를 좀 더 자세히 살펴보겠습니다.
파일 업로드 진행 상황을 실시간으로 가져오기 위해 가져오기를 통해 Blob, File, TypedArray 또는 ArrayBuffer 개체에서 설정합니다. () POST 요청의 본문 개체입니다. 
현재 구현에서는 File 객체를 본문 객체에 전달된 fetch()의 두 번째 인수로 설정합니다. 
 요구 사항: 
는 text/event-stream으로 서버의 파일 시스템에 기록되는 파일의 크기를 읽고 이를 클라이언트에 다시 표시합니다. GET 요청의 var 쿼리 문자열 매개변수가 제공한 모든 바이트가 기록되면 중지됩니다. 파일 읽기는 현재 파일을 읽는 스크립트에 대해 GET 호출이 수행된 다음 서버에 파일을 쓰는 스크립트에 대해 POST가 수행되는 별도의 스크립팅 환경에서 발생합니다. 
현재 파일 크기를 가져오기 위해 서버 측 파일 쓰기 또는 파일 읽기 처리와 관련된 잠재적인 문제를 해결하기 전에 파일 크기 에코 섹션을 완료할 때까지 기다리십시오. 
 현재 요구 사항을 충족하기 위해 PHP를 사용하려고 합니다. 하지만 동일한 작업을 수행하는 데 사용할 수 있는 c, bash, nodejs, Python 또는 기타 언어나 방법에도 관심이 있습니다. 
클라이언트측 자바스크립트 부분은 괜찮습니다. 나는 불필요한 부분을 포함하지 않고 패턴을 구현하는 PHP(세계에서 가장 널리 사용되는 서버 측 언어 중 하나)에 익숙하지 않습니다. 
동기: 
가져오기 진행률 표시기? 
 관련: 
ReadableStream으로 가져오기
 문제: 
Get
PHP Notice:  Undefined index: HTTP_LAST_EVENT_ID in stream.php on line 7
 터미널에 있습니다. 
 또한 
while(file_exists($_GET["filename"]) 
  && filesize($_GET["filename"]) < intval($_GET["filesize"]))
는 
while(true)
[로 대체됩니다. &&& ] EventSource에서 오류가 발생합니다. 
 sleep() 호출이 없으면 동일한 파일이 세 번 업로드될 때 3.3MB 크기의 파일에 대한 올바른 파일 크기가 메시지 이벤트에 전달되고, 3321824, 61921, 26214 및 38093이 각각 인쇄됩니다. 예상되는 결과는 업로드된 파일 객체의 파일 크기 대신 
stream_copy_to_stream($input, $file);
stream_copy_to_stream($input, $file);
에 파일을 쓸 때 파일 크기를 가져오는 것입니다. fopen() 또는 stream_copy_to_stream()은 다른 PHP 프로세스가 stream.php에 액세스하는 것을 방지합니까? 
지금까지 시도한 작업: 
php 
    에서 인용: $_POST, $_GET 및 $_FILE 너머: JavaScriptPHP 처리 Blob
  • PHP 예제를 사용한 서버 전송 이벤트 소개
php
// `data.php`와 `stream.php`를 같은 파일에 병합할 수 있나요?
// `STREAM_NOTIFY_PROGRESS`를 사용할 수 있나요?
// "스트림 전송의 현재 진행 상황을 나타냅니다.
// bytes_transferred 및 가능하면 bytes_max에서도 "바이트를 읽으시겠습니까?
// `stream_set_blocking`을 `false`로 호출해야 합니까?
//data.php

stream_copy_to_stream($input, $file);
// stream.php

stream_copy_to_stream($input, $file);
자바스크립트









const [url, stream, header] = ["data.php", "stream.php", "x-filename"];

const [입력, 진행, handlerFile] = [
        document.querySelector("입력[유형=파일]")
      , document.querySelector("진행")
      , (이벤트) =>
          const [파일] = input.files;
          const [{크기:파일 크기, 이름:파일 이름}, 헤더, 매개변수] = [
                  파일, 새 헤더(), 새 URLSearchParams()
                ];
          // `stream` URL에 대한 검색 매개변수로 `filename`, `filesize`를 설정합니다.
          Object.entries({파일 이름, 파일 크기})
          .forEach(([...props]) => params.append.apply(params, props));
          // `POST`에 대한 헤더 설정
          headers.append(헤더, 파일명);
          // `progress.value`를 재설정하고 `progress.max`를 `filesize`로 설정합니다.
          [진행.값, 진행.최대] = [0, 파일 크기];
          const [요청, 소스] = [
            새 요청(url, {
                  메소드:"POST", 헤더:헤더, 본문:파일
                })
            // https://stackoverflow.com/a/42330433/
          , 새로운 EventSource(`${stream}?${params.toString()}`)
          ];
          source.addEventListener("message", (e) => {
            // 여기서 `진행`을 업데이트합니다.
            // `e.data === 파일 크기`일 때 `.close()`를 호출합니다.
            // `progress.value = e.data`, 이렇게 간단해야 합니다.
            console.log(e.data, e.lastEventId);
          }, 진실);

          source.addEventListener("open", (e) => {
            console.log("업로드 진행 가져오기 열기");
          }, 진실);

          source.addEventListener("error", (e) => {
            console.error("업로드 진행 오류 가져오기");
          }, 진실);
          // 테스트를 위한 온전성 검사,
          // `e.data === filesize`인 경우 `source`가 필요하지 않습니다.
          // `message` 이벤트 핸들러 내에서 `.close()`를 호출할 수 있습니다.
          setTimeout(() => source.close(), 30000);
          // `Promise` 체인에 `source'가 있을 필요는 없습니다.
          // `e.data === 파일 크기`인 경우 해결할 수 있지만
          // `응답` 이전에 `.text()` 등을 기다립니다.
          // TODO: `EventSource`를 병합하거나 분기할 위치와 위치,
          // 단일 또는 두 개의 `Promise` 체인으로 `fetch`
          const 업로드 = 가져오기(요청);
          업로드
          .then(응답 => response.text())
          .then(res => console.log(res))
          .catch(err => console.error(err));
        }
];

input.addEventListener("change", handlerFile, true);

            

            
            

                        

              릴리스 선언문
              
                이 글은 1729432843에서 재인쇄되었습니다. 침해 내용이 있는 경우, [email protected]으로 연락하여 삭제하시기 바랍니다.               
              
            

                      

          

          

            

              최신 튜토리얼
              더>
            

            
          

        

        

          

            

              분류더>
            

            

                            일본어를 배우다
                            한국어를 배우다
                            중국어를 배우다
                            외국어를 배우다
                            게임
                            일반적인 문제
                            기술 주변기기
                            일체 포함
                            소프트웨어 튜토리얼
                            프로그램 작성
                            기사
                          

          

          

            

              
중국어 공부

            

            
          

          

            

              도구더>
            

            

                            
                
                

                  
이미지 base64 디코딩

                

              
                            
                
                

                  
중국어 병음

                

              
                            
                
                

                  
유니코드 인코딩

                

              
                            
                
                

                  
JS 난독화 암호화 압축

                

              
                            
                
                

                  
URL 16진수 암호화 도구

                

              
                            
                
                

                  
UTF-8 인코딩 변환 도구

                

              
                            
                
                

                  
온라인 Ascii 인코딩 및 디코딩 도구

                

              
                            
                
                

                  
MD5 암호화 도구

                

              
                            
                
                

                  
해시/해시 텍스트 온라인 암호화 및 암호 해독 도구

                

              
                            
                
                

                  
온라인 SHA 암호화

                

              
                          

          

          

        

      

    

    
    
    

    

        
부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오.
          최대한 빨리 처리해 드리겠습니다.

        
Copyright© 2022 湘ICP备2022001581号-3