React Native传图片到Node.js后端转存S3的格式及报错问题

你的核心问题在于服务器无法访问React Native设备本地的文件路径，同时没有正确处理FormData的文件上传流程，导致S3上传报错。以下是分步解决方法：

错误原因拆解 #

1. 「no path found」错误：你在后端提取的是手机本地的文件URI（file:///var/mobile/...），但服务器的文件系统里根本不存在这个路径，fs.createReadStream自然无法找到文件。
2. 「Unsupported body payload object」错误：AWS S3的Body参数只接受Buffer、Stream、Blob或字符串，你直接传入FormData里的带uri对象，不符合要求。
3. 图片无法打开：硬编码ContentType为image/png，但实际上传的是JPEG格式，导致S3存储的文件类型不匹配。

正确实现流程 #

1. 前端（React Native/Expo）修正：传递文件二进制数据 #

前端不能只传设备本地URI，必须把文件的二进制数据通过FormData传给后端。以Expo ImagePicker为例：

import * as ImagePicker from 'expo-image-picker';
import { Platform } from 'react-native';

const uploadImage = async () => {
  const pickerResult = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    quality: 0.8,
  });

  if (pickerResult.canceled) return;

  const asset = pickerResult.assets[0];
  const formData = new FormData();

  // 适配iOS/Android的URI格式
  const fileUri = Platform.OS === 'android' ? asset.uri : asset.uri.replace('file://', '');
  const fileName = asset.uri.split('/').pop();
  const fileType = asset.type || `image/${asset.uri.split('.').pop()}`;

  // 将文件附加到FormData
  formData.append('file', {
    uri: fileUri,
    name: fileName,
    type: fileType,
  });

  try {
    const res = await fetch('http://你的后端地址/upload', {
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      body: formData,
    });
    const data = await res.json();
    console.log('上传完成，文件地址：', data.location);
  } catch (err) {
    console.error('上传失败：', err);
  }
};

2. 后端（Node.js/Express）修正：解析FormData并上传S3 #

使用multer中间件解析multipart/form-data，直接获取文件的Buffer，再传给S3：

第一步：安装依赖

npm install multer @aws-sdk/client-s3

第二步：后端代码实现

const express = require('express');
const multer = require('multer');
const { S3Client, PutObjectCommand } = require('@aws-sdk/client-s3');

const app = express();
const port = 3000;

// 初始化S3客户端
const s3Client = new S3Client({
  region: '你的S3区域', // 例如：us-east-1
  credentials: {
    accessKeyId: '你的AWS Access Key',
    secretAccessKey: '你的AWS Secret Key',
  },
});

// 配置multer为内存存储，直接获取文件Buffer
const uploadMiddleware = multer({ storage: multer.memoryStorage() });

// 上传接口
app.post('/upload', uploadMiddleware.single('file'), async (req, res) => {
  try {
    if (!req.file) {
      return res.status(400).json({ error: '未上传文件' });
    }

    // 构造S3上传参数
    const s3Params = {
      Bucket: 'myarrowbucket',
      // 用时间戳+原文件名后缀生成唯一Key，避免重名
      Key: `uploaded-${Date.now()}.${req.file.mimetype.split('/')[1]}`,
      Body: req.file.buffer, // 直接使用multer解析后的文件Buffer
      ContentType: req.file.mimetype, // 使用文件实际的MIME类型
      ACL: 'public-read',
    };

    // 执行上传
    await s3Client.send(new PutObjectCommand(s3Params));

    // 构造文件访问URL
    const fileUrl = `https://${s3Params.Bucket}.s3.${s3Client.config.region}.amazonaws.com/${s3Params.Key}`;
    res.json({ location: fileUrl });
  } catch (err) {
    console.error('S3上传错误：', err);
    res.status(500).json({ error: '上传失败', details: err.message });
  }
});

app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

关键注意事项 #

• 不要硬编码ContentType，使用req.file.mimetype获取文件实际类型，避免格式不匹配。
• 生成S3的Key时加入时间戳，防止文件重名覆盖。
• 确保AWS IAM用户拥有s3:PutObject权限，并且Bucket的ACL配置允许公共读取（如果需要公开访问）。

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