关于前端显示 blob 图像的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1209 天前的主题，其中的信息可能已经有所发展或是发生改变。

我目前是通过后端返回图片字节流，前端接收的是字符串，当我把字符串转 blob 并转换为图像展示的时候出错了，一直显示不出来，blob url 例如：blob:http://127.0.0.1:5500/27903d9a-863c-4170-b4c6-8bd1f335b136，字节流例如：'�PNG\r\n\x1A\n\x00\x00\x00\rIHDR\x00\x00\x07�\x00\x00\x04�\b\x03\x00\x00\x00�V$�\x00\x00\x03\x00PLTE\r'，blob 打开的链接也都是乱码，请问我哪一步出错了？

Blob

字符

图像

节流

10 条回复 • 2021-10-19 15:39:29 +08:00

AerithLoveMe

2021-09-09 22:41:57 +08:00

https://z3.ax1x.com/2021/09/09/hONK81.png

randyo

2021-09-10 01:00:47 +08:00 via Android

blob 的 type 是不是应该用图片的

wunonglin

2021-09-10 01:22:54 +08:00

图片你用 text/plain ？？？

seki

2021-09-10 01:29:45 +08:00

object url 是用来下载的
img src 要用 bas64 的 data: 协议

autoxbc

2021-09-10 01:44:57 +08:00

如果不给 axios 设置 responseType，那么 res.data 的类型是 string，这里是文本化的字节流，也就是乱码，后续怎么处理都不能用

给 axios.post 传递第三个参数 { responseType: 'blob' }，这样返回值是 Blob 对象，不需要再手动构造
axios.post('http://localhost:9080/compress/png', formData , { responseType: 'blob' } )
.then( res => {
const blob = res.data ;
const url = URL.createObjectURL(blob);
......
} );

以及，如果因为某种操作，返回了符合 new Blob 构造的输入值，type 参数也应该是 image/png，而不是 text/plain

AerithLoveMe

2021-09-10 08:03:42 +08:00

@autoxbc 谢谢。成功了！

Quarter

2021-09-10 12:20:49 +08:00 via iPhone

mime type 不能随便设置

Gaays

2021-10-18 17:53:27 +08:00

@autoxbc 你好我这里也遇到这个问题了，我按照你的方法设置但是不起效果，报错 TypeError: Failed to execute 'createObjectURL' on 'URL'，按照网上说的都试过，但是还是无法解决，请问方便回答一下怎么处理吗，谢谢

autoxbc

2021-10-18 18:28:07 +08:00

@Gaays #8 错误信息说 URL 上没有 createObjectURL 方法，可能是
1. 浏览器过旧，没有 URL 对象，是 IE11?
2. 拼写错误，检查一下代码
3. 某些上游代码修改了 URL 对象

可以看看直接在控制台输入 URL.createObjectURL 并回车，正常情况应该返回一个函数

Gaays

2021-10-19 15:39:29 +08:00

@autoxbc 不好意思，问问题没有描述清除，感谢第 3 项的提醒，我今天把可能造成影响的代码全过了一边，发现是 mockjs 的锅😂