使用S3预签名URL上传mp4视频后无法正常播放问题求助

DevOps 小满

2026-10-20

S3预签名URL上传MP4后无法播放解决方案

核心问题原因

Content-Type不匹配：生成预签名URL时指定了ContentType: "video/mp4"，但axios上传请求未主动携带对应的Content-Type请求头，S3校验不匹配会导致文件元数据错误，播放器无法识别文件格式。
文件内容被污染：你注释中说明file是通过form-data上传的，如果直接将FormData实例传递给axios.put，会将form-data的边界标识等额外内容一同写入S3存储的文件中，破坏了MP4文件的原始二进制结构，导致文件损坏无法播放。
语法错误：当前上传代码中const resp = await axios.put(url, file})存在多余的闭合花括号，会导致语法异常，上传内容不符合预期。

修复方案

预签名生成逻辑无需调整，你当前的代码是正确的：

// generating pre-signed url
const getSingedUrlforPut = async (bucketName, filename) => {
  const params = {
    Bucket: bucketName,
    Key: filename,
    Expires: 60 * 5,
    ContentType: "video/mp4",
  };
  try {
    const url = await s3.getSignedUrlPromise('putObject', params)
    return url
  } catch (err) {
    console.log("error generating s3 url ", err)
    throw err
  }
}

上传逻辑修正如下：

// 上传到S3
const url = await getSingedUrlforPut(buckets.toConvertCoursesVideos, fileId)
try {
  // 从FormData中取出原始的MP4文件对象，不要直接传递FormData实例
  // 如果你是前端从input取的文件，或者后端从formdata里get的文件二进制流，直接用即可
  const rawMp4File = file
  const resp = await axios.put(url, rawMp4File, {
    headers: {
      // 必须和预签名时指定的ContentType完全一致
      "Content-Type": "video/mp4"
    }
  })
} catch (err){
  console.log(err)
}