什么是HTML5 File.slice方法实际上在做什么？ [英] What is HTML5 File.slice method actually doing?

问题描述

我正在使用自定义API来允许用户上传文件（希望是任意大小）。如果文件很大，将被整理，并处理多个请求到服务器。

我正在编写使用 File 和 FileReader （HTML5）从在线的许多例子。一般来说（从我在线阅读的文件传输），人们将首先从它们的文件对象中获取一个数据块。

  var file = $（'input [type = file]'）[0] .files [0]; 
 var blob = file.slice（start，end）
  

然后使用<$ c读取blob readAsArrayBuffer（blob）或 readAsBinaryString（blob）
$ b

最后在 FileReader.onload（e）方法中，将数据发送到服务器。对文件中的所有块重复这个过程。

我的问题是

为什么我需要使用 FileReader ？如果我不使用它，并且只发送带有 File.slice 的blob，是否有任何保证在我尝试发送每个数据之前完成分片操作请求。 File 对象是否在创建时加载整个文件（当然不是？）。是否 File.slice 寻找参数规定的位置，然后读取？这个文档并没有给我一个关于如何实现的线索。

解决方案

从Blob中，File实际上并没有分片方法，它从Blob中获取这个方法。文件只是添加了一些元数据属性。

想想Blob（或文件）的最好方法是作为指向数据的指针，而不是实际的数据本身。不像其他语言的文件句柄。

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

Blob slice（）方法只返回另一个Blob，但是这又不是数据，它只是一个指向原始Blob中的一系列数据的指针，有点像一个有界的指针视图。要真正从被分割的Blob中获取字节，您仍然需要使用阅读器。在一个blob的情况下，你的读者是有界的。

这实际上只是为了方便起见，因此您不必在代码中携带大量的相对和绝对偏移量，只需要一个有界的查看数据并使用阅读器，就好像你正在从字节0读取。

对于XMLHttpRequest（假设浏览器支持较新的接口），数据将是发送流量，并受到blob的限制。基本上，如果你发送一个文件指针到一个流方法（这基本上是在封面下面发生了什么），它的工作方式与你想象的一样。 https://developer.mozilla.org/en-US/docs/Web/ API / XMLHttpRequest / Sending_and_Receiving_Binary_Data #Sending_binary_data

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

这里的基本逻辑是浏览器开发者永远不想要读取会同步发生，因为它可能会阻塞主线程，所以所有的API都是围绕这个核心理念而设计的。注意Blob.slice（）是如何同步的 - 这就是你如何知道它实际上并没有做任何IO，它只是设置边界和（可能）文件指针。

I'm working with a custom API to allow a user to upload a file (of, hopefully, arbitrary size). If the file is to large, it will be chunkfied, and handled in multiple requests to the server.

I'm writing code that uses File and FileReader (HTML5) as per many examples from online. In general (from what I read online) for a chunkfied file transfer, people will first get a blob of data from their file object

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

Then use a FileReader to read the blob readAsArrayBuffer(blob) or readAsBinaryString(blob)

And finally in FileReader.onload(e) method, send the data to the server. Repeat this process for all the chunks in the file.

My questions are

Why do I need to use a FileReader? If I don't use it, and simply send blobs with File.slice, is there any guarantee that the slicing operation will be done before I try to send the data in each request. Does the File object load the entire file when it's created (surely not?). Does File.slice seek to the position stipulated by the parameters, and then read the information in? The documentation doesn't give me an clues on how it's implemented.

解决方案

The important thing to keep in mind is that File inherits from Blob, File doesn't actually have a slice method, it gets this method from Blob. File just adds a couple metadata attributes.

The best way to think of a Blob (or File) is as a pointer to data, but not the actual data itself. Sort of like a file handle in other languages.

You can't actually get to the data in a Blob without using a reader, which reads asynchronously to avoid blocking the UI thread.

The Blob slice() method just returns another Blob, but again, this isn't data, it's just a pointer to a range of data within the original Blob, sort of like a bounded pointer to a view. To actually get the bytes out of the sliced Blob, you still need to use a reader. In the case of a sliced blob, your reader is bounded.

This is really just intended as a convenience so that you don't have to carry a bunch of relative and absolute offsets around in your code, you can just get a bounded view of the data and use the reader as if you were reading from byte 0.

In the case of XMLHttpRequest (assuming the browser supports the newer interface) the data will be streamed on send, and constrained by the bounds of the blob. Basically, it will work the same way you'd imagine it to work if you sent a file pointer to a stream method (which is basically what's going on under the covers). https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data#Sending_binary_data

Essentially, it's a lazy reader. If the blob is already loaded/read from the file system, or was created in memory, it's just going to use that. When you're using a File though, it'll be lazily loaded and streamed asynchronously out of the main thread.

The basic logic here is that the browser devs never want a read to happen synchronously because it could block the main thread, so all of the API's are designed around that core philosophy. Notice how Blob.slice() is synchronous - that's how you know it's not actually doing any IO, it's just setting up bounds and (possibly) file pointers.

这篇关于什么是HTML5 File.slice方法实际上在做什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！