如何使用Expo在React Native中向Node.js Express服务器上传图片？

一、前端（Expo）核心操作步骤 #

1. 安装必要依赖
   先安装 Expo 官方提供的文件选择和文件处理库：

npx expo install expo-image-picker expo-file-system

2. 获取文件并构造上传请求
   以图片上传为例，直接用可运行的代码示例：

import * as ImagePicker from 'expo-image-picker';
import * as FileSystem from 'expo-file-system';

const pickAndUploadImage = async () => {
  // 申请相册权限
  const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
  if (status !== 'granted') {
    alert('需要开启相册权限才能上传文件');
    return;
  }

  // 打开相册选择图片
  const pickResult = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    quality: 0.6,
  });

  if (!pickResult.canceled) {
    // 构造 FormData，这是 Multer 能识别的格式
    const formData = new FormData();
    const fileMeta = await FileSystem.getInfoAsync(pickResult.assets[0].uri);
    
    formData.append('uploadFile', {
      uri: pickResult.assets[0].uri,
      name: fileMeta.filename || 'uploaded-image.jpg',
      type: fileMeta.mimeType || 'image/jpeg',
    });

    // 发送上传请求
    try {
      const response = await fetch('http://你的后端地址/upload', {
        method: 'POST',
        body: formData,
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
      const result = await response.json();
      console.log('上传成功:', result);
    } catch (err) {
      console.error('上传失败:', err);
    }
  }
};

二、后端（Node.js + Multer）配置 #

1. 安装后端依赖

npm install multer cors express

2. 后端核心代码

const express = require('express');
const multer = require('multer');
const cors = require('cors');
const app = express();

// 开启跨域（开发环境可直接用通配符，生产环境要限制具体域名）
app.use(cors());

// 配置 Multer 的文件存储规则
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    // 确保项目根目录下的 uploads 文件夹存在，否则会报错
    cb(null, './uploads');
  },
  filename: (req, file, cb) => {
    // 用时间戳+原文件名避免重名
    cb(null, `${Date.now()}-${file.originalname}`);
  }
});

// 初始化 Multer，注意字段名要和前端 FormData 里的一致（这里是 'uploadFile'）
const upload = multer({ storage: storage }).single('uploadFile');

// 上传接口
app.post('/upload', (req, res) => {
  upload(req, res, (err) => {
    if (err instanceof multer.MulterError) {
      return res.status(500).json({ msg: '文件上传格式错误' });
    } else if (err) {
      return res.status(500).json({ msg: '服务器内部错误' });
    }
    // 上传成功后返回文件信息
    res.json({
      msg: '上传成功',
      fileInfo: req.file
    });
  });
});

app.listen(3000, () => {
  console.log('后端服务运行在 http://localhost:3000');
});

三、常见问题排查 #

• 确保后端的 uploads 文件夹已手动创建，否则 Multer 会抛出文件路径不存在的错误
• Android 模拟器访问本地后端时，要把地址改成 http://10.0.2.2:3000，iOS 模拟器直接用 http://localhost:3000
• 前端不要手动设置 multipart/form-data 的边界，浏览器会自动处理
• 如果遇到跨域错误，检查后端的 CORS 配置是否生效

内容的提问来源于stack exchange，提问作者Thilina Ashen Gamage