vue如何预览后端传来的二进制图片

目录

• vue预览后端传来的二进制图片
• 1.新建一个对话框
• 2.下载方法
• 3.转码方法
• vue实现文件预览功能的前端
• 预览文件的前端
• 第一种方法
• 第二种方法

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

1.新建一个对话框

用来显示图片

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

vue实现文件预览功能的前端

预览文件的前端

省略点击按钮点击触发showdialogview()方法的代码

第一种方法

先在template中加入一个input框，绑定一个字符串类型的变量

写showdialogview()方法

调用后台的方法，如果返回的不是null（后台返回的数据是一行一行返回的）,就使用for循环，添加到变量中去。 

第二种方法

可以在对话框中加入一个table标签，在tbody标签中使用v-html绑定变量，这样，在字符串中的标签可以展示出来

因为后台给的接口返回的数据是数组中的一个下标对应的一行数据，把每一行的数据拆分成字符串数组，然后放在单元格中，这样展示出来比较整齐，还可以添加样式。

缺点：使用v-html，即使标签在浏览器中展示出来，但是里面的方法不可以使用，里面的方法失效。 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。