vue中实现图片base64上传和展示

Vue中实现图片Base64上传和展示主要使用Js中的FileReader方法贴上相关代码export default function getBase64(file){return new Promise((resolve, reject)={const reader = new FileReader()let imgResult = re...

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,"和获取后端传递过来的这段字符串拼接，即可展示为图片