这是从文件还是浏览器内存中流式传输的？

Question

在下面的代码中，看起来好像我可以流式传输本地文件而无需立即将其全部加载到内存中，因为对于较大的文件，我会得到多个块（请参见下面的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虚拟机的内存？

Answer 1

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为止。