1. 程式人生 > >vue專案中如何利用base64上傳圖片與檔案

vue專案中如何利用base64上傳圖片與檔案

前端在進行資原始檔上傳的時候,可以藉助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將獲取到的圖片或檔案的編碼傳給後臺即可。