Upload image of iView in Vue to get local image absolute path to realize image preview in front end

Time:2019-11-14

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
    }