When uploading pictures with the upload of iView, you want to preview the pictures But in the example given by iView, every picture uploaded triggers an upload event, the interface is adjusted once, the background stores the picture in the database, and then sends it back to the front end, so as to realize the display of the picture in the front end.
This method is no doubt unrealistic for uploading multiple images.
So here’s how.
If you want to upload multiple pictures, the uploaded pictures will be displayed one by one. Click submit to upload at the same time. You can only adjust the interface once, and the background will store multiple pictures into the database at one time.
Add the following code into the ‘handlebeforeupload’ event before uploading the picture. The acquired ﹐ Base64 is the absolute path of the local picture. Save it and assign it to the SRC path of img to display the picture before uploading and preview the picture
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
const _base64 = reader.result
console.log(_base64)
}
Overall code copy
//Events triggered before uploading pictures
handleBeforeUpload (file) {
This.file = file // it needs to be passed to the background file
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
const _base64 = reader.result
This. Imgurl = ﹐ Base64 // assign ﹐ Base64 to the SRC of the picture to preview the picture
}
Return false // prevent the image from being uploaded, so that the form form can be uploaded uniformly when it is submitted
}