javascript - HTML5 File.slice 方法实际上在做什么？

Question

我正在使用自定义 API 来允许用户上传文件(希望是任意大小的文件)。如果文件太大，它将被分 block ，并在对服务器的多个请求中处理。

根据网上的许多示例，我正在编写使用 File 和 FileReader (HTML5) 的代码。通常(根据我在网上阅读的内容)对于分 block 文件传输，人们首先会从他们的文件对象中获取一团数据

var file = $('input[type=file]')[0].files[0];
var blob = file.slice(start,end)

然后使用 FileReader 读取 blob readAsArrayBuffer(blob) 或 readAsBinaryString(blob)

最后在 FileReader.onload(e) 方法中，将数据发送到服务器。对文件中的所有 block 重复此过程。

我的问题是

为什么我需要使用 FileReader？如果我不使用它，而只是使用 File.slice 发送 blob，是否可以保证在我尝试在每个请求中发送数据之前完成切片操作。 File 对象是否在创建时加载整个文件(肯定不会？)。 File.slice是否查找到参数规定的位置，然后读入里面的信息？该文档没有给我关于它是如何实现的线索。

Answer 1

要记住的重要一点是，File继承自Blob，File实际上没有slice方法，它从Blob中获取这个方法。文件只是添加了几个元数据属性。

将 Blob(或文件)视为指向数据的指针，而不是实际数据本身。有点像其他语言中的文件句柄。

如果不使用读取器，您实际上无法获取 Blob 中的数据，读取器异步读取以避免阻塞 UI 线程。

Blob slice() 方法只是返回另一个 Blob，但同样，这不是数据，它只是指向原始 Blob 中一系列数据的指针，有点像指向 View 的有界指针。要真正从切片的 Blob 中获取字节，您仍然需要使用读取器。在切片 blob 的情况下，您的读者是有界的。

这实际上只是为了方便起见，这样您就不必在代码中携带一堆相对和绝对偏移量，您可以获得数据的有界 View 并像使用阅读器一样使用阅读器从字节 0 开始读取。

在 XMLHttpRequest 的情况下(假设浏览器支持较新的接口(interface))数据将在发送时流式传输，并受 blob 边界的约束。基本上，如果您将文件指针发送到流方法(这基本上是幕后发生的事情)，它将以您想象的方式工作。 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data#Sending_binary_data

本质上，它是一个懒惰的读者。如果 blob 已经从文件系统加载/读取，或者是在内存中创建的，它就会使用它。但是，当您使用 File 时，它​​将延迟加载并从主线程异步流出。

这里的基本逻辑是浏览器开发者永远不希望读取同步发生，因为它可能会阻塞主线程，因此所有 API 都是围绕该核心理念设计的。请注意 Blob.slice() 是如何同步的 - 这就是您知道它实际上没有执行任何 IO 的方式，它只是设置边界和(可能)文件指针。