为什么从后端获取图片并转换为Blob时会失败？（时会.转换为.后端.获取.失败...）

为什么从后端获取图片并转换为blob时会失败？

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赋值给为什么从后端获取图片并转换为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对象，避免手动处理byte[]。
前端调整: 前端应检查response.data的类型，并根据实际类型进行处理。可以使用instanceof操作符或typeof操作符进行类型判断。若response.data为字符串，则需要找到导致二进制数据被解释为字符串的原因。
调试: 使用浏览器的开发者工具（Network标签）检查网络请求的响应头和响应体，确认数据类型是否正确。

通过以上分析和建议，开发者可以更有效地排查问题，并最终实现图片的正确传输和显示。直接使用图片URL虽然解决了问题，但理解根本原因才能避免类似问题再次发生。

以上就是为什么从后端获取图片并转换为Blob时会失败？的详细内容，更多请关注知识资源分享宝库其它相关文章！