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

最新推荐文章于 2024-06-01 13:30:13 发布

简单的chen

最新推荐文章于 2024-06-01 13:30:13 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端知识文章标签： vue base64

本文链接：https://blog.youkuaiyun.com/dawnchen1/article/details/113663355

前端知识专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何使用Vue.js创建一个对话框动态显示从后端获取的二进制图片，并提供了一种下载图片的方法，包括设置响应类型和转码步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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