vue中 iview的upload上傳圖片 獲取本地圖片絕對路徑 在前端實現圖片預覽

在用iview的upload上傳圖片的時候，想要實現圖片的預覽。 但是在iview給的例子中，是每上傳一個圖片觸發一次上傳事件，調一次接口，後臺將圖片存入數據庫，再回傳給前端，這樣實現圖片在前端的顯示。
這個方法對於上傳多張圖片，無疑很不現實。

於是就有了下面的方法。
想要實現上傳多張圖片，上傳的圖依次顯示出來，點擊提交，實現同時上傳，只調一次接口，後臺一次性將多張圖片存入數據庫。

在圖片上傳前 'handleBeforeUpload' 事件中加入以下代碼，獲取的_base64即爲本地圖片的絕對路徑，將其存起來，在賦值到img的src路徑，即可實現圖片在上傳前的顯示，實現圖片的預覽

  const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
        const _base64 = reader.result
        console.log(_base64)
    }
    

整體代碼copy

        //圖片上傳前事件
    handleBeforeUpload (file) {
      this.file = file //需要傳給後臺的file文件
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        const _base64 = reader.result
        this.imgUrl = _base64 //將_base64賦值給圖片的src，實現圖片預覽
      }
      return false//阻止圖片繼續上傳，使得form表單提交時統一上傳
    }