React Native如何发起POST请求将本地路径文件上传至服务端

核心问题解答 #

• 不能直接传递本地缓存路径给服务端：这个路径是设备本地的私有存储路径，服务端无法访问，必须传递文件本身的内容。
• 不需要手动读取文件内容：React Native 原生支持在FormData中直接传入本地文件的uri完成上传，无需额外读取文件操作。如果遇到低版本兼容问题，可以借助react-native-fs类的本地文件操作库读取文件为base64或者二进制流再上传。
• 上传方法是否需要封装：如果仅当前场景用到上传逻辑，直接写在按钮回调中即可；如果项目中多处有文件上传需求，建议单独封装为公共方法降低重复代码。
• 如何在按钮点击时同步执行上传：直接把上传逻辑放在saveDocument的then回调中即可，文件存储完成拿到临时路径后会自动触发上传流程。

具体实现代码 #

1. 调整按钮点击逻辑 #

<View style={styles.button}>
    <Button
        onPress={() => {
            // 先存储文件到本地拿到临时路径
            this._viewer.saveDocument().then((filePath) => {
                console.info('saveDocument:', filePath);
                // 执行上传逻辑
                this.uploadPdf(filePath);
              });
        }}
        title="Save"
    />
</View>

2. 实现上传方法 #

uploadPdf = async (fileUri) => {
  // 创建FormData承载文件数据
  const formData = new FormData();
  formData.append('pdfFile', {
    uri: Platform.OS === 'android' ? `file://${fileUri}` : fileUri, // 安卓设备需要补全file://前缀
    name: 'targetFileName.pdf', // 自定义传给服务端的文件名
    type: 'application/pdf' // 对应PDF文件的MIME类型
  });

  try {
    const uploadRes = await fetch('https://example.com/data', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        // 不要手动设置Content-Type，RN会自动生成带boundary的multipart/form-data请求头
      },
      body: formData
    });
    const resData = await uploadRes.json();
    // 上传成功后续逻辑，比如弹窗提示
    console.log('上传成功', resData);
  } catch (err) {
    // 上传失败后续逻辑，比如重试、报错提示
    console.error('上传失败', err);
  }
}

注意事项 #

• 服务端需要按照multipart/form-data格式解析请求，取pdfFile字段即可获取到PDF文件内容。
• 如果遇到文件读取权限报错，需要先申请本地存储的读取权限，安卓端需要在AndroidManifest.xml中配置存储权限。
• 大文件上传建议增加分片、断点续传逻辑，避免上传失败重传成本过高。

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