React中Axios PUT上传S3文件时文件含额外内容的解决办法

你现在的问题出在用FormData包装文件+手动设置multipart/form-data头，这会让Axios按照表单格式发送请求，把表单边界、字段名这些额外信息也塞进了文件内容里，而S3预签名URL的PUT接口需要的是原始文件的二进制内容，不是表单格式的数据。

解决方案 #

• 直接把File对象作为PUT请求的data参数，不要用FormData包装
• 删除手动设置的'Content-Type': 'multipart/form-data'请求头，让Axios自动根据文件类型生成正确的Content-Type，或者手动设置为文件本身的MIME类型

修改后的代码 #

useEffect(() => {
  if (uploadUrls.length > 0) {
    files.map(file => {
      // 用find替代filter[0]更简洁高效
      const fileUrl = uploadUrls.find(f => f.fileName === file.name).url;

      axios
        .put(fileUrl, file, {
          headers: {
            // 优先用文件自身的MIME类型，为空则用通用二进制类型
            'Content-Type': file.type || 'application/octet-stream',
          },
          onUploadProgress: progress => {
            setUploadProgress(prevState => ({
              ...prevState,
              [file.name]: Math.round(
                (progress.loaded / progress.total) * 100
              ),
            }));
          },
        })
        .then(data => {
          setUploadProgress(prevState => ({
            ...prevState,
            [file.name]: 100,
          }));
          updateFileUploadStatus(file.name, importId, 'done');
        })
        .catch(error => {
          updateFileUploadStatus(
            file.name,
            importId,
            'error',
            error.response.data.error
          );
          setUploadError(error.response.data.error);
        });

      return null;
    });
  }
}, [uploadUrls]);

补充说明 #

• 直接传递File对象时，Axios会正确处理二进制内容，不会额外添加表单相关的边界信息
• 设置正确的Content-Type能让S3准确识别文件格式，避免后续访问或处理时出现异常
• 保留了onUploadProgress回调，完全满足你做上传进度条的需求

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