Blob
A Blob is an immutable, raw data-like file object
Developer.mozilla.org/zh-CN/docs/…
const blob = new Blob(array, options)
Copy the codeThe Blob constructor returns an instance of a Blob, where array is an ArrayBuffer, TypedArray, Blob, and DOMString.
ArrayBuffer
Represents a generic, fixed-length buffer of raw binary data. It is an array of bytes, often referred to as a “byte array” in other languages.
You can’t manipulate the contents of an ArrayBuffer directly, but rather through TypedArray or DataView objects, which represent the data in the buffer in specific formats and read and write the contents of the buffer in those formats.
TypedArray
The object represents an array-like view of an underlying binary data buffer. In fact, there is no global property named TypedArray, and there is no constructor named TypedArray
New typedArray() for ES 2017
The following array instances are TypedArray
Int8Array();
Uint8Array();
Uint8ClampedArray();
Int16Array();
Uint16Array();
Int32Array();
Uint32Array();
Float32Array();
Float64Array();
Copy the codeDataView
The underlying interface for reading and writing multiple numeric types from a binary ArrayBuffer object
Relationship between carding
DataURL (Base64) conversion to BLOB is missing in the figure
TypedArray, Blob(File), DataView, Image, and Canvas can be converted to each other.
File and File upload in two ways
The uploaded File is of type File and can be programmed with arrayBuffer /dataURL/Text using the FileReader series methods.
The sample code
FormData file stream
FormData is used in ElementUI to upload files
Added: DataURL –> Blob
Advanced: Upload file slices
File objects inherit from blobs and can therefore be accessed by an ArrayBuffer. ArrayBuffer objects have the same methods as normal arrays, so slice arrays can be used to slice files.
In addition, to identify different chunks in the future, hash values need to be generated based on the file content. Finally, the server collects all hash values and merges them
Example code: The code below is uploaded serially based on a single slice, so only a global Flag is required to record the file slice corresponding to the breakpoint. Concurrent uploading of multiple files requires further optimization
Base64 upload
In addition to formData, you can also upload base64-encoded strings.
In essence, file/img is converted to DataURL. According to the previous conversion diagram, there are two methods
1. Use FileReader’s readAsDataURL method
2. Canvas. ToDataURL () method
supplement
A TypedArray differs from a normal array in that a TypedArray is not a normal array, although both have many of the same methods. TypedArray does not inherit from Array, array. isArray(TypedArray) result is false.
In addition, the length of the TypedArray is fixed, does not change, so you can change the array length method such as shift/pop/splice/push/unshift can not be used, in addition, concat cannot be used.
There are also two new methods that you can use: set, subarray
The last
Serial uploading and parallel uploading are mentioned in slice uploading, so a problem is extended, how to control the concurrency of hundreds of slices?
Using recursion, the code looks like this:
Simulated network request, the request result:
