使用rembg时API上传图片遇multipart边界缺失问题求助

我在应用中使用rembg库，需求是通过HTTP POST将图片上传至API端点。当前运行代码如下：

调用代码：

this.photoService.readFile(this.publicImageUrl.uri).then(res => {
  let data = res;
  this.oryginalImg = data.data;
  this.ApiService.removeBG(this.publicImageUrl.uri).then(res => console.log(res))
})

readFile()方法：

async readFile(path: string) {
  const contents = await Filesystem.readFile({
    path: path
  });
  return contents;
}

removeBG()方法：

async removeBG(file: any) {
  let headers = { 'content-type': 'multipart/form-data' };
  let formData = new FormData();
  formData.append('file', file);

  let body = {
    'body': formData
   }

   let promise = new Promise<void>((resolve, reject) => {
      this.http.post(environment.photoServiceURL, body, { headers }).toPromise().then(res => { console.log(res); resolve(); }).catch(err => console.log(err));
  });
}

请求后得到响应：Missing boundary in multipart，我猜测是文件附加环节出现问题，请问如何正确从文件系统获取文件并通过API完成上传？

出现Missing boundary in multipart错误的核心原因有两个：

1. 手动设置multipart/form-data请求头，覆盖了客户端自动生成的带分隔符（boundary）的请求头
2. 上传时传递的是文件路径而非文件内容，且请求体格式错误

按以下步骤修改代码即可解决：

1. 调整调用逻辑，传递文件内容而非路径 #

readFile方法返回的是文件的二进制/Base64内容，需要把这个内容传给removeBG，而不是文件路径：

this.photoService.readFile(this.publicImageUrl.uri).then(res => {
  let data = res;
  this.oryginalImg = data.data;
  // 传入文件内容和自定义文件名
  this.ApiService.removeBG(data.data, 'uploaded-image.jpg').then(res => console.log(res))
})

2. 重构removeBG方法的请求逻辑 #

async removeBG(fileContent: string | ArrayBuffer, fileName: string) {
  // 将读取到的文件内容转为Blob对象
  let blob: Blob;
  if (typeof fileContent === 'string') {
    // 处理Base64格式的内容
    const base64Str = fileContent.split(',')[1];
    const byteString = atob(base64Str);
    const arrayBuffer = new ArrayBuffer(byteString.length);
    const uint8Array = new Uint8Array(arrayBuffer);
    for (let i = 0; i < byteString.length; i++) {
      uint8Array[i] = byteString.charCodeAt(i);
    }
    blob = new Blob([uint8Array], { type: 'image/jpeg' });
  } else {
    // 处理二进制ArrayBuffer格式的内容
    blob = new Blob([fileContent], { type: 'image/jpeg' });
  }

  // 构建FormData
  const formData = new FormData();
  // 第三个参数必须传文件名，确保后端能正确解析
  formData.append('file', blob, fileName);

  try {
    // 不要手动设置multipart/form-data头，HttpClient会自动处理
    const res = await this.http.post(environment.photoServiceURL, formData).toPromise();
    console.log(res);
    return res;
  } catch (err) {
    console.error(err);
    throw err;
  }
}

3. 关键注意事项 #

• 禁止手动设置multipart/form-data请求头：Angular的HttpClient会自动根据FormData生成带boundary的完整请求头，手动设置会破坏这一逻辑，导致boundary缺失
• 必须传递Blob/File对象：FormData的append方法只识别Blob/File类型的文件内容，传路径字符串后端无法解析为文件
• 必填文件名：FormData.append的第三个参数（文件名）是后端识别文件类型的关键，不可省略

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