Angular结合Spring Boot后端：POST响应图片无法显示求助

以下是几个常见的错误点和对应的解决办法：

• 响应类型未正确设置
  Angular默认会将HTTP响应解析为JSON格式，但图片属于二进制数据，必须显式指定响应类型为blob或arraybuffer。如果不设置，Angular会尝试把二进制数据转成JSON，导致数据损坏无法显示。
  示例代码：

  uploadImage(file: File) {
    const formData = new FormData();
    formData.append('file', file);
  
    this.http.post('/api/upload', formData, { responseType: 'blob' })
      .subscribe(blob => {
        // 将Blob转换为浏览器可识别的URL
        this.imageUrl = URL.createObjectURL(blob);
      });
  }
  

• 后端响应头配置错误
  检查Spring Boot后端返回的Content-Type是否匹配图片实际类型（比如image/jpeg、image/png），而非默认的application/json。错误的Content-Type会导致浏览器无法识别返回内容为图片。
  Spring Boot示例代码：

  @PostMapping("/upload")
  public ResponseEntity<byte[]> uploadImage(@RequestParam("file") MultipartFile file) throws IOException {
      HttpHeaders headers = new HttpHeaders();
      // 根据上传文件的实际类型设置Content-Type
      headers.setContentType(MediaType.parseMediaType(file.getContentType()));
      return new ResponseEntity<>(file.getBytes(), headers, HttpStatus.OK);
  }
  

• 前端FormData构造错误
  确保前端FormData的键名和后端@RequestParam的参数名完全一致。比如后端用@RequestParam("file")接收，前端必须用formData.append('file', file)，否则后端无法正确接收文件，返回的内容自然无效。

• 跨域配置遗漏关键项
  虽然Postman不受跨域限制，但浏览器会拦截不符合CORS规则的响应。检查Spring Boot的CORS配置，确保允许暴露必要的响应头（比如Content-Type），同时允许Angular所在域名的请求。
  Spring Boot CORS配置示例：

  @Configuration
  public class CorsConfig implements WebMvcConfigurer {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
          registry.addMapping("/**")
                  .allowedOrigins("http://localhost:4200") // 替换为你的Angular地址
                  .allowedMethods("POST")
                  .allowedHeaders("*")
                  .exposedHeaders("Content-Type");
      }
  }
  

• 图片URL处理不当
  拿到Blob对象后，必须通过URL.createObjectURL(blob)生成临时URL赋值给img的src属性，不能直接将Blob对象绑定。另外，组件销毁时记得调用URL.revokeObjectURL(this.imageUrl)释放资源，避免内存泄漏。

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