如何高效上传react-native-vision-camera拍摄的图片至Express.js后端

针对你遇到的高分辨率图片Base64上传体积过大导致413错误的问题，结合大学项目数据量小的场景，最优方案是改用FormData上传二进制文件，配合前端图片压缩/分辨率限制、后端multer处理，具体实现如下：

前端修改（React Native） #

替换Base64上传逻辑，直接用FormData提交图片二进制文件，同时可在拍照阶段限制图片大小：

1. 优化拍照代码（限制分辨率/质量） #

const capturePhoto = async () => {
  if (camera.current !== null) {
    const photo = await camera.current.takePhoto({
      quality: 0.7, // 调整图片质量（0-1），平衡清晰度与体积
      resolution: { width: 1280, height: 960 } // 设置适合识别的分辨率，无需过高
    });
    setImageSource(photo.path);
    setShowCamera(false);
  }
};

2. 改用FormData上传 #

import axios from 'axios';
import { Platform } from 'react-native';

const handleIdentify = async () => {
  try {
    const formData = new FormData();
    // 适配iOS/Android路径差异
    const fileUri = Platform.OS === 'ios' ? `file://${imageSource}` : imageSource;
    
    formData.append('plantImage', {
      uri: fileUri,
      type: 'image/jpeg',
      name: `plant_${Date.now()}.jpg`
    });

    const response = await axios.post(API_BASE_URL, formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    console.log(response.data);
  } catch(error) {
    console.error("识别失败:", error);
  }
};

后端修改（Express.js + MongoDB） #

使用multer中间件处理FormData文件上传，结合MongoDB存储（支持直接存文件Buffer或文件路径）：

1. 安装依赖 #

npm install multer

2. 后端核心代码 #

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

// 配置multer内存存储（适合小文件，大学项目场景）
const storage = multer.memoryStorage();
const upload = multer({ 
  storage: storage,
  limits: { fileSize: 5 * 1024 * 1024 } // 限制单文件5MB，可按需调整
});

// 定义MongoDB模型
const PlantSchema = new mongoose.Schema({
  image: Buffer, // 直接存储图片二进制数据
  identificationResult: String,
  createdAt: { type: Date, default: Date.now }
});
const Plant = mongoose.model('Plant', PlantSchema);

// 处理图片上传与识别的接口
app.post('/identify', upload.single('plantImage'), async (req, res) => {
  try {
    // req.file.buffer为上传的图片二进制数据，这里调用你的植物识别逻辑
    const result = await yourPlantIdentificationLogic(req.file.buffer);

    // 保存到MongoDB
    const plantRecord = new Plant({
      image: req.file.buffer,
      identificationResult: result
    });
    await plantRecord.save();

    res.json({ success: true, result });
  } catch (err) {
    res.status(500).json({ success: false, error: err.message });
  }
});

// 若选择存储文件路径而非Buffer，可修改multer为磁盘存储：
// const storage = multer.diskStorage({
//   destination: (req, file, cb) => cb(null, './uploads'), // 需提前创建uploads目录
//   filename: (req, file, cb) => cb(null, `plant_${Date.now()}_${file.originalname}`)
// });
// 对应Schema字段改为imagePath: String

3. 额外调整（避免请求限制） #

若仍出现413，可增大Express的请求大小限制：

app.use(express.json({ limit: '5mb' }));
app.use(express.urlencoded({ limit: '5mb', extended: true }));

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