React Native FormData上传文件至.NET后端触发166行报错

DevOps 小满

2026-8-26

报错原因

字段名不匹配：Postman生成的请求里文件字段名是file_1，你写的React Native代码里FormData追加文件用的字段名是file，.NET后端按约定字段名取不到上传的文件对象，后续访问文件的FileName、ContentType属性时全部拿到空值，执行file.FileName.Substring(file.FileName.LastIndexOf("."))时直接触发空引用/参数越界异常。
传参结构错误：React Native Document Picker返回的响应对象不是Web标准File对象，直接把整个响应对象传入formdata.append时，fetch无法正确识别文件元数据，后端解析multipart表单时拿到的文件对象属性缺失，同样会触发上述空值错误。
隐藏坑点：如果手动给请求添加Content-Type: multipart/form-data请求头，会导致fetch自动生成的表单边界（boundary）丢失，后端完全无法解析表单内容，你当前代码没加这个头，暂时不会触发这个问题，但后续修改时要注意避开。

修复方案

对齐FormData文件字段名，和Postman、后端接口约定保持一致，将文件字段从file改成接口预期的file_1，如果是多文件上传，按接口要求的命名规则追加对应字段。
不要直接传入Document Picker返回的完整响应对象，手动构造符合React Native FormData要求的文件结构再追加，示例代码如下：

uploadFIle = async (res) => {
  var myHeaders = new Headers();
  myHeaders.append('Authorization', 'Bearer ' + this.props.accessToken);
 
  var formdata = new FormData();
  // 构造符合要求的文件对象，从Document Picker响应中取实际需要的属性
  const uploadFile = {
    uri: res.uri,
    name: res.name,
    type: res.type
  };
  // 字段名和后端对齐为file_1
  formdata.append('file_1', uploadFile, res.name);
  formdata.append(
    'data',
    JSON.stringify({
      // 这里的参数结构、字段名、大小写完全和Postman测试时传的保持一致，不要漏AttachmentTypeId这类必填字段
    }),
  );

  var requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: formdata,
    redirect: 'follow',
  };

  fetch(
    'https://你的接口地址',
    requestOptions,
  )
    .then((response) => response.text())
    .then((result) => {
      console.log('result', result);
      this.apiGetSupplierItem();
    })
    .catch((error) => console.log('error', error));
};

校验data字段内的参数，确保和Postman测试成功时传的结构完全一致，尤其是附件类型ID这类和文件绑定的必填参数，字段名大小写、嵌套结构不要写错。
全程不要手动给请求添加Content-Type头，让fetch自动生成带正确boundary值的multipart/form-data头，避免表单解析失败。

验证技巧：如果后端报错定位在文件名截取那行，基本可以确定是没拿到正确的文件对象，优先检查字段名和传参结构即可。

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