为什么从后端获取图片并转换为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)，而不是预期的ArrayBufer或byte[]。这很可能与responsetype相匹配: "arraybuffer浏览器自动将导致后端返回的二进制数据解析为字符串，这与设置无效有关。

潜在原因:

1. responsetype设置无效： 服务器端可能没有正确设置响应头，导致responseType设置被忽略。 需要检查后端是否正确设置Content-Typeimage/jpeg等图片类型。

2. 数据类型不匹配： 后端返回byte[]，但前端预计araybufer。虽然uint8aray可以处理byte[]，但如果responser.data是字符串，会导致数据类型不匹配，导致blob创建失败。

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

4. Spring Boot配置： Spring Boot的配置也会影响应数据的处理。

改进建议:

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

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

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

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

这就是为什么从后端获取图片并将其转换为Blob时会失败？详情请关注图灵教育的其他相关文章！