我要评论
spring boot后端与vue3前端图片传输及blob转换疑难解答
本文分析一个实际案例：开发者使用spring boot 3.2.2 (java 21)后端和vue3前端，在图片传输过程中遇到blob转换失败的问题。后端能正常返回图片，但前端接收后转换为blob后大小为0，导致图片无法显示。
问题描述:
后端使用fileinputstream读取图片并返回byte[]：
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;
}
}前端使用axios发送请求，尝试将响应转换为blob：
const config = {
headers: {
authorization: `bearer ${this.$store.getters.gettoken}`,
responsetype: "arraybuffer",
accept: "image/jpeg",
},
};
axios.get(`/images/avatars/${this.$store.getters.getavatar}`, config)
.then((response) => {
const uint8array = new uint8array(response.data);
const blob = new blob([response.data], { type: "image/jpeg" });
const url = window.url.createobjecturl(blob);
this.avatarurl = url;
});尽管数据看似已接收，但生成的blob大小为0。
解决方案与分析:
开发者发现直接将图片url赋值给标签的src属性可以正常显示图片，绕过了blob转换步骤。这暗示了问题可能出在数据类型转换或请求配置上。
进一步排查发现，response.data的类型是字符串(string)，而非预期的arraybuffer或byte[]。这很可能与responsetype: "arraybuffer"设置未能生效有关，导致后端返回的二进制数据被浏览器自动解析为字符串。
潜在原因:
-
responsetype设置无效: 服务器端可能未正确设置响应头，导致responsetype设置被忽略。 需要检查后端是否正确设置了content-type为image/jpeg等图片类型。
-
数据类型不匹配: 后端返回byte[]，但前端期望arraybuffer。虽然uint8array可以处理byte[]，但如果response.data是字符串，则会造成数据类型不匹配，导致blob创建失败。
-
字符编码问题: 在某些情况下，字符编码问题可能导致二进制数据被错误地解释为字符串。
-
spring boot配置: spring boot的配置也可能影响响应数据的处理。
改进建议:
-
后端调整: 后端应直接返回inputstream或使用更合适的响应方式，例如使用responseentity
返回resource对象，避免手动处理byte[]。 -
前端调整: 前端应检查response.data的类型，并根据实际类型进行处理。可以使用instanceof操作符或typeof操作符进行类型判断。 若response.data为字符串，则需要找到导致二进制数据被解释为字符串的原因。
-
调试: 使用浏览器的开发者工具（network标签）检查网络请求的响应头和响应体，确认数据类型是否正确。
通过以上分析和建议，开发者可以更有效地排查问题，并最终实现图片的正确传输和显示。 直接使用图片url虽然解决了问题，但理解根本原因才能避免类似问题再次发生。
以上就是为什么从后端获取图片并转换为blob时会失败？的详细内容，更多请关注代码网其它相关文章！
发表评论