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赋值给<img alt="为什么从后端获取图片并转换为Blob时会失败？" >标签的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></resource>返回Resource对象，避免手动处理byte[]。 -
前端调整: 前端应检查
response.data的类型，并根据实际类型进行处理。可以使用instanceof操作符或typeof操作符进行类型判断。 若response.data为字符串，则需要找到导致二进制数据被解释为字符串的原因。 -
调试: 使用浏览器的开发者工具（Network标签）检查网络请求的响应头和响应体，确认数据类型是否正确。
通过以上分析和建议，开发者可以更有效地排查问题，并最终实现图片的正确传输和显示。 直接使用图片URL虽然解决了问题，但理解根本原因才能避免类似问题再次发生。
