React Native向Flask服务器传视频报400错误求助

问题分析 #

Postman 能正常上传但 React Native 端返回 400，核心原因在于FormData 构造不符合要求以及手动设置 Content-Type 导致请求格式错误。

具体修正方案 #

1. 修正客户端 FormData 构造 #

React Native 的 FormData 无法直接解析 DocumentPicker 返回的原始对象，必须手动构造包含 uri、type、name 的文件对象，才能被服务器正确识别。同时需移除手动设置的 Content-Type 头（Axios 会自动生成带 boundary 的正确请求头，手动设置会丢失关键的 boundary 参数）。

修改后的客户端上传代码：

const uploadVideo = async () => {
  if (singleFile != null) {
    console.log({ singleFile })
    console.log('Uri: ', singleFile.uri)
    const formdata = new FormData();

    // 构造符合 multipart/form-data 要求的文件对象
    const fileParam = {
      uri: singleFile.uri,
      type: singleFile.type || 'video/mp4', // 优先使用文件自带的 MIME 类型，兜底用通用视频类型
      name: singleFile.name
    };

    formdata.append('video', fileParam);

    axios({
      method: "POST",
      url: `${baseUrl}uploadvideo`,
      data: formdata, // 无需手动设置 Content-Type，Axios 会自动处理
    })
    .then(res => console.log(res.data))
    .catch(err => console.log("err: ", err));

  } else {
    alert('请先选择文件');
  }
};

2. 增强服务器端错误处理（可选） #

原服务器代码直接读取 request.files['video']，若客户端请求格式错误会直接抛出异常返回 400，添加判断后能返回更明确的错误信息，便于调试：

import os
from flask import jsonify

@app.route('/uploadvideo', methods=['POST'])
def upload2():
    # 检查是否存在视频字段
    if 'video' not in request.files:
        return jsonify({'error': '未上传视频文件'}), 400
    video = request.files['video']
    # 检查文件名是否为空
    if video.filename == '':
        return jsonify({'error': '未选择文件'}), 400
    # 确保保存目录存在
    save_dir = 'data/training_data/video/'
    if not os.path.exists(save_dir):
        os.makedirs(save_dir)
    # 保存文件
    video.save(os.path.join(save_dir, video.filename))
    return video.filename

关键原因说明 #

• FormData 格式问题：React Native 环境下，FormData 要求文件参数必须显式提供 uri、type、name 三个属性，直接传入 DocumentPicker 返回的对象会导致服务器无法解析文件。
• Content-Type 错误：手动设置 multipart/form-data 会丢失自动生成的 boundary 分隔符，而服务器依赖 boundary 来区分表单中的不同字段，缺少它会导致请求解析失败。

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