HTML5 File.slice方法实际上在做什么?

Ponml:

我正在使用自定义API,以允许用户上传文件(希望是任意大小)。如果文件很大,将对其进行分块处理,并在对服务器的多个请求中进行处理。

我正在根据网上的许多示例编写使用FileFileReader(HTML5)的代码通常(从我在网上阅读的内容)中,通过分块文件传输,人们首先会从文件对象中获取一滴数据

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

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

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

我的问题是

为什么需要使用FileReader如果我不使用它,而只是使用来发送blob File.slice,则可以保证在我尝试在每个请求中发送数据之前都会完成切片操作。File对象创建后是否会加载整个文件(肯定不会加载吗?)。是否File.slice寻求参数所规定的位置,然后读取其中的信息?该文档没有为我提供有关实现方式的线索。

克莱顿·古利克(Clayton Gulick):

要记住的重要一点是File继承自Blob,File实际上没有切片方法,而是从Blob获取此方法。文件仅添加了几个元数据属性。

想到Blob(或文件)的最佳方法是作为数据的指针,而不是实际的数据本身。有点像其他语言的文件句柄。

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

Blob slice()方法仅返回另一个Blob,但这又不是数据,它只是原始Blob中指向一系列数据的指针,有点像视图的有界指针。要从切出的Blob中实际获取字节,您仍然需要使用读取器。对于切成薄片的斑点,您的阅读器是有界的。

这实际上只是为了方便起见,因此您不必在代码中携带一堆相对偏移和绝对偏移,您可以获取数据的有界视图并像使用字节读取器一样使用读取器0。

对于XMLHttpRequest(假设浏览器支持较新的接口),数据将在发送时进行流传输,并受Blob范围的约束。基本上,如果您将文件指针发送给流方法,它的工作方式将与您想象的相同(基本上是幕后的工作)。https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data#Sending_binary_data

本质上,这是一个懒惰的读者。如果Blob已从文件系统中加载/读取,或已在内存中创建,则将使用该Blob。但是,当您使用文件时,它将被延迟加载并从主线程异步流式传输。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Canvas上从HTML5 File API绘制图像?

UIStackView对齐过程中实际上在做什么isBaselineRelativeArrangement属性?

Spark DataFrame方法“ toPandas”实际上在做什么?

Spark DataFrame方法“ toPandas”实际上在做什么?

git说“正在解决三角洲”时,实际上在做什么?

什么是HTML5 ARIA?

使用HTML5 File API读取存储在某些URL上的文件

在画布HTML5上绘制视频

解释“ DEBUG = myapp:* npm start”实际上在做什么

statsmodels add_constant用于OLS拦截,这实际上在做什么?

C ++:取消引用实际上在做什么?

spifno1stsp作为rsyslog属性实际上在做什么?

什么是JSX,它在React中实际上在做什么?

成角度的“ as”关键字实际上在做什么?

点燃Query / SqlQuery / SqlFieldsQuery:“惰性”和“页面大小”实际上在做什么吗?

srand(time(NULL)); 该语句实际上在做什么

Safari上的HTML5视频问题

为什么在bash while循环中使用“ <&3”,“ 3&-”和“ 3 </ file”?它实际上是做什么的?

Visual Studio Performance Profiler“强制GC”按钮实际上在做什么?

Nodetool垃圾回收实际上在做什么

HTML5 File Reader API-图像质量

拖放HTML5上的画布擦除

这些VMWare指令实际上在做什么?(禁用设备防护并删除EFI变量)

Safari上的PageVisibility HTML5 API

画布HTML5上的DrawImage错误

画布HTML5上的径向渐变

这段代码实际上在做什么?

我的 serverSessionSecrect() 函数实际上在做什么?

Windows 任务计划程序以“最高权限”运行的任务实际上在做什么?