基于React Native+TypeScript的文件/媒体上传方案咨询

核心库推荐 #

1. 文件选择与相机调用：react-native-image-picker #

• 支持从相册选取文件、图片、视频，也可直接调用相机拍摄照片/视频
• 原生支持TypeScript，类型定义完整，无需额外安装类型包
• 可配置编辑权限、压缩质量、文件类型过滤、多选限制等参数

2. 文件系统操作：react-native-fs #

• 用于获取文件本地路径、大小、MIME类型等元信息
• 支持文件复制、移动、删除等预处理操作，适配上传前的路径转换需求
• TypeScript类型提示完善，避免路径操作的类型错误

3. 上传请求处理：axios（或RN原生fetch） #

• axios更适合复杂上传场景，支持上传进度监听、请求中断、错误重试
• 配合FormData实现多文件上传，TypeScript下可自定义类型约束请求参数

4. 权限管理：react-native-permissions #

• 统一处理安卓、iOS的相机、相册存储权限申请
• 支持权限状态监听，避免因权限缺失导致功能崩溃

实现思路 #

1. 权限配置与申请 #

• 在安卓AndroidManifest.xml中添加相机、读写存储权限声明，iOSInfo.plist中添加相机、相册访问权限描述
• 初始化时调用requestMultiple申请所需权限，根据权限状态决定是否开放功能

2. 相机拍摄与文件选择逻辑 #

• 调用launchCameraAsync启动相机，配置拍摄类型（图片/视频）、质量等参数，获取返回的临时文件路径
• 调用launchImageLibraryAsync打开相册，支持多选、文件类型筛选，批量处理选中的文件
• 统一封装文件处理函数，提取文件的uri、fileName、type等核心信息

3. 文件上传流程 #

• 构建FormData对象，将文件以uri、name、type字段添加至表单
• 发起POST请求，设置Content-Type: multipart/form-data请求头
• 通过onUploadProgress监听上传进度，实时更新UI；处理成功/失败回调，给出用户反馈

4. TypeScript类型约束 #

• 自定义UploadFile类型，包含uri、name、type、size等必填字段
• 为第三方库的回调函数添加类型注解，避免隐式类型转换导致的错误

关键代码示例 #

相机拍摄与文件选择 #

import { launchCameraAsync, launchImageLibraryAsync, MediaTypeOptions, Asset } from 'react-native-image-picker';

// 拍摄照片
const takePhoto = async () => {
  const result = await launchCameraAsync({
    mediaType: MediaTypeOptions.Images,
    allowsEditing: true,
    quality: 0.8,
  });

  if (!result.canceled) {
    handleFileUpload(result.assets[0]);
  }
};

// 从相册选择文件
const pickFiles = async () => {
  const result = await launchImageLibraryAsync({
    mediaType: MediaTypeOptions.All,
    selectionLimit: 3,
  });

  if (!result.canceled) {
    result.assets.forEach(asset => handleFileUpload(asset));
  }
};

文件上传函数 #

import axios from 'axios';

interface UploadFile {
  uri: string;
  name: string;
  type: string;
}

const handleFileUpload = async (asset: Asset) => {
  if (!asset.uri || !asset.fileName || !asset.type) return;

  const formData = new FormData();
  formData.append('uploadFile', {
    uri: asset.uri,
    name: asset.fileName,
    type: asset.type,
  } as any); // RN FormData 类型兼容处理

  try {
    const response = await axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      onUploadProgress: (progressEvent) => {
        const progress = Math.round((progressEvent.loaded * 100) / (progressEvent.total || 1));
        console.log(`上传进度：${progress}%`);
        // 更新UI进度条
      },
    });
    console.log('上传成功:', response.data);
  } catch (error) {
    console.error('上传失败:', error);
    // 提示用户上传失败
  }
};

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