I have encountered several scenarios that need to deal with file flow, as well as mutual conversion, here in-depth study of their concepts, differences and mutual conversion, reading this article you will understand the common front-end file flow format, as well as the idea of mutual conversion.

1. The concept

File

Normally a File object is a FileList object after the input tag selects a File. It can also be a DataTransfer object generated by a drag-and-drop operation, or it can be from the mozGetAsFile() API on an HTMLCanvasElement.

Files are special blobs, and functions that can handle bloBs must handle bloBs, for example, FileReader, url.createObjecturl (), createImageBitmap() (en-us), and xmlHttprequest.send () can all handle blobs and files.

Conclusion:FileIs a special oneBlobObject. specificAPISee the MDN File

Base64

Base64 is a binary-to-text encoding rule consisting of 64 printable characters

What problem does Base64 solve?

Base64 is to solve the problem of binary incompatibility in various systems and transport protocols. Why is Base64 compatible? Mainly because each system can only guarantee the base characters of ASIIC, Base64 takes 64 of them. See MDN Base64.

Base64 algorithm:

  • 1. Take the raw data as a group of three bytes, each byte is 8 bits, so there are 24 bits in total

  • 2. Divide the 24 bits into four groups with six bits in each group

  • 3. Add 00 to the front of each group to complete it into four groups of 8 bits. By this step, the three bytes of native data have become four bytes, an increase of nearly 30%

  • 4. Obtain the corresponding symbol of each byte after the extension according to the Base64 code table

Small tips:

About the end of Base64 ‘=’, and sometimes is a sometimes is two, this is because Base64 is a group of three characters, so when less than three will be used ‘=’ fill, missing a fill a ‘=’, missing two fill two ‘=’.

In fact, in real development, what we get is a DataURL and we usually have data:image/ JPEG; Base64, it’s important to note that after that comes the real data.

Blob

A Blob is a file object representing immutable, raw data that can be read in text or binary format or converted to ReadableStream for data manipulation. See MDN Blob for the API

You can use Blob to upload large files in fragments.

ArrayBuffer

The ArrayBuffer object is used to represent 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.

The contents of an ArrayBuffer cannot be manipulated directly, but must be manipulated through a type array object or DataView object, representing the data in the buffer in a specific format, and reading and writing the contents of the buffer through these formats.

2. Switch

In daily development, we often encounter apis or components that require file types, and only then we need to convert these file types.

Before that, let’s introduce a JS BOM API called FileReader

FileReader can read Blob objects so it can also read File objects, and FileReader provides an interface to output ArrayBuffer Base64.

Some conversion codes are posted directly below:

The File transfer Base64:

  let reader = new FileReader();
  reader.readAsDataURL(file[0])
  console.log(reader)
Copy the code

Base64 turn Blob:

const dataURItoBlob = (dataURI) => { var byteString = atob(dataURI.split(',')[1]); var mimeString = dataURI.split(',')[0].split(':')[1].split('; ') [0]; var ab = new ArrayBuffer(byteString.length); var ia = new Uint8Array(ab); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ab], {type: mimeString}); }Copy the code

Turn the Blob ArrayBuffer:

Let blob = new blob ([1,2,3,4]) let reader = new FileReader(); reader.onload = function(result) { console.log(result); } reader.readAsArrayBuffer(blob);Copy the code

Buffer to Blob:

let blob = new Blob([buffer])

Turn Base64 File:

const base64ConvertFile = function (urlData, filename) { if (typeof urlData ! = 'string') { return; } var arr = urlData.split(',') var type = arr[0].match(/:(.*?) ; /)[1] var fileExt = type.split('/')[1] var bstr = atob(arr[1]) var n = bstr.length var u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], 'filename.' + fileExt, { type: type }); }Copy the code

Conclusion:

Common File stream formats on the front end are Blob File Base64 ArrayBuffer, where File is a special Blob object and most of the transformations can be implemented through THE JS BOM API FileReader.