React Native向Node.js传本地视频至S3 Bucket失败求助

核心问题分析 #

你代码里require("../../assets/videos/mr.mp4")返回数字25，是因为React Native中静态资源require返回的是资源ID，不是实际文件路径，直接把这个ID当URI传给FormData肯定会失败。另外手动设置Content-Type: multipart/form-data会丢失表单边界标识，导致服务器无法解析数据，这也是常见坑点。

修复步骤及代码示例 #

1. 正确获取视频文件URI #

用Image.resolveAssetSource把资源ID转换为真实的文件URI，同时处理iOS和Android的路径差异：

2. 修正FormData与Axios配置 #

不要手动设置multipart/form-data头，Axios会自动生成带边界标识的正确头，避免服务器解析失败。

修改后的完整代码：

import axios from 'axios';
import { Image, Platform } from 'react-native';

async function sendReq() {
  try {
    // 转换静态资源ID为真实URI
    const videoAsset = require("../../assets/videos/mr.mp4");
    const resolvedAsset = Image.resolveAssetSource(videoAsset);
    let videoUri = resolvedAsset.uri;

    // iOS需要确保URI以file://开头
    if (Platform.OS === 'ios' && !videoUri.startsWith('file://')) {
      videoUri = `file://${videoUri}`;
    }

    console.log("视频URI: ", videoUri);

    const formData = new FormData();
    formData.append("video", {
      uri: videoUri,
      name: "mr.mp4",
      type: "video/mp4",
    });

    const res = await axios.put(
      `http://10.0.2.2:3001/request/fulfill/12`,
      formData,
      {
        // 无需手动设置Content-Type，Axios会自动处理
        headers: {
          // 可添加其他必要头，比如Authorization
        },
      }
    );

    console.log("上传成功:", res.data);
  } catch (error) {
    console.error("上传失败:", error.response?.data || error.message);
  }
}

备选方案（若原生FormData仍有问题） #

如果上述方法还是无效，可以尝试用rn-fetch-blob替代原生FormData和Axios，它对RN的文件上传支持更稳定：

1. 先安装依赖：

npm install rn-fetch-blob --save

2. 替换代码：

import RNFetchBlob from 'rn-fetch-blob';
import { Image, Platform } from 'react-native';

async function sendReq() {
  try {
    const videoAsset = require("../../assets/videos/mr.mp4");
    const resolvedAsset = Image.resolveAssetSource(videoAsset);
    let videoUri = resolvedAsset.uri;

    if (Platform.OS === 'ios' && !videoUri.startsWith('file://')) {
      videoUri = `file://${videoUri}`;
    }

    const formData = new RNFetchBlob.polyfill.FormData();
    formData.append("video", {
      uri: videoUri,
      name: "mr.mp4",
      type: "video/mp4",
    });

    const res = await RNFetchBlob.fetch(
      'PUT',
      `http://10.0.2.2:3001/request/fulfill/12`,
      {}, // 无需手动设置头，库会自动处理
      formData
    );

    console.log("上传成功:", res.text());
  } catch (error) {
    console.error("上传失败:", error.message);
  }
}

额外检查点 #

• 确认Node.js服务器端正确处理PUT请求的multipart数据，比如用multer的话，确保配置支持PUT方法（默认支持，但部分自定义配置可能限制）。
• 检查视频文件是否在RN打包时被正确包含，确保assets目录配置在metro.config.js中。

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