Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "what is the concept of File and Blob in JS", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "what is the concept of File and Blob in JS" can help you solve your doubts.

What is File / Blob

Blob is the most original file object, and File is modified based on Blob, so the attributes / methods of Blob can also be used in File. You can understand it as File = = Blob. For example, the file information returned after selecting a file by input belongs to File.

How to operate File / Blob

Both FileReader and URL.createObjectURL () provided by JS can handle File / Blob.

FileReader

FileReader can be used to read File / Blob. When input chooses to upload a file, such as a picture File, we can pass this File to FileReader to provide the relevant API to convert the corresponding data.

FileReader APi

Reader.readAsDataURL (file | | blob) is converted to base64

Reader.readAsArrayBuffer (file | | blob) is converted to a buffer array

Reader.readAsText (file | | blob) is converted to text

Reader.readAsBinaryString (file | | blob) to byte

Let's take a look at demo

/ / callback after uploading files

Function onChange (event) {

/ / accept File

Const file = event.target.files [0]

/ / generate url

Console.log (URL.createObjectURL (file))

}

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

Base64 and blob:url application scenarios

Base64 is usually used for picture display and picture preview.

Blob: url is usually used to upload parts, click on link files to download, generate pdf, etc.

Create Blob manually

Since selecting an input file will automatically return File, let's take the creation of Blob as an example

We can put object data into Blob and generate blob:url | | base64 | | text data

Let's take a look at demo.

Const obj = {name: 'Jack'}

/ / put the data into blob

Const blob = new Blob ([JSON.stringify (obj, null, 2)], {type: 'application/json'})

/ / convert to base64

Const reader = new FileReader ()

Reader.readAsDataURL (blob)

Reader.onload = (res) = > {

Console.log (res.target.result)

}

/ / convert to url

Console.log (URL.createObjectURL (blob))

/ / read the text directly (creating a blob will return a promise, so we can use await to get it)

Console.log (await blob.text ())

All right, that's it. I'm sure you already know the basic concepts of FIle / Blob.

Note

The generated base64 and url are not persistent, they are just stored in memory, and are automatically deleted from memory when you close the document, so you cannot put them in the localStore or server.

After reading this, the article "what is the concept of File and Blob in JS" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it. If you want to know more about the article, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.