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)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/256833.html
標籤：其他