VueJS: Import and Preview Image

Tram Ho

Hi everybody.

Before entering today’s post, I want to thank you guys for always following my VueJS serries. Many of you find solutions on Google for difficult problems, and by chance finding my own articles, I feel very happy that my simple articles have helped many of you. so. Many of you recommend me about many new problems. But instead of searching for a specific topic of VueJS, hope you will find the solution on (Pure) Javascript and convert it to VueJS by yourself as my today’s post. I wish you a strong and successful 2021 year.

Today, I continue to share with you a few of my knowledge about VueJS through the Preview Image method.

I. FileReader:

Normally, to view the image after importing, we will use FileReader ( details ). In the definition in MDN , we learned that: FireReader is an object that allows our Web App to đọc nội dung file không đồng bộ .

The syntax of creating a basic FileReader object is:

After creating a theReader from FileReader , you will kế thừa following properties and methods:

1. Properties:

  1. error : Returns an error object that displays information about the error during file reading.
  2. result : File content after being read successfully. Depending on the method of reading the file, result will return a corresponding format,
  3. readyState : states theReader with the values:
StatusCorresponding valueMeaning
DONE2The entire file has been read successfully
LOADINGfirstData is in the process of reading
EMPTY0No data has been uploaded to theReader

2. Methods:

  1. abort() : Execute when canceling read state, after return , readyState will be 2 (DONE) .
  2. readAsArrayBuffer() : Read the file in Blob format, after success will return the array-buffer format.
  3. readAsBinaryString() : Same as above but will return raw binary data from the file as a string
  4. readAsDataURL() : Similar to the above, after a successful read will return the form of data:{url} represents the data file.
  5. readAsText() : Similar to above, after a successful reading will return the text string .

3. Event handlers:

  1. onabort : When canceling the upload, the inner function will do it.
  2. onerror : When an error occurs, the inner function will be executed.
  3. onload : after successfully uploading the file, the inner function will be executed.
  4. onloadstart : When the file starts to read, the inner function will be executed.
  5. onloadend : When reading file succeeds or fails, the inner function will be executed.
  6. onprogress : While reading the file, the inner function will be executed.

To perform a basic image upload and preview function, we’ll use the event handler: load .

II. Basic code with HTML and (Pure) Javascript:

To read the file, we create an input type file to upload the file, the onchange attribute to manage when the file is uploaded will call the loadFile function for processing. Inside the loadFile function, we will call theReader a new object from FileReader . We call the event handler onload and assign the newly read data to the src of the image img . In addition, we use the readAsDataURL file reading readAsDataURL to read the image file in base64 format, supporting uploading to the server. The basic code is as follows:

Link demo code: Here!

III. Convert to VueJS:

This step is quite simple, I will not re-explain but send you the following code:

Link demo code: Here

Thank you for viewing my article. Have a lot of fun with VueJS.

Share the news now

Source : Viblo