Expo React Native中FileSystem.uploadAsync多文件上传实现求助

因为Expo的FileSystem.uploadAsync仅支持单文件上传，要实现「多文件+表单字段」的multipart请求，推荐直接使用FormData配合fetch（或axios）构建请求，无需大幅修改后端（只要后端支持标准multipart表单解析即可）。

实现步骤 #

1. 封装文件转Blob工具函数
   Expo中的文件URI为file://开头，需转为Blob才能添加到FormData：

   async function getBlobFromUri(uri) {
     const response = await fetch(uri);
     return await response.blob();
   }
   

2. 构建完整的FormData并发送请求
   先添加普通表单字段，再遍历文件列表逐个添加文件：

   async function submitWorkOrder(apiUrl, claimData, files, authToken) {
     const formData = new FormData();
   
     // 添加普通表单字段（对应原代码中的parameters）
     formData.append('orderTitle', claimData.title);
     formData.append('orderDesc', claimData.description);
     // 按需添加其他业务字段...
   
     // 批量添加文件
     for (const file of files) {
       const blob = await getBlobFromUri(file.uri);
       // 若后端要求数组格式字段名，可改为`file[]`
       formData.append('file', blob, file.name);
     }
   
     // 发送请求
     const response = await fetch(apiUrl, {
       method: 'POST',
       headers: {
         Authorization: `Bearer ${authToken}`,
         // 不要手动设置Content-Type: multipart/form-data，fetch会自动生成带boundary的正确头
         // 其他自定义头可在此添加
       },
       body: formData,
     });
   
     if (!response.ok) {
       throw new Error('工单提交失败');
     }
   
     return await response.json();
   }
   

关键注意事项 #

• 禁止手动设置Content-Type：fetch会自动生成包含boundary的multipart/form-data头，手动设置会导致后端无法正确解析表单。
• 后端兼容调整：如果原后端仅处理单文件file字段，只需改为接收多文件数组即可（比如Express用multer的array('file')，Laravel直接用$request->file('file')获取文件数组），无需大幅重构。
• 文件参数要求：确保每个文件对象包含uri（Expo返回的文件路径）、name（文件名），MIME类型会由Blob自动识别，无需额外传入。

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