使用Expo Camera录制视频通过Axios上传服务器报错，求可行上传方案

你现有代码存在几个明显问题，逐一修正即可解决上传报错：

常见报错原因&修复方案 #

• 配置项拼写错误：Axios的请求头配置字段是headers，你写的header为错误拼写，导致请求头配置不生效
• 手动指定multipart/form-data丢失边界参数：不需要手动设置Content-Type，RN网络层会自动为FormData请求生成带boundary的合法Content-Type，手动指定会覆盖自动生成的内容导致服务器无法解析表单
• 视频MIME类型校验：确保videoType1/videoType2/videoType3的值为合法的视频MIME类型（如video/mp4），可在录制视频时直接从Expo Camera返回的结果中取type字段，避免手动定义出错
• Expo本地URI适配：iOS返回的URI默认带file://前缀，Android部分场景返回content://格式URI，可直接传入FormData无需额外转换，但要确保已经申请了文件读取权限

修正后的可用代码 #

const videoMergeAction = async () => {
  try {
    setisLoading(true)
    let data = new FormData();
    // 确保firstVideo/secondVideo/thirdVideo是Expo Camera返回的合法本地uri
    data.append("first_video_file",{
      name:"firstVideo.mp4",
      uri: firstVideo,
      type: videoType1 || "video/mp4", // 兜底MIME类型
    });
    data.append("second_video_file", {
      name:"secondVideo.mp4",
      uri: secondVideo,
      type: videoType2 || "video/mp4",
    });
    data.append("third_video_file", {
      name:"thirdVideo.mp4",
      uri: thirdVideo,
      type: videoType3 || "video/mp4",
    });

    // 移除错误的header配置，不需要手动设置Content-Type
    const response  = await Api.post("/upload-video", data)
    console.log('65',response.data);
    if(response.status == 200) {
        console.log('87',response.data);
        setresVideoData(response.data.video_url)
        setVideoPath(response.data.video_path)
        setisLoading(false)
        navigation.push('VideoPreview')
    }
  } catch (error) {
      console.log('video submit fail',error)
      setisLoading(false)
  }
}

附加排查方案 #

如果修正后还是报错，可按以下步骤排查：

1. 打印firstVideo等URI字段，确认路径合法可访问，可先在Expo的Video组件中加载该URI验证文件是否正常
2. 查看服务器端日志，确认是否是参数名不匹配、文件大小超限等服务端限制问题
3. 低版本Expo可额外安装expo-file-system，用FileSystem.uploadAsync替代Axios上传，兼容性更好

你提供的报错截图如下：

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