React Native调用FastAPI上传手机图片报field required错误解决方法

你的FastAPI接口/receiptOcr定义的是接收multipart/form-data格式的上传文件，字段名固定为file。当前RN端代码有两个核心错误：

• 错误设置Content-Type: application/json，发送JSON格式请求体，完全不符合文件上传的格式要求
• 仅把图片本地路径字符串当参数传，没有携带真实的图片二进制内容，后端自然找不到必填的file字段，触发field required报错。

后端代码不需要做任何修改，只需要调整RN端的请求构造逻辑：

• 放弃JSON传参，改用标准FormData对象存放上传文件
• 不要手动设置Content-Type请求头，fetch会自动生成带正确boundary分隔符的multipart/form-data头，手动设置反而会导致解析失败
• 从图片选择器拿到图片信息后，把本地图片封装为符合要求的文件对象存入FormData，字段名必须和后端定义的file完全一致

const chooseFromLibrary = () => {
  ImagePicker.openPicker({
    width: 300,
    height: 400,
    cropping: false,
  }).then(image => {
    console.log(image);
    // 直接传入完整image对象，方便获取文件名、MIME类型等信息
    uploadReceipt(image);
  });
};

const uploadReceipt = async (imageInfo) => {
  try {
    // 构造表单数据
    const formData = new FormData();
    formData.append('file', {
      uri: imageInfo.path,
      // 兜底文件名，兼容部分机型选择图片后不返回filename的情况
      name: imageInfo.filename || `receipt_${Date.now()}.jpg`,
      // 兜底MIME类型
      type: imageInfo.mime || 'image/jpeg'
    });

    const response = await fetch(
      'https://receipt-ocr-heroku.herokuapp.com/receiptOcr',
      {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          // 注意：不要手动添加Content-Type，否则会丢失boundary导致上传失败
        },
        body: formData,
      }
    );
    const result = await response.json();
    console.log('OCR接口返回结果', result);
  } catch (error) {
    console.error('上传失败', error);
  }
};

• 如果是安卓环境，需要提前给应用申请文件读取权限，否则会出现无法读取本地图片的问题；iOS端需要在info.plist中配置相册访问权限说明。
• 如果上传时还是报字段缺失，优先检查FormData里append的字段名是不是file，和后端接口参数名完全一致，大小写也要匹配。

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