使用预签名URL上传文件至S3时遇multipart/form-data格式错误

核心问题分析 #

• 手动指定Content-Type: multipart/form-data导致浏览器无法自动添加boundary分隔符，S3无法正确解析请求体
• 错误地向FormData中添加了Content-Type字段，这不是S3 POST上传所需的参数

修复步骤 #

1. 移除手动设置的Content-Type请求头
   当使用fetch发送FormData时，浏览器会自动生成包含正确boundary的Content-Type头（比如multipart/form-data; boundary=----WebKitFormBoundaryxxx），手动设置会覆盖这个正确的头，导致S3无法识别分隔符。

2. 删除FormData中的Content-Type字段
   S3的POST上传不需要在FormData里添加这个字段，文件的Content-Type应该由预签名接口返回的参数处理，或者由文件对象自身的type属性自动携带。

3. 确保文件内容被正确传入
   检查file对象是否有效，确认是从文件输入控件正常获取的文件实例。

修改后的代码 #

const handleImageUpload = (file) => {
  ApiUtils.getPresignedS3Url({ fileName: file.name }).then((uploadParams) => {
    if (uploadParams) {
      uploadToS3(uploadParams, file)
    }
  })
}

const uploadToS3 = (uploadParams, file) => {
  const { url, s3_upload_params: fields } = uploadParams
  const formData = new FormData()
  
  Object.entries(fields).forEach(([k, v]) => {
    formData.append(k, v)
  })
  formData.append("file", file)
  
  fetch(url, {
    method: "POST",
    body: formData,
  })
    .then((awsResponse) => {
      if (awsResponse.ok) {
        console.log("success")
      } else {
        console.log(awsResponse)
      }
    })
    .catch((error) => {
      console.log("blew up")
      console.log(error)
    })
}

额外排查点 #

• 检查预签名接口返回的s3_upload_params中是否包含Content-Type参数，确保它和文件的实际类型匹配
• 确认请求payload中的文件部分是否有内容，若仍为空，检查file对象是否正确获取（比如从<input type="file">的files数组中取到的第一个元素）

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