react-native-document-picker无法正常工作，文件上传功能求助

我在React Native中实现文件上传功能时，控制台出现异常（异常截图：）。

实现代码 #

const [file, setFile] = useState(null);

const pickDocument = async () => {
  try {
    const res = await DocumentPicker.pick({
      type: [DocumentPicker.types.allFiles],
    });
    setFile(res);
  } catch (err) {
    if (DocumentPicker.isCancel(err)) {
      console.log('User cancelled the picker');
    } else {
      console.log('DocumentPicker Error: ', err);
    }
  }
};

const uploadFile = async () => {
  if (!file) return;

  const formData = new FormData();
  formData.append('files', {
    uri: file.uri,
    name: file.name,
    type: file.type,
  });

  try {
    const response = await axios.post(
      'http://localhost:1337/api/upload',
      formData,
      {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      },
    );

    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
};

return (
  <View style={styles.container}>
    <Text>YOUR DOCS</Text>
    <Button title="Pick a document" onPress={pickDocument} />
    {file && <Text>{file.name}</Text>}
    <Button title="Upload Document" onPress={uploadFile} />
  </View>
);
};

代码及导入语句均无明显错误，我已尝试重启应用、重新关联依赖，但问题仍未解决，恳请帮忙排查！

排查方向建议 #

• URI格式适配：iOS和Android的文件URI格式存在差异，Android返回的content://开头的URI无法直接用于上传，需要转换为真实文件路径，可借助react-native-fs库的相关方法处理
• 移除手动设置的Content-Type：手动指定multipart/form-data会丢失FormData自动生成的boundary标识，导致后端无法解析，建议删除headers中的Content-Type配置，让axios自动处理
• 补全文件类型：DocumentPicker返回的file.type可能为空或不准确，可手动设置通用类型（如application/octet-stream）测试
• 修正请求地址：真机测试时，localhost无法访问电脑本地服务，需替换为电脑的局域网IP地址（如http://192.168.x.x:1337/api/upload）
• 检查权限配置：Android需在AndroidManifest.xml中添加文件读取权限（如<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />）；iOS需在Info.plist中添加相册访问描述（如NSPhotoLibraryUsageDescription）

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