前端反显后端图片、上传预览图片
一、下载反显图片
1、将文件下载为blob格式文件。
2、将后端返回的文件转为base64,然后将解析完的数据赋值到图片组件上。
将后端返回的数据解拿出,调用转换base64 方法:
downloadFile(_this.userInfo.imgUrl).then(res => {
res = res.data
base64(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-avatar
class="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) }) }
原文地址:https://blog.csdn.net/qx020814/article/details/140433273
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!