VUE预览后端传来的二进制图片

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)
    }