Preface:

  • Blob, ArrayBuffer, File, fileReader and formData are nouns I’ve seen so often that I don’t seem to know them, I seem to know the same thing but I don’t know them.
  • In order to better understand the meaning of each noun, this article first uses as popular language as possible to explain their differences, probably can distinguish in the macro, and then in other posts to do a single explanation.
  • Blob, ArrayBuffer and File are all data. FileReader is a tool for reading data; FormData can be thought of as a data application scenario. So let’s first focus on the distinction between BLOBs, ArrayBuffers, and Files, and then give a brief introduction to fileReader and formData.

blob

Conceptual understanding

  • A Blob is a binary large object. The MySql/Oracle database has a Blob type for storing binary data.
  • The official MDN definition is that a Blob object is a file-like object containing read-only raw data. In layman’s terms, we can simply think of a Blob as an immutable binary file.

use

  • The constructor

You can create a Blob object directly with new Blob()

var aBlob = new Blob( array, options );
Copy the code

Array (Optional) : Is an array made up of objects such as ArrayBuffer, ArrayBufferView, Blob, DOMString, etc., or a mixture of similar objects. Options: An object that sets some properties of the Blob. The main one is a Type attribute, which represents the type of the Blob (and nothing else for now). Simply put, you can generate a Blob object by passing a bunch of data to new Blob()

  • attribute

Blob.size(read only) : size of data contained in a Blob object (bytes) blob.type (read only) : INDICATES the MIME type of the data contained in the Blob object. For example, if it is a picture, this field is like ‘image/ JPEG’. If the type is unknown, the value is an empty string.

  • methods

Blob has only one slice method, which splits files (note that this does not violate the read-only nature of the Blob; slice simply copies Blob data within a specified range).

Blob.slice(start, end ,contentType)
Copy the code

Start: The start index, which can be negative, has a syntax similar to the slice method of arrays. The default value is 0. End: The end index, which can be negative, has a syntax similar to the slice method of arrays. The default is the last index. ContentType: The MIME type of the new Blob object. This value will be the value of the type property of the new Blob object, which defaults to an empty string.

summary

Simply put, a Blob is a read-only binary file whose size, type and slice can be known.

ArrayBuffer

The concept and usage of ArrayBuffer are relatively complex (it is not complex itself, just a variety of ways to use it), which will be explained in another blog post, but only briefly, to understand its macro concept.

  • An ArrayBuffer is a generic, fixed-length container of binary data. In layman’s terms, a contiguous piece of binary data in memory.
  • We can read and write to the ArrayBuffer, but with the help of the tools it provides, TypeArray or DataView

Relationship between bloB and ArrayBuffer

  • Similarities: Both Blob and ArrayBuffer are binary containers;
  • ArrayBuffer: At a lower level, an ArrayBuffer is a piece of pure in-memory binary data that can be individually modified by any byte or read in a specified range of data in the form we specify
  • Blob: A Blob encapsulates a block of binary data. The Blob encapsulates a block of binary data. The Blob encapsulates a block of binary data. It can be partitioned, but its details cannot be understood
  • Connection: A Blob can take an ArrayBuffer as an argument to generate a Blob object, which encapsulates the ArrayBuffer data and then presents it as a whole
  • Application differences: Due to the characteristics of ArrayBuffer and Blob, Blo as a whole file, suitable for transmission; ArrayBuffer is used only when you need to pay attention to details, such as modifying a piece of data

file

Conceptual understanding

  • A file, by its name, is simply a file. Usually, it means we use<input type="file">Select a FileList object, or a DataTransfer object pulled out using a drag-and-drop operation.
  • The file object is also a binary object, subordinate to the Blob; That is, file is a small class in a Blob. Blob attributes and methods can be used for File, and File has its own unique attributes and methods. For attributes that both Blob and file have, it is recommended to use attributes of Blob

use

I don’t want to do too much here, you can refer to the introduction on MDN

summary

A file is a small class in a BLOB that inherits the bloB’s methods and properties and has its own unique properties. Usually represents a fileList object in

fileReader

  • The Blob object mentioned above is a read-only object, but it is a binary object. If you read it directly, you only get a bunch of 01 data, so you need a special tool to read it, and that tool is fileReader.
  • Blobs can be read in different formats with fileReader, which will be covered in another blog post.

Q: As mentioned earlier, ArrayBuffer also requires a tool (dataView for example) to read data. How is that different from fileReader? A: As FAR as I know, dataView, an ArrayBuffer tool, simply reads data. At most, it converts data to numbers or strings. With fileReader. ReadAsDataURL (BLOB), you read and encode binary data in Base64 format, FileReader. ReadAsText (BLOb) reads binary data and encodes it as a string.

FormData

FormData, to be precise, has very little to do with the above. It’s a new interface added to XMLHttpRequest Level 2 that allows you to emulate a series of form controls with key-value pairs in JavaScript. The great thing about FormData is that, instead of regular Ajax, you can use FormData to asynchronously upload a binary file, and that binary file is the Blob object we talked about above.

Reference: www.zhangxinxu.com/wordpress/2…

www.cnblogs.com/youhong/p/1…