从后端获取图片并转换为Blob时失败的原因及解决方法：网络请求失败：原因：网络连接不稳定或服务器问题。解决方法：检查网络连接，确保服务器正常运行。使用网络调试工具（如ChromeDevTools）查看具体错误信息。数据格式不匹配：原因：后端返回的数据格式与前端预期的不一致，如返回的是JSON而不是二进制数据。解决方法：确保后端返回的是正确的二进制数据格式（如Content-Type:image/j

本文针对Spring Boot后端和Vue3前端图片传输过程中Blob转换失败的问题，提供详细的解决方案和分析。 后端使用FileInputStream读取图片并返回byte[]，前端使用axios接收数据并尝试转换为Blob，但生成的Blob大小为0。问题根源在于后端返回的数据类型与前端预期不符，以及`responseType: "arraybuffer"`设置可能无效，导致二进制数据被浏览器解析为字符串。文章分析了网络请求失败、数据格式不匹配、Blob转换错误、CORS政策限制、数据损坏以及前端代码错误等多种可能原因，并分别提供了相应的解决方法，最终建议后端直接返回InputStream或Resource对象，前端则需检查`response.data`类型并进行正确处理，从而确保图片传输和显示的正确性。

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"设置未能生效有关，导致后端返回的二进制数据被浏览器自动解析为字符串。

潜在原因:

1. responseType设置无效: 服务器端可能未正确设置响应头，导致responseType设置被忽略。 需要检查后端是否正确设置了Content-Type为image/jpeg等图片类型。

2. 数据类型不匹配: 后端返回byte[]，但前端期望ArrayBuffer。虽然Uint8Array可以处理byte[]，但如果response.data是字符串，则会造成数据类型不匹配，导致Blob创建失败。

3. 字符编码问题: 在某些情况下，字符编码问题可能导致二进制数据被错误地解释为字符串。

4. Spring Boot配置: Spring Boot的配置也可能影响响应数据的处理。

改进建议:

1. 后端调整: 后端应直接返回InputStream或使用更合适的响应方式，例如使用ResponseEntity返回Resource对象，避免手动处理byte[]。

2. 前端调整: 前端应检查response.data的类型，并根据实际类型进行处理。可以使用instanceof操作符或typeof操作符进行类型判断。 若response.data为字符串，则需要找到导致二进制数据被解释为字符串的原因。

3. 调试: 使用浏览器的开发者工具（Network标签）检查网络请求的响应头和响应体，确认数据类型是否正确。

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

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~