React Native 上传base64编码签名PNG至服务器时报网络请求失败错误

数据老陈

2026-10-28

核心故障定位

你遇到的「网络请求失败」不是真实网络连接中断，是代码构造请求的逻辑完全不符合React Native和multipart上传的规范，几个硬错误直接导致请求流程走不通：

最致命的错误：给FormData的文件URI直接塞base64字符串：React Native内置的fetch在处理multipart上传时，对FormData里的文件项URI有明确限制——只认file://、content://开头的本地真实文件路径，完全不支持直接传data:image/xxx;base64,开头的编码串。一旦传了这种格式的URI，multipart请求体构造流程会直接崩溃，前端不会报具体的参数错，只会统一抛「网络请求失败」，实际上请求根本没发出去。
第二个必踩的配置错误：手动覆盖了不完整的Content-Type头：你写的'Content-Type': 'multipart/form-data;'是缺了关键参数的——multipart协议要求请求头里必须带一个随机生成的boundary字符串，用来分隔请求体里的不同表单字段。正常情况下，fetch检测到请求体是FormData实例时，会自动生成带正确boundary的完整请求头；你手动写的这个缺参数的头把自动生成的配置覆盖了，服务器收到后根本没法解析请求体，也会触发连接异常，前端同样会报「网络请求失败」。
第三个时序bug：setState异步更新导致取值为空：React的setState是异步批量执行的，你刚执行完this.setState({base64: ...})就马上读this.state.base64做FormData拼接，这时候state根本还没完成更新，拿到的大概率是上一次的旧值甚至是undefined，也会直接导致文件项构造失败，触发统一的网络报错。
第四个细节错配：文件类型和实际内容不匹配：你采集的是PNG格式的签名，代码里硬写文件名为digital_signature.jpg、MIME类型用了模糊的image/*，遇到对上传文件校验严格的服务端，会直接拒掉请求，前端同样会报网络类错误。

修复操作步骤

替换FormData里的文件URI：用SignatureCapture组件onSaveEvent回调返回的本地临时文件路径（也就是你之前注释掉的this.state.singleFileADH1这类真实路径），不要直接把base64串塞给uri字段。如果回调里确实只拿到base64编码，需要先把base64转成RN可识别的本地临时文件路径，再做拼接。
删掉手动写的Content-Type请求头：把fetch配置里的headers块整个移除，让fetch自动处理multipart的请求头生成，避免缺boundary的问题。
修正文件参数匹配：把文件项的名称和类型改成和实际采集一致的PNG格式，不要用模糊的通配MIME类型：
```
formData.append('digital_signature', {
  uri: 本地临时文件路径,
  name: 'digital_signature.png',
  type: 'image/png'
})
```
绕开state异步读取的时序问题：不要把签名数据先存state再读，直接把onSaveEvent回调里拿到的文件路径存在普通局部变量里，直接传入FormData拼接流程，避免异步更新导致的取值为空问题。

修正后的参考请求逻辑

// 签名保存回调里直接处理上传逻辑，绕开state异步时序问题
_onSaveEvent = (result) => {
  const formData = new FormData()
  formData.append('digital_signature', {
    uri: result.path, // 用组件返回的真实本地路径，不要传base64串
    name: 'digital_signature.png',
    type: 'image/png'
  })

  fetch('https://abc.tech/Android_API_CI/upload_multipart_data', {
    method: 'post',
    body: formData,
    // 不要手动写Content-Type头，让fetch自动生成带boundary的完整配置
  })
  .then(res => res.json())
  .then(res => console.log('上传成功', res))
  .catch(err => console.log('真实错误详情', err))
}

注意：RN框架会把很多请求构造阶段的参数错误统一套上「网络请求失败」的提示，如果修复后仍有报错，一定要把catch里拿到的原始错误信息打出来看，不要只依赖前端统一封装的报错文案，避免排查方向走偏。

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