Blob = Blob; Blob = Blob; Blob = Blob; Blob = Blob

classification

  • Blobs, ArrayBuffers, and Files can be grouped together as data;
  • FileReader is a tool for reading data;
  • FormData can be thought of as a data application scenario.

Blob

Concept to explain

A Blob object is a file-like object that contains read-only raw data. A Blob object is an unmodifiable binary file

Created by the constructorBlobobject

var aBlob = new Blob( array, options );
// array: an array of data
//options: Set some properties, mainly the type property
Copy the code

Properties of a Blob object

  • Size: Data size in bytes (read only)
  • Type: THE MIME type of the data, such as ‘image/ JPEG ‘(read only) (MIME: An Internet standard describing the content type of a message)

Methods of Blob objects

Blob objects have only the slice method, which splits files

Blob.slice(start, end ,contentType)
//start: start point of split
//end: split end
//contentType: new MIME type
Copy the code

File

Concept to explain

A File is a binary object that inherits from a Blob and has its own properties and methods. It is usually used in the FileList object selected at or in the DataTransfer object produced by a drag-and-drop operation.

The constructor creates the File object

var myFile = new File(array, name,options);
// array: an array of data
/ / name: name of the file
//options: Set some attributes, type attribute, lastModified
Copy the code

File object properties

  • Name: File name
  • Size: indicates the file size
  • LastModified: lastModified time (timestamp)
  • LastModifiedDate: Last modified time Data object
  • Type: indicates the MIME type

The File object method inherits from the slice method of the Blob

Blob.slice([start, end, contentType)
//start: start point of split
//end: split end
//contentType: new MIME type
Copy the code

ArrayBuffer

Concept to explain

An ArrayBuffer is a piece of binary data in memory, which can be read and written by using TypeArray and DataView

Relationship between Blob and ArrayBuffer

  • ArrayBufferIs the underlying binary data, can be read and written with the help of tools, andBlobIt’s an encapsulation of the underlying binary data, so we get the whole thing, we can read its size, type, but we can’t see the details
  • Blob can accept oneArrayBufferGenerate one as an argumentBlobObject, this behavior is equivalent to that ofArrayBufferThe data is encapsulated and then presented as a whole

-Blob as a whole file, suitable for transfer; ArrayBuffer is used only when you need to pay attention to details, such as modifying a piece of data

File to file conversion

The File File is converted to a Blob object

let aBlob = new Blob([file], {type: file.type})
Copy the code

Blob is converted to File

let files = new window.File([this.blob], file.name, {type: file.type})
Copy the code

File/Blob files are converted to base64

function blobToDataURL(blob, callback) {
    let a = new FileReader();
    a.onload = function (e) { callback(e.target.result); }
    a.readAsDataURL(blob);
}

Copy the code

Image URL is converted to base64

img2base64(imgUrl) {
      let image = new Image()
      image.src = imgUrl
      return new Promise((resolve) = > {
        image.onload = () = > {
          let canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          var context = canvas.getContext('2d')
          context.drawImage(image, 0.0, image.width, image.height)
          let dataUrl = canvas.toDataURL('image/png')
          resolve(dataUrl)
        }
      })
    },
Copy the code

Turn base64 Blob

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(', '), mime = arr[0].match(/ : (. *?) ; /) [1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}
Copy the code

Base64 transfer the File

 function dataURLtoFile(dataurl, filename) {// Convert base64 to a file
        var arr = dataurl.split(', '), mime = arr[0].match(/ : (. *?) ; /) [1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {type:mime});
    }
Copy the code

FileReader

Blobs and files can be read in different formats with fileReader

  • FileReader. ReadAsDataURL (BLOB reads and encodes binary data in Base64 format
  • FileReader. ReadAsText (BLOb) reads binary data and encodes it as a string

FormData

With FormData we can asynchronously upload a binary file, which is the Blob object we talked about above