React Native+Expo Image Picker图片上传至NodeJS服务器问题求助

推荐方案：优先用FormData上传 #

FormData是HTTP标准的文件上传方式，相比base64有几个核心优势：

• 不会像base64那样让文件体积膨胀约30%，传输效率更高
• 服务器端处理更常规，NodeJS等后端框架都有成熟工具支持
• 天然支持多文件上传，扩展性更好

你遇到的问题逐个解决 #

1. Base64方式报错：找不到.data字段 #

Expo Image Picker默认只返回图片uri，要获取base64数据，必须在调用时开启base64选项，返回的对象里对应的字段是base64，而非data。示例代码：

import * as ImagePicker from 'expo-image-picker';

const pickImage = async () => {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    base64: true, // 必须开启该选项才能拿到base64数据
    quality: 0.8,
  });

  if (!result.canceled) {
    const selectedImage = result.assets[0];
    // 用base64上传时取selectedImage.base64
    uploadWithBase64(selectedImage.base64, selectedImage.type);
  }
};

2. 关于fs读取重复磁盘的顾虑 #

return (<Image>组件加载图片和上传读取是两个独立操作，不存在重复读取的性能问题——前者是异步渲染用的，后者是为了获取上传所需的二进制/编码数据，两者缓存机制完全不同。不过用FormData的话根本不需要手动读取文件，直接用uri构造即可，更省心：
```javascript
const uploadWithFormData = async (uri, type) => {
  const formData = new FormData();
  const fileName = uri.split('/').pop();
  // 直接用ImagePicker返回的type识别图片格式
  formData.append('image', {
    uri: uri,
    name: fileName,
    type: type,
  });

  try {
    const response = await fetch('http://你的NodeJS服务器地址/upload', {
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      body: formData,
    });
    const data = await response.json();
    console.log('上传成功', data);
  } catch (error) {
    console.error('上传失败', error);
  }
};
```

### 3. 处理不同图片格式
Expo Image Picker返回的`assets[0].type`字段已经包含了图片的MIME类型（比如`image/jpeg`、`image/png`、`image/gif`），直接复用即可：
- 构造FormData时，将`type`传给文件对象，服务器能自动识别格式
- 用base64上传时，把`type`一起传给后端，让服务端知道该将base64转成什么格式的文件

## NodeJS服务器端处理示例
### 处理FormData上传（用multer）
```javascript
const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' }); // 上传文件保存到uploads目录

app.post('/upload', upload.single('image'), (req, res) => {
  // req.file为上传的文件信息，req.body为其他表单字段
  res.json({
    message: '上传成功',
    file: req.file,
  });
});

app.listen(3000, () => {
  console.log('服务器运行在3000端口');
});
```

### 处理Base64上传
```javascript
const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
app.use(express.json({ limit: '10mb' })); // 调大解析上限适配base64体积

app.post('/upload-base64', (req, res) => {
  const { base64Data, mimeType } = req.body;
  const base64 = base64Data.split(';base64,').pop();
  const ext = mimeType.split('/')[1];
  const fileName = `upload_${Date.now()}.${ext}`;
  const filePath = path.join(__dirname, 'uploads', fileName);

  fs.writeFile(filePath, base64, { encoding: 'base64' }, (err) => {
    if (err) {
      return res.status(500).json({ message: '保存失败', error: err });
    }
    res.json({ message: '上传成功', filePath });
  });
});

app.listen(3000, () => {
  console.log('服务器运行在3000端口');
});
```

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