Hi, I’m your hapless old Wangly. I didn’t update my article last weekend, I was planning something new. In addition to writing your own component library is just reviewing some knowledge. I have to say, it’s hard to find a job these days. This article is mainly a review of Blob uploads with large file slices.

This article is a note, not in-depth. Just do an understanding.

What is a Blob

To paraphrase the Mdn Web Docs:

A Blob object represents an immutable, raw data-like file object. Blobs don’t necessarily represent data in JavaScript’s native format. The File interface is based on Blob, inheriting the functionality of Blob and extending it to support files on the user’s system.

A binary large object, as its name implies, is a large collection container that hosts binaries. A Blob is simply a heap of binary data. You can useFileFrom the above reference also mentioned,FileIs actuallyBlobThe subclass. inheritanceBlobAt the same time, the claim was extended. soFileKind of an alien, tooBlob. So,BlobSome of the APIFileAll the same.

Instantiation and parameters

A Blob object can be instantiated using new Blob(array, option). There are two parameters that are used for what? What are they used for?

  • Array: Null by default. The first argument requires you to pass in a cached array variable. During the instantiation process, the cached contents of the array are gold-plated to generate a Blob object.
  • Opiton: It requires you to pass an object that contains onetypeProperty of theBlobThe data type of. It looks something like this. By defaulttypeThe value is emptynull | "" 
    interface option {
  type: string
}
Copy the code
const domBuffer = ['dom blob !!!! ']
const domBlob = new Blob(domBuffer, {type : 'text/html'})
console.log(domBlob)
Copy the code

Printing out an instance of the BLOB looks like this

Attributes that

You can see from the Blob example above that it contains two attributes, type and size. What do they mean?

  • Type:typeRepresents the type of the binary content of the Blob, which is declared when the Blob is declared.
  • The size:sizeRepresents the content size of a Blob, in unitsbyte

Instance methods

And you can see,BlobHere are the default methods for us to call. What role do they play?

Slice method

Slice interception is something we’ve seen in other places, such as arrays. The principle is similar. Just one for arrays and one for blobs. They all return a new data.

// Start intercepting 10 bytes
const slice10 = domBlob.slice(0.10)
Copy the code

By passing in the start and end arguments, we create a new Blob that cuts out bytes for itself. I intercepted it, but there’s something wrong with it. Type seems to be missing? The new Blob does not have a type. Then we need to pass in the third argument, contentType, to define a type declaration.

const slice10 = domBlob.slice(0.10.'text')
Copy the code

Text method

The text text method returns the contents of the Blob as a promise.

domBlob.text().then(text= > {
  console.log(text)
})
Copy the code

The stream method

The STREAM method is used to present the Blob as a stream object. You can do some behavior through the methods of the Stream object.

const stream = domBlob.stream()
console.log(stream)
Copy the code

ArrayBuffer method

The arrayBuffer method displays data containing the BLOB in binary form.

const stream = domBlob.arrayBuffer().then(buffer= > {
  console.log(buffer)
})
Copy the code

File section

The principle is to take a file as a file, cut into several files. The binaries are then sent to the back end by interacting with it. A few points to note:

  • Is the section normal?
  • The uploaded sequence must be uncluttered
  • Avoid duplicate file uploads
  • When the upload is complete, the backend merges the verification bytes.

Access to the file

// File callback
  private handleUpload(e: Event) {
    const [file] = (e.target as any).files
    if(! file)return
    this.file = file
 console.log(file)  this.createFileChunk(file)  } Copy the code

slice

// File slicing
  createFileChunk(file:File, _size: number = 500) {
    // File size
    const fileSize: number = file.size
    // Start byte
 let startSize: number = 0  // Slice calculation  const chunkCount: number = Math.ceil(fileSize / _size)  // Count the page number  let page: number = 1  // Slice the list  const fileList: Array<Blob | File> = []  while (page <= chunkCount) {  const chunkFile:File | Blob = file.slice(startSize, startSize + _size)  fileList.push(chunkFile)  startSize = startSize + _size  page++  }  console.log('Sliced file:', fileList)  this.fileList = fileList  this.start = startSize  } Copy the code

conclusion

Blobs are almost invisible in the traditional business of the front-end. But as we go deeper. When it comes to large file interactions. This is where the convenience of binary comes in. Because binary is incrementable. As long as the binary is not lost. So, the integrity of the file is guaranteed. This article is primarily a study of Blob. I didn’t go too far. Just to get a sense of what kind of problems we’ll encounter in the future.

Read the reference article:

Front end big file upload @ Orange red era

Click the jump

Bytedance interviewer: Please implement a large file upload and breakpoint continuation @yeyan1996:

Click the jump

MDN Blob Web Api

Click the jump

There is a good opportunity to recommend me.