Angular使用HTTP PUT方法上传文件至S3服务器遇问题求助

核心错误原因 #

你两段代码都误用了FormData，而S3的预签名PUT URL要求直接将文件的二进制内容作为请求体，而非multipart/form-data格式的表单数据。这就导致S3无法解析你的请求内容：

• 第一段代码中，你把文件包装进FormData后设置了文件类型的Content-Type，请求体实际是FormData的结构，S3无法识别，因此返回"请求无可用数据"。
• 第二段代码设置了multipart/form-data头，上传后S3存储的是FormData的边界和字段信息，而非原始文件内容，所以下载后打开会显示乱码（如你截图所示）。

正确实现代码 #

直接将File对象作为PUT请求的体，不需要FormData：

uploadFileToS3(fileUrl: string, file: File): Observable<any> {
  // 设置正确的Content-Type，必须和生成预签名URL时指定的一致
  const headers = new HttpHeaders({
    'Content-Type': file.type
  });

  // 直接传入File对象作为请求体，根据S3响应设置responseType
  return this.http.put(fileUrl, file, {
    headers: headers,
    responseType: 'text' as 'json' // S3 PUT成功通常返回空体，用text避免解析错误
  });
}

关键注意事项 #

• 禁止使用FormData：S3 PUT上传预签名URL不支持multipart表单，必须直接上传文件原始二进制内容。
• Content-Type必须匹配：生成预签名URL时如果指定了Content-Type，上传时必须设置完全相同的值，否则会触发签名验证失败。
• 不要手动设置multipart/form-data：当你传入File对象作为请求体时，Angular会自动处理正确的请求头（包括Content-Length），手动设置该头会破坏请求格式。
• 响应类型适配：S3 PUT请求成功后通常返回空响应体，设置responseType: 'text'或'blob'可以避免Angular尝试解析JSON导致的错误。

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