接收后端传来的字节数组并显示成图片

czyn917

于 2024-04-28 17:06:11 发布

阅读量418

点赞数 5

分类专栏：学习经历文章标签： javascript 前端

本文链接：https://blog.csdn.net/czy0917/article/details/138284041

版权

学习经历专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近开发的时候被分到了这个需求，要求我上传文件后接收其传回来的图片并展示，上传文件不难，轻松解决，但是以前没处理过图像的请求，所以遇到了这个问题，后端是怎么传过来的？我该怎么接收呢？

首先，我问了后端同学，他说会传个二进制数据流过来。我输出显示后发现是一坨乱码，看不出是什么：

好了，新问题，这个二进制数据流怎么变成图片？为此我上网搜索了一下相关资料，找了一段处理二进制流的代码，原理是将二进制流转成BLOB对象，然后使用window.URL.createObjectURL()方法生成了一个临时的图片URL(imgUrl)，用于在前端显示图片：

axios.post(uploadUrl, formData, {
   headers: {
      'Content-Type': 'multipart/form-data'
   },
}).then(response => {
      const imgUrl = window.URL.createObjectURL(new Blob([response.data]));
      this.imgSrc = imgUrl;
}).catch(error => {
      console.error('Error:', error);
});

大致步骤如上，会得出一个blob地址：

经过测试后发现不行，显示为无效地址……

为啥呢？搞不懂，但是看了一下网络请求发现浏览器能预览得到我要的图片！

我就更懵了，于是跑去问大佬，大佬说我没加response的格式为blob格式导致的错误，但是我转念一想，我在代码中不是后面对响应结果进行转blob了吗？于是又问了大佬，大佬说，如果你在请求的时候不加responseType: "blob"，那么在网络请求中，浏览器默认将响应数据解析为文本数据（String），浏览器会将响应数据解析为文本，即使你使用new Blob([response.data])创建Blob对象，仍然是基于文本数据创建的Blob对象，而不是原始的二进制数据。

原来如此，哪怕我转成了blob对象，也是浏览器默认加工后的一串字符串转化为的blob，接收到的那一刻就是一个没有意义的字符串，也无法恢复成原本的二进制数据流了，自然无法转化为浏览器临时的图片资源。

最后我加上了响应类型，再试一次：

axios.post(uploadUrl, formData, {
    headers: {
        'Content-Type': 'multipart/form-data'
    },
    responseType: "blob",
}).then(response => {
    //处理response
    const url = window.URL || window.webkitURL;
    const imgUrl = url.createObjectURL(response.data);
    this.imgSrc = imgUrl;
}).catch(error => {
    console.error('Error:', error);
});