V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
AerithLoveMe
V2EX  ›  问与答

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

  •  
  •   AerithLoveMe · 2021-09-09 22:40:12 +08:00 · 1310 次点击
    这是一个创建于 1152 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我目前是通过后端返回图片字节流,前端接收的是字符串,当我把字符串转 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 打开的链接也都是乱码,请问我哪一步出错了?
    10 条回复    2021-10-19 15:39:29 +08:00
    AerithLoveMe
        1
    AerithLoveMe  
    OP
       2021-09-09 22:41:57 +08:00
    randyo
        2
    randyo  
       2021-09-10 01:00:47 +08:00 via Android
    blob 的 type 是不是应该用图片的
    wunonglin
        3
    wunonglin  
       2021-09-10 01:22:54 +08:00
    图片你用 text/plain ???
    seki
        4
    seki  
       2021-09-10 01:29:45 +08:00
    object url 是用来下载的
    img src 要用 bas64 的 data: 协议
    autoxbc
        5
    autoxbc  
       2021-09-10 01:44:57 +08:00   ❤️ 1
    如果不给 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
        6
    AerithLoveMe  
    OP
       2021-09-10 08:03:42 +08:00
    @autoxbc 谢谢。成功了!
    Quarter
        7
    Quarter  
       2021-09-10 12:20:49 +08:00 via iPhone
    mime type 不能随便设置
    Gaays
        8
    Gaays  
       2021-10-18 17:53:27 +08:00
    @autoxbc 你好我这里也遇到这个问题了,我按照你的方法设置但是不起效果,报错 TypeError: Failed to execute 'createObjectURL' on 'URL',按照网上说的都试过,但是还是无法解决,请问方便回答一下怎么处理吗,谢谢
    autoxbc
        9
    autoxbc  
       2021-10-18 18:28:07 +08:00
    @Gaays #8 错误信息说 URL 上没有 createObjectURL 方法,可能是
    1. 浏览器过旧,没有 URL 对象,是 IE11?
    2. 拼写错误,检查一下代码
    3. 某些上游代码修改了 URL 对象

    可以看看直接在控制台输入 URL.createObjectURL 并回车,正常情况应该返回一个函数
    Gaays
        10
    Gaays  
       2021-10-19 15:39:29 +08:00
    @autoxbc 不好意思,问问题没有描述清除,感谢第 3 项的提醒,我今天把可能造成影响的代码全过了一边,发现是 mockjs 的锅😂
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3678 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 10:34 · PVG 18:34 · LAX 02:34 · JFK 05:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.