这是从文件或浏览器内存流式传输吗？

2024-05-20 • 问答

在下面的代码中，看起来好像我可以流式传输本地文件而无需立即将其全部加载到内存中，因为对于较大的文件，我会得到多个块（请参见下面的console.log(chunk.length);）

const fileInput = document.getElementById('file-input');
const startButton = document.getElementById('start-button');

fileInput.addEventListener('change',() => {
  console.log(fileInput.files);
});

startButton.addEventListener('click',() => {
  if (fileInput.files && fileInput.files.length) {
    const fileURL = URL.createObjectURL(fileInput.files[0]);
    fetch(fileURL,{
      method: 'GET',cache: 'no-store'
    }).then(response => {
      response.body.pipeTo(
        new WritableStream({
          write: chunk => {
            console.log(chunk.length);
          },abort: error => {
            console.error(error);
          },close: () => {
            URL.revokeObjectURL(fileURL);
          }
        })
      );
    });
  }
});

<input type="file" id="file-input" />
<button  id="start-button">start</button>

但是我想知道的是，const fileURL = URL.createObjectURL(fileInput.files[0]);是否创建到本地文件的链接，然后通过ReadableStream从读取中读取该文件，还是将整个文件加载到浏览器的内存和我看到的块中是从浏览器内存到Javascript虚拟机内存的“人工”或流式传输？

URL.createObjectURL( Blob )仅创建指向Blob资源的符号链接。

如果用户磁盘上有文件，则它只是到磁盘上该文件的符号链接，例如，如果您在磁盘上重命名或删除该文件，则blob-URI将指向无处。

亲自进行测试：

let url;
inp.oninput = e => url = URL.createObjectURL( inp.files[0] );
btn.onclick = e => fetch( url )
  .then( console.log )
  .catch( console.error );

<ol>
  <li> select a file <input type="file" id="inp"></li>
  <li> rename it on your disk or delete it</li>
  <li> <button id="btn">try to fetch it</button></li>
</ol>

Ps：在内存中存在Blob的情况下，它也只是一个符号链接，但也会将该资源标记为活动资源，因此将阻止垃圾收集器收集它，即直到您撤消该Blob-URI为止。 / p>

这是从文件或浏览器内存流式传输吗？

whxdhrwhxdhr 回答：这是从文件或浏览器内存流式传输吗？

大家都在问