前端反显后端图片、上传预览图片

 一、下载反显图片

1、将文件下载为blob格式文件。

2、将后端返回的文件转为base64，然后将解析完的数据赋值到图片组件上。 

将后端返回的数据解拿出，调用转换base64 方法：

          downloadFile(_this.userInfo.imgUrl).then(res => {res = res.database64(res).then(res => {_this.imaUrlData = res})}).catch(err => {message({message: err,type: "error",});})

解析为base64编码 

export const base64 = (stream) => {return new Promise((resolve, reject) => {const reader = new FileReader();reader.onload = function (e) {resolve(e.target.result);};reader.onerror = reject;reader.readAsDataURL(stream);});
}

imaUrlData赋值到图片组件上：

        <el-col :span="3"><el-avatarclass="head_portrait"shape="circle"@error='true':size="110":src="imaUrlData"></el-avatar>

 二、编辑时预览：

1、判断文件类型、然后将文件解析为Base64、上传成功后替换显示数据（使用两个formDate对象哦，一个用于显示，一个用于表单修改）。

    onFileChange(e) {let file = e.target.files[0];if (null == file) {message({message: '选择在的文件为空！',type: "error",})this.$refs.fileFile.value = null} else {let arr = ['jpeg', 'png', 'jpg']if (!arr.includes(file.type.split('/')[1])) {message({message: '上传文件格式不正确！',type: "error",})this.$refs.fileFile.value = null} else {let reader = new FileReader();reader.onload = (event) => {this.fromData.imaUrlData = event.target.result;let formData = new FormData()formData.append('file', file)this.uploadImage(formData);};reader.readAsDataURL(file);}}}

    uploadImage(base64Image) {// 发送Base64图像到后端uploadFile(base64Image).then(res => {this.fromData.imgUrl = res.data.msg// console.log('上传文件1',res)}).catch(err => {message({message: '上传失败',type: "error",});console.log('上传文件出错', err)})}