如何用Angular以二进制数据向API传图片？上传后图片损坏求解决

我正尝试基于以下curl请求编写Angular请求：

curl -k -H "Authorization: Bearer $TOKEN" -H "Content-Type: application/octet-stream" --data-binary '@/home/linux-user/Desktop/folder/cool-folder/src/assets/img/default-image.png' -X POST https://$ENDPOINT:6060/v1/user/photo?id=3591&image=996ab426-eb57-4f79-94f4-cfea9aef2cd9 |  gunzip | jq

*说明：请求可成功发送，但上传至AWS的图片损坏。

我的代码实现 #

ImageService #

private postHeaders(token: string): HttpHeaders {
    return new HttpHeaders({
      'Content-Type': 'application/octet-stream',
      Authorization: `Bearer ${token}`
    });
  }

uploadImage(file: File, token: string): Observable<any> {
    const headers = this.postHeaders(token);

    const formData = new FormData();
    formData.append('file', file);

    return this.http.post(this.endpoint, formData, { headers, responseType: 'text' })
      .pipe(
        map((response: any) => JSON.parse(response)),
        catchError((error: any) => throwError(error))
      );
  }

Component（第一种实现） #

onFileChange(event: any) {
  const file = event.target.files[0];
  console.log(file)
  if (file) {
    this.imageService.uploadImage(file, this.token)
      .subscribe((response) => {
        console.log(response); // Handle the response data here using 'jq' or other methods.
      }, (error) => {
        console.error(error);
      });
  }
}

*console.log(file)输出正常，可查看文件基础信息

Component（二进制方式尝试） #

onFileChange(event: any) {
  const file = event.target.files[0];
  console.log(file)
  if (file) {
    this.readFileContent(file);
  }
}

readFileContent(file: File) {
  const reader = new FileReader();

  reader.onload = (e: any) => {
    const binaryData = e.target.result; // This contains the binary data of the file

    this.imageService.uploadImage(new Blob([binaryData]), this.token)
      .subscribe((response) => {
        console.log(response); // Handle the response data here
      }, (error) => {
        console.error(error);
      });
  };

  reader.readAsArrayBuffer(file);
}

HTML代码 #

<input type="file" (change)="onFileChange($event)">

问题原因分析 #

1. 第一种实现问题：用FormData包装文件，但原始curl请求是直接把文件二进制作为请求体发送，没有表单结构。手动设置Content-Type: application/octet-stream后，Angular会忽略FormData自动生成的边界头，导致后端无法正确解析文件内容，最终图片损坏。
2. 第二种实现问题：将ArrayBuffer包装成Blob传递，但服务端方法未适配这种格式，同时遗漏了URL中的id和image查询参数，后端处理逻辑可能因此异常。

正确实现方案 #

1. 修改ImageService #

直接传递文件二进制数据，添加查询参数并处理gzip响应：

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

// ...

private postHeaders(token: string): HttpHeaders {
  return new HttpHeaders({
    'Authorization': `Bearer ${token}`
    // 无需手动设置Content-Type，传递File/Blob时Angular会自动设为application/octet-stream
  });
}

uploadImage(file: File, token: string, userId: string, imageId: string): Observable<any> {
  const headers = this.postHeaders(token);
  
  // 拼接查询参数
  const params = new HttpParams()
    .set('id', userId)
    .set('image', imageId);

  return this.http.post(this.endpoint, file, { 
    headers, 
    params,
    responseType: 'blob' // 接收gzip压缩的响应
  }).pipe(
    // 解压gzip响应
    map(async (blob: Blob) => {
      const decompressedStream = blob.stream().pipeThrough(new DecompressionStream('gzip'));
      const decompressedBlob = await new Response(decompressedStream).blob();
      return JSON.parse(await decompressedBlob.text());
    }),
    catchError((error) => {
      console.error('上传失败:', error);
      throw error;
    })
  );
}

2. 修改Component调用 #

直接传递原始文件与查询参数：

onFileChange(event: any) {
  const file = event.target.files[0];
  if (file) {
    // 替换为实际的用户ID和图片ID
    const userId = '3591';
    const imageId = '996ab426-eb57-4f79-94f4-cfea9aef2cd9';
    
    this.imageService.uploadImage(file, this.token, userId, imageId)
      .subscribe((response) => {
        console.log('上传成功:', response);
      }, (error) => {
        console.error('上传出错:', error);
      });
  }
}

关键说明 #

• 不要用FormData包装文件，保持请求体与curl一致，直接传递二进制数据。
• 无需手动设置Content-Type，Angular会自动匹配正确的请求头。
• 必须传递id和image查询参数，否则后端可能无法正确处理上传。
• 响应是gzip压缩格式，需用responseType: 'blob'接收后解压，若需兼容旧浏览器可引入pako库替代原生DecompressionStream。

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