VUE预览后端传来的二进制图片
1.新建一个对话框,用来显示图片
<el-dialog title="" :visible.sync="imgdialog" width="70%">
<img :src="src" alt=""/>
</el-dialog>
2.下载方法,可以将request替换成axios
download(row) {
this.$request({
url: baseUrl + '/file/download',
method: 'post',
data: row,
responseType: 'arraybuffer' //这个响应类型必须要写
}).then(res => {
// console.log(res) //二进制文件打印出来是乱码
this.src = 'data:image/jpeg;base64,' + this.arrayBufferToBase64(res)
this.imgdialog = true
}).catch(err => {
console.log(err)
})
},
3.转码方法
arrayBufferToBase64(buffer) {
var binary = ''
var bytes = new Uint8Array(buffer)
var len = bytes.byteLength
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i])
}
return window.btoa(binary)
}