使用Expo和React Native无法向Node.js服务器上传图片的问题

问题说明 #

使用expo-image-picker选择图片后，返回的assets数组中缺少fileSize和fileName字段，导致上传文件到服务器时无法获取这两个关键信息，服务器端用multer().any()处理，尝试过XHR上传方案仍未解决。

解决方案 #

expo-image-picker默认不会返回这两个字段，需要通过额外的API手动获取：

1. 安装依赖
   首先安装expo-file-system用于获取文件大小：

   npx expo install expo-file-system
   

   如果需要获取相册中原文件的文件名，还需安装expo-media-library：

   npx expo install expo-media-library
   

2. 修改代码获取字段
   在获取图片选择结果后，补充获取fileSize和fileName：

   import * as ImagePicker from 'expo-image-picker';
   import * as FileSystem from 'expo-file-system';
   // 如果需要原文件名，引入MediaLibrary
   // import * as MediaLibrary from 'expo-media-library';
   
   // 权限申请和图片选择逻辑
   const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
   if (status !== 'granted') {
     return;
   }
   
   const result = await ImagePicker.launchImageLibraryAsync({
     mediaTypes: ImagePicker.MediaTypeOptions.Images,
   });
   
   if (!result.canceled) {
     const asset = result.assets[0];
     
     // 获取文件大小
     const fileInfo = await FileSystem.getInfoAsync(asset.uri);
     const fileSize = fileInfo.size;
   
     // 方式1：从缓存URI中提取文件名
     const fileName = asset.uri.split('/').pop();
   
     // 方式2：获取相册中原文件的文件名（需MediaLibrary权限）
     // const mediaAsset = await MediaLibrary.getAssetInfoAsync(asset.assetId);
     // const fileName = mediaAsset.filename;
   
     console.log('fileSize:', fileSize, 'fileName:', fileName);
   
     // 上传文件到服务器
     const formData = new FormData();
     formData.append('file', {
       uri: asset.uri,
       name: fileName,
       type: `image/${fileName.split('.').pop()}` // 自动匹配图片格式
     });
     // 可选：单独传递fileSize字段
     formData.append('fileSize', fileSize);
   
     // Fetch上传示例
     const res = await fetch('你的服务器上传接口', {
       method: 'POST',
       body: formData,
       headers: {
         'Content-Type': 'multipart/form-data',
       },
     });
   
     // XHR上传示例
     // const xhr = new XMLHttpRequest();
     // xhr.open('POST', '你的服务器上传接口');
     // xhr.onload = () => console.log('上传完成:', xhr.responseText);
     // xhr.send(formData);
   }
   

3. 服务器端注意事项
   确保multer配置正确，能解析FormData中的文件和字段。比如：

   const multer = require('multer');
   const upload = multer().any();
   
   app.post('/upload', upload, (req, res) => {
     // req.files 是上传的文件数组
     // req.body.fileSize 是前端传递的文件大小
     res.status(200).json({ msg: '上传成功' });
   });
   

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