【blob图片预览】后端返回blob格式图片，前端进行展示

最新推荐文章于 2025-05-28 20:35:24 发布

兴趣使然的码仔

最新推荐文章于 2025-05-28 20:35:24 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端基础文章标签：前端数学建模

本文链接：https://blog.csdn.net/qq_41790461/article/details/131227418

前端基础专栏收录该内容

3 篇文章

订阅专栏

在axios请求中设置responseType为blob来获取文件，然后通过FileReader或URL.createObjectURL方法生成预览链接。如果请求失败，显示错误信息。

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

请求时注意添加responseType

this.$axios.get(`/attachment/files/view/${id}`, {
          responseType: 'blob'
        }).then(res => {
          this.previewUrl = ''	// img的src绑定的变量
          // 处理方式1——使用FileReader处理
            const reader = new FileReader()
            reader.onload = (e) => {
              this.previewUrl = e.target.result
            }
            reader.readAsDataURL(res.data)
           // 处理方式2——直接使用URL.createObjectURL
           // res.data必须是Blob类型数据
          this.previewUrl = URL.createObjectURL(res.data)
        }).catch(() => {
          this.getImageFailedInfo = '获取预览文件失败'
        })