vue專案中如何利用base64上傳圖片與檔案
阿新 • • 發佈:2018-12-29
前端在進行資原始檔上傳的時候,可以藉助HTML5中,fileReader物件進行圖片和檔案的上傳。利用該物件提供的一些屬性方法更加方便的獲取所上傳的檔案資訊。在vue專案中操作方法如下:
1)繫結input[type=‘file’]的change事件
<input @change="uploadPhoto($event)" type="file" class="kyc-passin">
2)利用fileReader物件獲取圖片或者檔案的base64 編碼
uploadPhoto(e) { // 利用fileReader物件獲取file var file = e.target.files[0]; var filesize = file.size; var filename = file.name; // 2,621,440 2M if (filesize > 2101440) { // 圖片大於2MB } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { // 讀取到的圖片base64 資料編碼 將此編碼字串傳給後臺即可 var imgcode = e.target.result; console.log(imgcode); } },
3)再利用ajax將獲取到的圖片或檔案的編碼傳給後臺即可。