vue中實現圖片base64上傳和展示

Vue中實現圖片Base64上傳和展示主要使用Js中的FileReader方法

貼上相關代碼

export default function getBase64(file){
    return new Promise((resolve, reject)=>{
        const reader = new FileReader()
        let imgResult = ""
        reader.readAsDataURL(file)
        reader.onload = ()=>{
            imgResult = reader.result
        }
        reader.onerror = (err)=>{
            reject(err)
        }
        reader.onloadend = ()=>{
            resolve(imgResult)
        }
    })
}

把文件流當做參數傳遞即可，（例如使用ElementUi的el-upload就將file.raw傳入）

引用代碼如下：

getBase64(file.raw).then(res=>{
     const params = res.split(",")
     if(params.length > 0){
       var pngBase64 = params[1];
     }
     this.form.imgUrl = pngBase64;
})

這里轉為base64字符串因為后端不需要 "data:image/jpeg;base64,"  我們這里截取后面的字符串給后端，當我們需要展示時就將 "data:image/jpeg;base64,"和獲取后端傳遞過來的這段字符串拼接，即可展示為圖片