Ionic React Android端文件上传功能异常求助

核心问题分析 #

浏览器端上传正常，Android端失败，本质是请求头格式错误或文件对象处理不当，导致服务器无法识别multipart/form-data类型的请求。

具体解决步骤 #

1. 禁止手动设置Content-Type
   用FormData时，Axios/fetch会自动生成带正确边界的multipart/form-data请求头，手动设置反而会破坏边界信息。直接不传Content-Type即可：

   const formData = new FormData();
   // 这里的file是从Ionic文件选择器拿到的有效File/Blob对象
   formData.append('uploadFile', file, file.name);
   
   // Axios请求示例
   axios.post('/api/upload', formData)
     .then(res => console.log('上传成功'))
     .catch(err => console.error('上传失败', err));
   

2. 确保Android端拿到正确的文件对象
   Android端从相机/相册获取的文件可能是本地路径，需要转成Blob再加入FormData：

   import { File } from '@ionic-native/file/ngx';
   
   // 把本地文件路径转成Blob
   async function pathToBlob(filePath) {
     const fileEntry = await this.file.resolveLocalFilesystemUrl(filePath);
     const nativeFile = await fileEntry.file();
     return new Blob([nativeFile], { type: nativeFile.type });
   }
   
   // 使用示例
   const imgBlob = await pathToBlob('file:///storage/emulated/0/DCIM/IMG_1234.jpg');
   formData.append('uploadFile', imgBlob, 'IMG_1234.jpg');
   

3. 检查Android权限配置
   确保AndroidManifest.xml里的权限和兼容设置都加全：

   <!-- 基础网络和存储权限 -->
   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" /> <!-- Android 13+ -->
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <!-- 旧版本兼容 -->
   
   <!-- Android 10+ 需添加这个属性到application标签 -->
   <application
     ...
     android:requestLegacyExternalStorage="true">
   </application>
   

4. 服务器端验证

   • 确认服务器用正确的库解析multipart请求（比如Node.js用multer，Java Spring开启Multipart支持）
   • 检查服务器是否限制了上传文件的大小，调整配置允许对应尺寸的图片上传

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