从后端获取图片,但是blob不起作用,请问可能有哪些原因?

作者站长头像
站长
· 阅读数 11

从后端获取图片转blob为什么失败?用unit8array转换显示大小为0 但是后端图片资源是获取成功的 可以正常预览 这可能是什么原因?前端是vue3 后端是springboot3.2.2 java版本是21后端返回代码如下:

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;
        }
    }

前端请求代码如下:

  const config = {
      headers: {
        Authorization: `Bearer ${this.$store.getters.getToken}`,
        responseType: "arraybuffer",
        accept: "image/jpeg",
      },
    };
    send
      .get(`/images/avatars/${this.$store.getters.getAvatar}`, config)
      .then((response) => {
        console.log(response.data);
        const uint8Array = new Uint8Array(response.data);
        console.log(uint8Array);
        const blob = new Blob([response.data], { type: "image/jpeg" });
        console.log(blob);
        const url = window.URL.createObjectURL(blob);
        this.avatarURL = url;
      });

前端网络返回资源如下:从后端获取图片,但是blob不起作用,请问可能有哪些原因?前端打印的信息:从后端获取图片,但是blob不起作用,请问可能有哪些原因?网页和地址栏预览图片不显示:从后端获取图片,但是blob不起作用,请问可能有哪些原因?从后端获取图片,但是blob不起作用,请问可能有哪些原因?

纠缠了ai几个小时,搜索了与我类似的情况,尝试不使用accept,或者把responseType的"blob"换成"arraybuffer",不使用responseType,以及把arraybuffer格式化成Uint8Array,把URL.createObjectURL换成window.URL.createObjectURL,但是都不起左右补充:看到ai的回答,打印了一下response.data的类型,是string,但是我后台返回的是byte[],请求头填的responseType是"blob",没一个对的上,这是否是正常的?另外还打印了一下arraybuffer和blob的类型,发现是对象,这就没办法参考了,c语言里面string是拿char[]模拟的,所以这返回的类型是string是否是正常的?

回复
1个回答
avatar
test
2024-06-23

误打误撞弄好了,没有通过axios发送请求,而是直接把请求地址给img src,之前也试过,但是那时应该是把:src写成src了,没有绑定,所以请求没有被devServer proxy代理,我还以为图片元素的地址不能被代理呢,虽然依旧不清楚为什么,明明我是按照搜索到的方法写的,blob就是不行,但是问题貌似解决了,如果有大佬可以给出原因,欢迎解答

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容