Vue拿到二进制流图片如何转为正常图片并显示

目录

• 二进制流图片转为正常图片并显示
• 解析blob 二进制流图片的展示

二进制流图片转为正常图片并显示

第一步

axios({
        method: 'get',
        url,
        responseType: 'arraybuffer' // 最为关键
      })
        .then(function (response) {
          that.src = 'data:image/jpeg;base64,' + that.arrayBufferToBase64(response.data)
        })

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

解析blob 二进制流图片的展示

// /api/plan.js文件请求方法
export function getFlowPhoto(data) {
    return request({
        url: '/xxx/xxxx/getFlowPhoto',
        method: 'post',
        responseType: 'blob',
        data
    })
}

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