서버나 클라이언트를 차단하지 않고 파일 업로드 진행 상황을 실시간으로 모니터링하려면 어떻게 해야 합니까?

서버나 클라이언트를 차단하지 않고 파일 업로드 진행 상황을 실시간으로 모니터링하는 방법은 무엇입니까?

배경:
파일 업로드가 발생하면 서버에 기록되는 파일의 진행 상황을 추적할 수 있습니다. 이는 서버나 클라이언트를 차단하지 않고 수행할 수 있으므로 원활하고 효율적인 사용자 경험이 가능합니다.

문제:
현재 구현에서는 파일 객체를 가져오기의 본문으로 설정합니다. 요구. 하지만 진행 상황을 실시간으로 모니터링하려면 다른 접근 방식이 필요합니다.

요구 사항:
서버에 기록되는 파일의 크기를 텍스트/이벤트로 표시합니다. -개울. 쿼리 문자열 매개변수로 제공된 모든 바이트가 기록될 때까지 프로세스가 계속되어야 합니다.

해결책:

PHP 구현:

<code class="php">// stream.php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
header("Connection: keep-alive");

$lastId = isset($_SERVER["HTTP_LAST_EVENT_ID"]) ? intval($_SERVER["HTTP_LAST_EVENT_ID"]) : 0;
$upload = $_GET["filename"];
$data = 0;
// Ignore file size if it's already there
$wasLess = $lastId != 0;
while ($data < $_GET["filesize"] || !$wasLess) {
    clearstatcache(true, $upload);
    $data = filesize($upload);
    $wasLess |= $data < $_GET["filesize"];
    if ($wasLess) {
        sendMessage($lastId, $data);
        $lastId++;
    }
    usleep(20000);
}

function sendMessage($id, $data)
{
    echo "id: $id\n";
    echo "data: $data\n\n";
    ob_flush();
}

JavaScript 구현:

<code class="javascript">const [url, stream, header] = ["data.php", "stream.php", "x-filename"];

input.addEventListener("change", (event) => {
  const [file] = input.files;
  const [{ size: filesize, name: filename }, headers, params] = [file, new Headers(), new URLSearchParams()];

  headers.append(header, filename);
  progress.value = 0;
  progress.max = filesize;
  const [request, source] = [
    new Request(url, { method: "POST", headers, body: file }),
    new EventSource(`${stream}?${params.toString()}`)
  ];

  source.addEventListener("message", (e) => {
    progress.value = e.data;
    // Close the source when the data equals the filesize
    if (e.data == filesize) {
      source.close();
    }
  });
  fetch(request);
});</code>

위 내용은 서버나 클라이언트를 차단하지 않고 파일 업로드 진행 상황을 실시간으로 모니터링하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!