前端實現圖片上傳預覽並轉換base64

碼上wonderful發表於2020-08-18
  前端實現檔案的上傳,就必須用到input標籤,type屬性為file
  在vue專案中通ref操作dom。input有一個屬性accept,是必須要搭配type=file使用。
  multiple可以上傳多張,accept限制上傳檔案的型別,屬性值有
  • audio(音訊)
  • video(視訊)
  • image(圖片)
  • MIME_type(一個有效的 MIME 型別,不帶引數。請參閱 IANA MIME 型別,獲得標準 MIME 型別的完整列表。image/*表示接受所有型別的圖片,音訊,視訊相同。
1 <input type="file" accept="image/*" ref="file" @change="upload"  multiple/>

  監聽inputonchange事件,在change事件裡操作DOM,拿到上傳的檔案資訊。上傳的檔案資訊都會儲存在files以陣列元素的形式儲存。

1 this.$refs.file.files[0]

  通過new fileReader物件將圖片轉換為base64的資料,FileReader 物件允許Web應用程式非同步讀取儲存在使用者計算機上的檔案的內容,

1 let data = this.$refs.file.files[0];
2 let imgFile = new FileReader();
3 imgFile.readAsDataURL(data);
4 imgFile.onload = res => {
5     console.log(res);
6     this.src=res.target.result
7 };    

  

  readAsDataURL,讀取指定的檔案內容,一旦完成,就可以在onload事件拿到base64資料。
  onload事件有一個引數,這個引數包含了讀取完成之後的檔案資訊,其中,res.target.result就是轉換之後的base64圖片資料。將base64資料賦值給src即可預覽圖片。
  

 

 



相關文章