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

　　前端實現文件的上傳，就必須用到 input標簽， type屬性為 file。

　　在 vue項目中通 ref操作dom。 input有一個屬性 accept，是必須要搭配 type=file使用。

　　 multiple可以上傳多張， accept限制上傳文件的類型，屬性值有

• audio（音頻）
• video（視頻）
• image（圖片）
• MIME_type（一個有效的 MIME 類型，不帶參數。請參閱 IANA MIME 類型，獲得標准 MIME 類型的完整列表。image/*表示接受所有類型的圖片，音頻，視頻相同。）

<input type="file" accept="image/*" ref="file" @change="upload"  multiple/>

　　監聽input的onchange事件，在change事件里操作DOM，拿到上傳的文件信息。上傳的文件信息都會保存在files以數組元素的形式保存。

this.$refs.file.files[0]

　　通過new fileReader對象將圖片轉換為base64的數據，FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件的內容，

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

　　

　　readAsDataURL,讀取指定的文件內容，一旦完成，就可以在 onload事件拿到base64數據。

　　 onload事件有一個參數，這個參數包含了讀取完成之后的文件信息，其中， res.target.result就是轉換之后的base64圖片數據。將base64數據賦值給src即可預覽圖片。