javascript - 如果我只想获取 HTML 格式的流，输入 `file.stream()` 与 `response.body` 有什么区别？

Question

请参阅这个最小示例:

我想获取 mp3 文件的流，我找到了两种方法来实现此目的，但我很困惑应该使用哪一种。

1. file.stream()可以获取文件流
2. 将文件传递给 createObjectURL，然后获取 URL，我可以从 response.body 获取流

它们相同吗？

如果我只想获取流，哪一个更好？

const input = document.querySelector("input");

input.addEventListener("change", async () => {
  const file = input.files[0];
  const response = await fetch(window.URL.createObjectURL(file));

  console.log("Stream from fetch response body", response.body);
  console.log("Stream from file.stream()", file.stream());
});

<input type="file" accept="audio/mp3" />

Answer 1

使用 file.stream，因为您已经拥有可用的 File 对象。

如果您已经有 createObjectURL 或 fetch 可用，请不要使用 File (即您使用 Stream 的示例)，因为您只是为浏览器创建了不必要的工作。

_{(我推测这是因为 JavaScript 没有定义外部资源的生命周期或如何管理外部资源的状态，在这种情况下浏览器可能会创建数据的“安全”副本，而不是具有 Response ' Stream 共享相同的底层字节缓冲区)}。

正如您想知道的:createObjectURL 函数用于生成一个字符串 URI，您可以将其传递给无法与 Stream 或 File 对象一起使用的其他对象，例如 <video> 元素的src 属性 - 通过这种方式，您可以显示来自 <input type="file" /> 的图像文件或视频的即时预览，而无需执行任何低效操作，例如使用 Base64 编码的 data: URI 或先将文件上传到您的网络服务器。

此外，每当您使用 createObjectURL 时，您必须调用 revokeObjectURL()，否则您的浏览器中将会出现内存泄漏，直到您的页面被卸载。