【blob图片预览】后端返回blob格式图片,前端进行展示
请求时注意添加responseType
this.$axios.get(`/attachment/files/view/${id}`, {
responseType: 'blob'
}).then(res => {
this.previewUrl = '' // img的src绑定的变量
// 处理方式1——使用FileReader处理
const reader = new FileReader()
reader.onload = (e) => {
this.previewUrl = e.target.result
}
reader.readAsDataURL(res.data)
// 处理方式2——直接使用URL.createObjectURL
// res.data必须是Blob类型数据
this.previewUrl = URL.createObjectURL(res.data)
}).catch(() => {
this.getImageFailedInfo = '获取预览文件失败'
})