react-native 文件上传的坑

在React Native中实现文件上传时，可能会遇到各种问题。以下是一些常见的问题以及解决方法：

1. 网络请求库的选择：

   • 使用fetch作为网络请求库时，需要将文件转换为FormData格式。

2. 文件选择和访问：

   • 使用react-native-image-picker或react-native-document-picker来选择文件。

3. Android 权限问题：

   • 确保在AndroidManifest.xml中添加了必要的权限。

4. iOS 权限问题：

   • 确保在Info.plist中添加了必要的权限描述。

5. 文件上传进度跟踪：

   • 使用fetch的onUploadProgress回调来跟踪上传进度。

6. 跨域请求问题：

   • 如果服务器支持CORS，则跨域请求通常不是问题。否则，你可能需要设置代理或在服务器上配置中间件来处理OPTIONS请求。

7. 服务器响应处理：

   • 确保服务器正确处理multipart/form-data请求，并且返回正确的状态码和数据。

以下是一个使用fetch和FormData上传文件的示例代码：

import React, { useState } from 'react';
import { Button, View, Text } from 'react-native';
 
const FileUpload = () => {
  const [uploadProgress, setUploadProgress] = useState(0);
 
  const uploadFile = async (file) => {
    const url = 'YOUR_API_ENDPOINT';
    const data = new FormData();
    data.append('file', file);
 
    try {
      const response = await fetch(url, {
        method: 'POST',
        body: data,
        headers: {
          'Content-Type': 'multipart/form-data',
        },
        // 追踪上传进度
        onUploadProgress: (progressEvent) => {
          const { loaded, total } = progressEvent;
          const percent = Math.round((loaded * 100) / total);
          setUploadProgress(percent);
        },
      });
 
      const result = await response.json();
      console.log(result);
    } catch (error) {
      console.error(error);
    }
  };
 
  return (
    <View>
      <Button title="Upload File" onPress={() => uploadFile(/* your file here */)} />
      <Text>Upload Progress: {uploadProgress}%</Text>
    </View>
  );
};
 
export default FileUpload;

在实际应用中，你需要根据自己的需求和服务器端的配置做相应的调整。记得检查网络状态、输入验证、错误处理等方面，以确保文件上传的稳定性和用户体验。