如何在服务器端实时读取和回显正在上传的文件的文件大小，而不会在服务器端和客户端都被阻塞？
题：
如何在服务器端实时读取和回显正在上传的文件的文件大小，而不会在服务器端和客户端都被阻塞？
语境：
file upload正在通过fetch()进行POST请求写入服务器，其中body设置为Blob ， File ， TypedArray或ArrayBuffer对象。
当前的实现将body对象的File对象设置为传递给fetch()第二个参数。
需求：
以text/event-stream读取并echo客户端正在写入文件系统的文件的文件大小。 当所有字节作为GET请求的查询string参数写入脚本时，停止作为variables提供给脚本。 当前文件的读取是在一个单独的脚本环境中进行的，在这个环境中，应该读取文件的脚本的GET调用是在写入文件到服务器的脚本之后进行的。
还没有达到文件写入服务器或读取文件以获得当前文件大小的潜在问题的error handling，尽pipe一旦文件大小部分的echo完成，这将是下一步。
目前试图满足使用php要求。 尽pipe也对c ， bash ， nodejs ， python感兴趣; 或可用于执行相同任务的其他语言或方法。
客户端javascript部分不是一个问题。 简而言之，不是精通php ，在万维网上使用的最常见的服务器端语言之一，实现该模式，而不包括不必要的部分。
动机：
取得进度指标？
有关：
使用ReadableStream获取
问题：
得到
PHP Notice: Undefined index: HTTP_LAST_EVENT_ID in stream.php on line 7
在terminal 。
另外，如果替代
while(file_exists($_GET["filename"]) && filesize($_GET["filename"]) < intval($_GET["filesize"]))
对于
while(true)
在EventSource产生错误。
在没有sleep()调用的情况下，当上传相同的文件三次时，在console 61921和38093次分别打印正确的文件大小为3.3MB文件的message事件3321824 。 预期的结果是正在写入文件的文件的文件大小
stream_copy_to_stream($input, $file);
而不是上传的文件对象的文件大小。 fopen()或stream_copy_to_stream()阻塞在其他不同的php进程在stream.php ？
迄今试过：
php是归因于
- 超过$ _POST，$ _GET和$ _FILE：在JavaScriptPHP中使用Blob
- 服务器发送事件与PHP示例介绍
php
// can we merge `data.php`, `stream.php` to same file? // can we use `STREAM_NOTIFY_PROGRESS` // "Indicates current progress of the stream transfer // in bytes_transferred and possibly bytes_max as well" to read bytes? // do we need to call `stream_set_blocking` to `false` // data.php <?php $filename = $_SERVER["HTTP_X_FILENAME"]; $input = fopen("php://input", "rb"); $file = fopen($filename, "wb"); stream_copy_to_stream($input, $file); fclose($input); fclose($file); echo "upload of " . $filename . " successful"; ?>
// stream.php <?php header("Content-Type: text/event-stream"); header("Cache-Control: no-cache"); header("Connection: keep-alive"); // `PHP Notice: Undefined index: HTTP_LAST_EVENT_ID in stream.php on line 7` ? $lastId = $_SERVER["HTTP_LAST_EVENT_ID"] || 0; if (isset($lastId) && !empty($lastId) && is_numeric($lastId)) { $lastId = intval($lastId); $lastId++; } // else { // $lastId = 0; // } // while current file size read is less than or equal to // `$_GET["filesize"]` of `$_GET["filename"]` // how to loop only when above is `true` while (true) { $upload = $_GET["filename"]; // is this the correct function and variable to use // to get written bytes of `stream_copy_to_stream($input, $file);`? $data = filesize($upload); // $data = $_GET["filename"] . " " . $_GET["filesize"]; if ($data) { sendMessage($lastId, $data); $lastId++; } // else { // close stream // } // not necessary here, though without thousands of `message` events // will be dispatched // sleep(1); } function sendMessage($id, $data) { echo "id: $id\n"; echo "data: $data\n\n"; ob_flush(); flush(); } ?>
javascript
<!DOCTYPE html> <html> <head> </head> <body> <input type="file"> <progress value="0" max="0" step="1"></progress> <script> const [url, stream, header] = ["data.php", "stream.php", "x-filename"]; const [input, progress, handleFile] = [ document.querySelector("input[type=file]") , document.querySelector("progress") , (event) => { const [file] = input.files; const [{size:filesize, name:filename}, headers, params] = [ file, new Headers(), new URLSearchParams() ]; // set `filename`, `filesize` as search parameters for `stream` URL Object.entries({filename, filesize}) .forEach(([...props]) => params.append.apply(params, props)); // set header for `POST` headers.append(header, filename); // reset `progress.value` set `progress.max` to `filesize` [progress.value, progress.max] = [0, filesize]; const [request, source] = [ new Request(url, { method:"POST", headers:headers, body:file }) // https://stackoverflow.com/a/42330433/ , new EventSource(`${stream}?${params.toString()}`) ]; source.addEventListener("message", (e) => { // update `progress` here, // call `.close()` when `e.data === filesize` // `progress.value = e.data`, should be this simple console.log(e.data, e.lastEventId); }, true); source.addEventListener("open", (e) => { console.log("fetch upload progress open"); }, true); source.addEventListener("error", (e) => { console.error("fetch upload progress error"); }, true); // sanity check for tests, // we don't need `source` when `e.data === filesize`; // we could call `.close()` within `message` event handler setTimeout(() => source.close(), 30000); // we don't need `source' to be in `Promise` chain, // though we could resolve if `e.data === filesize` // before `response`, then wait for `.text()`; etc. // TODO: if and where to merge or branch `EventSource`, // `fetch` to single or two `Promise` chains const upload = fetch(request); upload .then(response => response.text()) .then(res => console.log(res)) .catch(err => console.error(err)); } ]; input.addEventListener("change", handleFile, true); </script> </body> </html>
你需要clearstatcache来获得真正的文件大小。 与其他一些固定的位，你的stream.php可能看起来如下所示：
<?php header("Content-Type: text/event-stream"); header("Cache-Control: no-cache"); header("Connection: keep-alive"); // Check if the header's been sent to avoid `PHP Notice: Undefined index: HTTP_LAST_EVENT_ID in stream.php on line ` // php 7+ //$lastId = $_SERVER["HTTP_LAST_EVENT_ID"] ?? 0; // php < 7 $lastId = isset($_SERVER["HTTP_LAST_EVENT_ID"]) ? intval($_SERVER["HTTP_LAST_EVENT_ID"]) : 0; $upload = $_GET["filename"]; $data = 0; // if file already exists, its initial size can be bigger than the new one, so we need to ignore it $wasLess = $lastId != 0; while ($data < $_GET["filesize"] || !$wasLess) { // system calls are expensive and are being cached with assumption that in most cases file stats do not change often // so we clear cache to get most up to date data clearstatcache(true, $upload); $data = filesize($upload); $wasLess |= $data < $_GET["filesize"]; // don't send stale filesize if ($wasLess) { sendMessage($lastId, $data); $lastId++; } // not necessary here, though without thousands of `message` events will be dispatched //sleep(1); // millions on poor connection and large files. 1 second might be too much, but 50 messages a second must be okay usleep(20000); } function sendMessage($id, $data) { echo "id: $id\n"; echo "data: $data\n\n"; ob_flush(); // no need to flush(). It adds content length of the chunk to the stream // flush(); }
几个警告：
安全。 我的意思是说它的运气。 据我了解这是一个概念的certificate，安全是最less的担心，但免责声明应该在那里。 这种方法存在根本上的缺陷，只有在您不关心DOS攻击或关于您的文件的信息不存在时才应该使用。
中央处理器。 如果没有使用脚本，将会消耗单个内核的100％。 在长时间的睡眠中，您可能会在一次迭代中上传整个文件，退出条件永远不会满足。 如果您在本地进行testing，则应该彻底移除usleep ，因为在本地上传MB需要几毫秒的时间。
打开连接。 apache和nginx / fpm都有可以处理请求的有限数量的php进程。 单个file upload将需要2上传文件所需的时间。 由于带宽缓慢或请求伪造，这段时间可能会相当长，Web服务器可能会开始拒绝请求。
客户端部分。 您需要分析响应，并最终在文件完全上传时停止收听事件。
编辑：
为了使产品变得更加友好，您需要像redis这样的内存存储或memcache来存储文件元数据。
发出post请求，添加一个唯一的标识文件的标记和文件大小。
在你的javascript：
const fileId = Math.random().toString(36).substr(2); // or anything more unique ... const [request, source] = [ new Request(`${url}?fileId=${fileId}&size=${filesize}`, { method:"POST", headers:headers, body:file }) , new EventSource(`${stream}?fileId=${fileId}`) ]; ....
在data.php注册令牌并通过块报告进度：
.... $fileId = $_GET['fileId']; $fileSize = $_GET['size']; setUnique($fileId, 0, $fileSize); while ($uploaded = stream_copy_to_stream($input, $file, 1024)) { updateProgress($id, $uploaded); } .... /** * Check if Id is unique, and store processed as 0, and full_size as $size * Set reasonable TTL for the key, eg 1hr * * @param string $id * @param int $size * @throws Exception if id is not unique */ function setUnique($id, $size) { // implement with your storage of choice } /** * Updates uploaded size for the given file * * @param string $id * @param int $processed */ function updateProgress($id, $processed) { // implement with your storage of choice }
所以你的stream.php根本不需要打到磁盘，只要UX可以接受就可以睡觉。
.... list($progress, $size) = getProgress('non_existing_key_to_init_default_values'); $lastId = 0; while ($progress < $size) { list($progress, $size) = getProgress($_GET["fileId"]); sendMessage($lastId, $progress); $lastId++; sleep(1); } ..... /** * Get progress of the file upload. * If id is not there yet, returns [0, PHP_INT_MAX] * * @param $id * @return array $bytesUploaded, $fileSize */ function getProgress($id) { // implement with your storage of choice }
2打开连接的问题不能解决，除非你放弃EventSource旧的好拉。 没有循环的stream.php的响应时间是毫秒级的事情，保持连接一直处于打开状态是非常浪费的，除非你每秒需要几百次更新。
你需要用JavaScript块文件，并发送这些块。 上传块时，您确切地知道有多less数据被发送。
这是唯一的方式，顺便也不难。
file.startByte += 100000; file.stopByte += 100000; var reader = new FileReader(); reader.onloadend = function(evt) { data.blob = btoa(evt.target.result); /// Do upload here, I do with jQuery ajax } var blob = file.slice(file.startByte, file.stopByte); reader.readAsBinaryString(blob);
