javascript - 这是来自文件还是浏览器内存的流？

Question

在下面的代码中，看起来好像我可以流式传输本地文件，而无需将其全部加载到内存中，因为对于较大的文件，我会获得多个 block (请参阅 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 从 fetch 读取该文件或者它是否将整个文件加载到浏览器内存中，而我看到的 block 是“人造的”或从浏览器内存流式传输到 Javascript 虚拟机内存？

Answer 1

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

如果文件位于用户磁盘上，那么它只是磁盘上该文件的符号链接(symbolic link)，如果您在磁盘上重命名它或删除它，您的 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，它也只是一个符号链接(symbolic link)，但它也会将此资源标记为事件状态，从而阻止垃圾收集器收集它，直到您撤销此 blob-URI。