HTML 5中File.slice方法实际上在做什么?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (68)

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

我在编写代码File and FileReader(HTML 5)从网上的许多例子来看。通常(根据我在线阅读的内容),人们将首先从他们的文件对象中获取大量数据。

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

然后使用FileReader去读这个斑点readAsArrayBuffer(blob)readAsBinaryString(blob)

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

我的问题是

为什么我需要使用FileReader是吗?如果我不使用它,只需用File.slice,在我尝试发送每个请求中的数据之前,是否可以保证切片操作将被完成。是否File对象在创建文件时加载整个文件(肯定不是吗?)。File.slice找出的位置规定的参数,然后阅读信息在?这些文档并没有给我一个关于它是如何实现的线索。

提问于
用户回答回答于

重要的是要记住的是File继承了Blob,File实际上没有片方法,它是从Blob获得这个方法的。文件只是添加了几个元数据属性。

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

实际上,如果不使用读取器,就无法访问Blob中的数据,读取器可以异步读取以避免阻塞UI线程。

BlobSlice()方法只返回另一个Blob,但这不是数据,它只是指向原始Blob中的一系列数据的指针,有点像指向视图的有界指针。要真正从切片块中获取字节,仍然需要使用读取器。对于切片的BLOB,你的阅读器是有界的。

这实际上只是为了方便,这样你就不必在代码中携带大量相对和绝对偏移量,你就可以获得数据的有界视图,并像从字节0读取一样使用阅读器。

在XMLHttpRequest(假设浏览器支持较新的接口)的情况下,数据将在发送时流,并受到BLOB边界的限制。基本上,如果发送一个指向流方法的文件指针(这基本上就是幕后的情况),它的工作方式与你想象的一样。

本质上,它是一个懒惰的读者。如果BLOB已经从文件系统加载/读取,或者是在内存中创建的,那么它就会使用它。但是,当你使用一个文件时,它将被延迟加载,并且异步地从主线程中流出来。

这里的基本逻辑是,浏览器开发人员不希望读取同步进行,因为它会阻塞主线程,因此所有API都是围绕这一核心理念设计的。注意Bob.Slice()是如何同步的--这就是为什么你知道它实际上并没有执行任何IO,它只是设置边界和(可能的)文件指针。

扫码关注云+社区