React Native调用S3上传接口失败，Postman正常求排查

正确的HTTP请求方式 #

• 请求方法：POST
• 请求路径：/upload
• 请求体格式：multipart/form-data，包含一个名为file的文件字段
• 注意：不要手动设置Content-Type为multipart/form-data，React Native的fetch或axios会自动生成带边界标识的正确请求头，手动设置会导致后端multer无法解析。

前端代码问题与修复 #

核心问题 #

React Native的FormData对文件对象的要求和浏览器不同，不能直接传入自定义的fieldname/originalname等字段，必须使用标准结构：包含uri、type（对应mimetype）、name（对应originalname）三个属性。

修复后的前端代码 #

const pickSomething = async () => {
  try {
    let result = await DocumentPicker.getDocumentAsync({});
    console.log("result", result);
    
    const asset = result.assets[0];
    
    // 构造符合React Native FormData要求的文件对象
    const file = {
      uri: asset.uri,
      type: asset.mimeType,
      name: asset.name
    };
    
    const formData = new FormData();
    // append的第一个参数对应后端multer.single('file')指定的字段名'file'
    formData.append('file', file);
    
    // 发送请求（以fetch为例）
    const response = await fetch('你的后端接口地址/upload', {
      method: 'POST',
      body: formData
      // 无需手动设置Content-Type，fetch会自动处理
    });
    
    const responseText = await response.text();
    console.log("上传结果", responseText);
  } catch(e) {
    console.log("上传错误", e);
  }
};

额外排查点 #

• URI格式检查：确保asset.uri是本地文件路径（如file:///storage/emulated/0/...），如果是base64格式，需先转换为Blob或文件路径，multer默认不处理base64格式文件。
• 后端日志排查：查看后端console.log("file", file)的输出，确认是否接收到文件及属性是否正确。若req.file为undefined，说明前端FormData格式有误。
• S3权限配置：确保后端使用的IAM角色/Access Key拥有S3存储桶的PutObject权限，且存储桶ACL设置正确（public-read需对应权限）。
• 跨域问题：若前后端不在同一域名下，需后端配置CORS，允许POST方法和multipart/form-data类型请求。

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