Angular报错：FileReader.readAsDataURL参数非Blob类型问题

这个错误的核心原因很明确：你的Angular HttpClient请求没有正确处理二进制响应，导致拿到的data数组里的元素根本不是Blob对象，而是被默认解析成了普通JavaScript对象，自然没法用readAsDataURL处理。

为什么会出现这个问题？ #

Angular的HttpClient.get()默认会把响应当成JSON来解析，哪怕你声明了泛型<Blob[]>也没用——泛型只是TypeScript的类型提示，不会改变实际的解析行为。当后端返回二进制图片数据时，JSON解析会把这些二进制数据转成一堆无意义的普通对象，这就是你看到报错的原因。

解决方案分两种情况处理： #

情况1：后端返回的是包含多个字节数组的JSON数组

如果你的后端是把每张图片的字节数组打包成JSON数组返回（比如[[byte1, byte2,...], [byte1, byte2,...]]），可以这样修改代码：

1. 修改服务中的请求代码

public getImages(names: string[]) { 
  let params = new HttpParams(); 
  params = params.append("names", names.join(",")); 
  // 先按JSON解析，获取字节数组列表
  return this.httpClient.get<number[][]>(API_URL + "diseases/images", { params: params }); 
}

2. 修改组件中的订阅逻辑

getImages(names: string[]) { 
  this.encyclopedyService.getImages(names).subscribe((data: number[][]) => { 
    data.forEach((byteArray) => { 
      // 把字节数组转成Uint8Array，再包装成Blob（注意要匹配图片的MIME类型，比如image/png、image/jpeg）
      const imageBlob = new Blob([new Uint8Array(byteArray)], { type: 'image/jpeg' });
      
      const reader = new FileReader(); 
      reader.readAsDataURL(imageBlob); 
      reader.onload = (e) => { 
        this.imageBytes = reader.result; 
        const image = this.sanitizer.bypassSecurityTrustUrl(this.imageBytes); 
        console.log(image); 
        // 这里可以把image存入组件的数组，用于页面渲染
      }; 
    }); 
  }); 
}

情况2：后端返回的是单张或多张图片的二进制Blob（比如multipart响应）

如果后端直接返回二进制图片数据（而非JSON），你需要明确告诉HttpClient不要解析成JSON，而是按Blob处理：

1. 修改服务中的请求代码

public getImages(names: string[]) { 
  let params = new HttpParams(); 
  params = params.append("names", names.join(",")); 
  // 强制设置响应类型为blob，注意要加`as 'json'`避免TypeScript类型报错
  return this.httpClient.get(API_URL + "diseases/images", { 
    params: params, 
    responseType: 'blob' as 'json'
  }); 
}

2. 组件中的订阅逻辑调整
如果后端返回的是单张图片的Blob，直接处理即可；如果是多张图片的multipart响应，你需要额外解析multipart数据（这个相对复杂，更推荐后端改成返回JSON数组或者单个图片的独立接口）。

额外提示 #

• 一定要确认后端返回的图片MIME类型，比如image/jpeg、image/png，否则Blob可能无法正确转成图片。
• 如果需要渲染多张图片，建议在组件里维护一个images: SafeUrl[]数组，把每个处理好的imagepush进去，再用*ngFor在页面上循环渲染。

内容的提问来源于stack exchange，提问作者bem9827