Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

background

We use Blob,file and base64 conversions a lot in our everyday code. Today I will summarize the transformations between file Base64 blobs.

The definition of the File

HTML5 adds a collection of files to the DOM for file input elements. When the user selects one or more files in the File field, the files collection contains a set of File objects representing the selected files. Every File object has some read-only properties.

File objects are special class bloBs and can be used in any bloB-type context.

The file transfer base64

/** * @param {*} file */ export const fileToBase64 = file => {let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { return e.target.result }; };Copy the code

The definition of a Blob

Blob stands for Binary Larget Object, a JavaScript wrapper type for unmodifiable binary data. Arrays, ArrayBuffers, ArrayBufferViews, and even other bloBs containing strings can be used to create bloBs.

What is a Blob

var debug = {name: "zz"};
var blob = new Blob([JSON.stringify(debug,null,2)], {type:'application/json'})
Copy the code

If we print the blob, we can see that the blob has two properties: size and type. The size attribute represents the size of the data in bytes, and type is a string of MIME type.

Common scenarios for BLOBS

  • Upload large files in fragments
  • Hide video links
  • File download

Turn a blob file

/**
 *  @param { blob } blob
 *  @param { string } fileName
 */
export const blobToFile = (blob, fileName) => {
    blob.lastModifiedDate = new Date();
    blob.name = fileName;
    return blob;
};

Copy the code

The definition of base64

Base64 is a similar set of binary-to-text encoding rules that enable binary data to be represented as ASCII strings after being interpreted in the radix-64 representation. Base64 encoding is commonly used in scenarios where binary data needs to be encoded by storing and transmitting it on media designed to process text data.

The so-called Base64 is to select 64 characters —- lowercase a-z, uppercase A-Z, digits 0-9, symbols “+”, “/” (plus the padded “=”, which is actually 65 characters) —- as a basic character set. All other symbols are then converted to characters in this character set.

Base64 transfer the file

/** * @param {base64} base64 * @param {string} filename */ export const base64ToFile = (base64, filename )=> { let arr = base64.split(','); let mime = arr[0].match(/:(.*?) ; / [1]); let suffix = mime.split('/')[1] ; let bstr = atob(arr[1]); let n = bstr.length; let u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], `${filename}.${suffix}`, { type: mime }) };Copy the code

Turn base64 blob

/** * @param { base64 } base64 */ export const base64ToBlob = base64 => { let arr = base64.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

Recommended reading

  • # I use these ten kinds of wheels in the project to help me improve development efficiency and collection
  • When to use the # JS arrow function, and when not to use it
  • How can I summarize the difference between strict and non-strict?

The last

I am ZZ, rich hands, remember a key three even oh!!