React+MongoDB服装商品模型多图上传功能实现故障排查

问题背景 #

开发服装商品添加与展示网站，需创建包含标题、描述及多张图片的商品条目。目前标题和描述可正常存入MongoDB，但图片始终无法随条目上传，尝试Multer和FormData方案均未成功。

当前配置代码 #

1. Item模型（Models > Item） #

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const itemSchema = new Schema({
   title: {type: String},
   description: {type: String},
   files: {type: String} // 已知此处不应设为String，但无法选择File类型
     
}, {
timestamps: true
});

module.exports = mongoose.model('Item', itemSchema);

2. AddItemForm组件 #

import { useState } from "react";
import axios from "axios";

import * as itemsService from '../../utilities/items-service'

export default function AddItemForm() {

    const [fullItem, setFullItem] = useState({
        title: '',
        description: '',
        file: ''
      });
    
      function handleChange(evt) {
        setFullItem({ ...fullItem, [evt.target.name]: evt.target.value });
      }
    
      async function handleSubmit(evt) {
        evt.preventDefault();
        axios.post('/api/items', fullItem)
      .then(response => {
        console.log('Item uploaded successfully:', response.data);
        })
      .catch(error => {
        console.error('Error uploading item:', error);
        });
      };


    return (
      <>
        <div>This is the AddItemForm page</div>

        <div className="form-container">
            <form autoComplete="off" encType="multipart/form-data" onSubmit={handleSubmit}>
                <label>Title: </label>
                <input type="text" name="title" value={fullItem.title} onChange={handleChange} required />
                <label>Description: </label>
                <input type="text" name="description" value={fullItem.description} onChange={handleChange} required />
                <label>File: </label>
                <input type="file" name="file" value={fullItem.file} onChange={handleChange} required />
                <button type="submit" >Submit</button>
            </form>
        </div>
        
      </>
    )
}

3. 创建函数（后端） #

async function create(req, res) {
  try{
    const createdItem = await Item.create(req.body);
    res.json(createdItem);

  }  catch(err) {
    res.status(400).json(err);
    console.log(err)
    } 
}

已尝试的替代方案 #

替代上传页面（ItemUpload组件） #

import React, { useState } from 'react';
import axios from 'axios';

const ItemUpload = () => {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [selectedImage, setSelectedImage] = useState(null);

  const handleTitleChange = (event) => {
    setTitle(event.target.value);
  };

  const handleDescriptionChange = (event) => {
    setDescription(event.target.value);
  };

  const handleFileSelect = (event) => {
    const file = event.target.files[0];
    setSelectedImage(file);
  };

  const handleUpload = () => {
    const formData = new FormData();
    formData.append('title', title);
    formData.append('description', description);
    formData.append('image', selectedImage);

    axios.post('/api/items', formData)
      .then(response => {
        console.log('Item uploaded successfully:', response.data);
      })
      .catch(error => {
        console.error('Error uploading item:', error);
      });
  };

  return (
    <>
    
    <div>
      <input type="text" placeholder="Title" value={title} onChange={handleTitleChange} />
      <textarea placeholder="Description" value={description} onChange={handleDescriptionChange}></textarea>
      <input type="file" onChange={handleFileSelect} />
      <button onClick={handleUpload}>Upload</button>
    </div>

    </>
  );
};

export default ItemUpload;

另一种提交逻辑 #

组件内提交代码

async function handleSubmit(evt) {
    evt.preventDefault();
    const newFullItem = await itemsService.createItem(fullItem)
}

items-service.js

import * as itemsAPI from './items-api';

export async function createItem(itemData) {
    const newItem = await itemsAPI.createItemRequest(itemData);
    return newItem;
}

items-api.js & send-request.js

import sendRequest from "./send-request";
const BASE_URL = '/api/items';

export function createItemRequest(itemData) {
    const newItem = itemData
    return sendRequest(BASE_URL, 'POST', newItem);
}

// send-request.js
export default async function sendRequest(url, method = 'GET', payload = null) {
    const options = { method };
    if (payload) {
      options.headers = { 'Content-Type': 'application/json' };
      options.body = JSON.stringify(payload);
    }
    const res = await fetch(url, options);
    if (res.ok) return res.json();
    throw new Error('Bad Request');
}

解决方案 #

1. 修正Mongoose模型 #

MongoDB不直接存储文件，需存储文件路径（或Base64编码，推荐路径），调整为数组支持多张图片：

const itemSchema = new Schema({
  title: { type: String, required: true },
  description: { type: String },
  files: [{ type: String }] // 存储图片路径数组
}, { timestamps: true });

2. 后端配置Multer处理文件上传 #

Multer与React版本无兼容问题，正确配置如下：

• 安装依赖：npm install multer
• 后端路由配置：

const express = require('express');
const router = express.Router();
const multer = require('multer');
const Item = require('../models/Item');
const fs = require('fs');

// 自动创建uploads目录
const uploadDir = './uploads';
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir);
}

// 配置文件存储规则
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, uploadDir);
  },
  filename: (req, file, cb) => {
    // 生成唯一文件名避免冲突
    cb(null, `${Date.now()}-${file.originalname}`);
  }
});

const upload = multer({ storage: storage });

// 处理多文件上传，最多5张
router.post('/', upload.array('files', 5), async (req, res) => {
  try {
    // 获取上传文件的路径数组
    const filePaths = req.files.map(file => `/uploads/${file.filename}`);
    // 创建商品条目
    const item = new Item({
      title: req.body.title,
      description: req.body.description,
      files: filePaths
    });
    await item.save();
    res.json(item);
  } catch (err) {
    res.status(400).json(err);
  }
});

module.exports = router;

3. 前端修正FormData提交逻辑 #

确保正确构建FormData，不要用JSON序列化：

import { useState } from "react";
import axios from "axios";

export default function AddItemForm() {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [files, setFiles] = useState([]);

  const handleFileChange = (e) => {
    setFiles([...e.target.files]); // 支持多选文件
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('title', title);
    formData.append('description', description);
    // 添加所有选中的文件
    files.forEach(file => {
      formData.append('files', file);
    });

    try {
      const response = await axios.post('/api/items', formData);
      console.log('Item uploaded:', response.data);
      // 重置表单
      setTitle('');
      setDescription('');
      setFiles([]);
    } catch (error) {
      console.error('Upload error:', error);
    }
  };

  return (
    <div className="form-container">
      <form onSubmit={handleSubmit}>
        <label>Title:</label>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          required
        />
        <label>Description:</label>
        <textarea
          value={description}
          onChange={(e) => setDescription(e.target.value)}
        />
        <label>Images:</label>
        <input
          type="file"
          multiple // 开启多选
          onChange={handleFileChange}
          required
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

4. 配置静态文件访问（Express后端） #

让前端能访问上传的图片：

const express = require('express');
const app = express();
// 配置uploads目录为静态资源
app.use('/uploads', express.static('uploads'));

关键注意事项 #

• 不要用JSON.stringify处理FormData，会导致文件数据丢失
• Multer的upload.array('files', 5)中的files必须和前端FormData的append键一致
• 确保后端uploads目录存在，可通过代码自动创建避免报错

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