从后端获取图片,但是blob不起作用,请问可能有哪些原因?-灵析社区

木子弓长

从后端获取图片转blob为什么失败?用unit8array转换显示大小为0 但是后端图片资源是获取成功的 可以正常预览 这可能是什么原因?前端是vue3 后端是springboot3.2.2 java版本是21 后端返回代码如下: public byte[] getImages(String URL) throws IOException { try (FileInputStream inputStream = new FileInputStream(new File(FilePath + URL))) { byte[] bytes = new byte[inputStream.available()]; inputStream.read(bytes, 0, inputStream.available()); return bytes; } } 前端请求代码如下: const config = { headers: { Authorization: `Bearer ${this.$store.getters.getToken}`, responseType: "arraybuffer", accept: "image/jpeg", }, }; send .get(`/images/avatars/${this.$store.getters.getAvatar}`, config) .then((response) => { console.log(response.data); const uint8Array = new Uint8Array(response.data); console.log(uint8Array); const blob = new Blob([response.data], { type: "image/jpeg" }); console.log(blob); const url = window.URL.createObjectURL(blob); this.avatarURL = url; }); 前端网络返回资源如下:![](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/a7da57c9709cb0e6562e9bbda1e04924.png) 前端打印的信息:![](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/4dfba01aa6451635f17fb19f48583b3c.png) 网页和地址栏预览图片不显示:![](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/c586b13d77d84db829cdda023a160cfb.png)![](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/3f8131166ab928c67c98eb5962276b9f.png) 纠缠了ai几个小时,搜索了与我类似的情况,尝试不使用accept,或者把responseType的"blob"换成"arraybuffer",不使用responseType,以及把arraybuffer格式化成Uint8Array,把URL.createObjectURL换成window.URL.createObjectURL,但是都不起左右 补充:看到ai的回答,打印了一下response.data的类型,是string,但是我后台返回的是byte[],请求头填的responseType是"blob",没一个对的上,这是否是正常的?另外还打印了一下arraybuffer和blob的类型,发现是对象,这就没办法参考了,c语言里面string是拿char[]模拟的,所以这返回的类型是string是否是正常的?

阅读量:119

点赞量:0

问AI
误打误撞弄好了,没有通过axios发送请求,而是直接把请求地址给img src,之前也试过,但是那时应该是把:src写成src了,没有绑定,所以请求没有被devServer proxy代理,我还以为图片元素的地址不能被代理呢,虽然依旧不清楚为什么,明明我是按照搜索到的方法写的,blob就是不行,但是问题貌似解决了,如果有大佬可以给出原因,欢迎解答