前端實現圖片上傳預覽並轉換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/>

　　監聽input的onchange事件，在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即可預覽圖片。
　　

 

 



相關文章