如何在不阻塞服务器或客户端的情况下实时监控文件上传进度？

如何在不阻塞服务器或客户端的情况下实时监控文件上传进度？

背景：
当文件上传发生时，可以跟踪文件写入服务器的进度。这可以在不阻塞服务器或客户端的情况下完成，从而提供流畅高效的用户体验。

问题：
当前实现将 File 对象设置为 fetch 的主体要求。但是，要实时监控进度，需要采用不同的方法。

要求：
以文本/事件形式显示正在写入服务器的文件的文件大小-溪流。该过程应继续，直到作为查询字符串参数提供的所有字节都已写入。

解决方案：

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中文网其他相关文章！