从后端获取图片,但是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;
});
前端网络返回资源如下:前端打印的信息:
网页和地址栏预览图片不显示:
纠缠了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是否是正常的?
回复
1个回答

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

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容