React.js上传图片至MongoDB：假路径与文件未上传问题解决

一、前端提交逻辑修正（React组件+Action） #

1. 重构submitHandler，用FormData封装上传数据 #

浏览器会隐藏文件真实路径，直接传文件对象的path会得到C:\fakepath\...，必须用FormData来封装文件和普通字段：

const submitHandler = (e) => {
  e.preventDefault();
  const formData = new FormData();
  // 追加普通字段
  formData.append('templateName', templateName);
  formData.append('package_ids', JSON.stringify(package_ids)); // 数组类型转字符串传递
  // 追加图片文件（input的name需和后端multer配置的字段名一致）
  if (previewImage) {
    formData.append('preview_image', previewImage);
  }
  // 调用createTemplate action传入FormData
  dispatch(createTemplate(formData));
};

注意：previewImage需从input的onChange事件获取文件对象：

const handleImageChange = (e) => {
  setPreviewImage(e.target.files[0]);
};

2. 修改createTemplate Action的请求配置 #

axios传FormData时必须设置正确的请求头：

export const createTemplate = (formData) => async (dispatch) => {
  try {
    dispatch({ type: TEMPLATE_CREATE_REQUEST });
    const config = {
      headers: {
        'Content-Type': 'multipart/form-data',
        // 若需权限验证，追加Authorization头：Authorization: `Bearer ${userInfo.token}`
      },
    };
    const { data } = await axios.post('/api/templates', formData, config);
    dispatch({ type: TEMPLATE_CREATE_SUCCESS, payload: data });
    dispatch({ type: TEMPLATE_CREATE_RESET });
  } catch (error) {
    dispatch({
      type: TEMPLATE_CREATE_FAIL,
      payload: error.response?.data?.message || error.message,
    });
  }
};

3. 用useEffect处理上传后的状态重置 #

在TemplateScreen组件中监听redux状态，完成上传后重置表单或跳转：

import { useDispatch, useSelector } from 'react-redux';
import { createTemplate, resetCreateTemplate } from '../actions/templateActions';

const TemplateScreen = () => {
  const dispatch = useDispatch();
  const { success, error } = useSelector(state => state.templateCreate);

  useEffect(() => {
    if (success) {
      // 重置表单状态
      setTemplateName('');
      setPackageIds([]);
      setPreviewImage(null);
      // 重置redux创建状态
      dispatch(resetCreateTemplate());
      // 可选：跳转到模板列表页
      // history.push('/templates');
    }
    if (error) {
      // 显示错误提示（如toast）
      // toast.error(error);
      dispatch(resetCreateTemplate());
    }
  }, [dispatch, success, error, history]);

  // 其他组件逻辑...
};

对应的reducer需添加重置类型：

const templateCreateReducer = (state = {}, action) => {
  switch (action.type) {
    case TEMPLATE_CREATE_REQUEST:
      return { loading: true };
    case TEMPLATE_CREATE_SUCCESS:
      return { loading: false, success: true, template: action.payload };
    case TEMPLATE_CREATE_FAIL:
      return { loading: false, error: action.payload };
    case TEMPLATE_CREATE_RESET:
      return {};
    default:
      return state;
  }
};

二、后端Multer配置与路由修正 #

1. Multer存储配置 #

确保文件能正确上传到uploads文件夹：

const multer = require('multer');
const path = require('path');
const fs = require('fs');

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    const uploadDir = path.join(__dirname, '../uploads');
    // 自动创建不存在的文件夹
    fs.mkdirSync(uploadDir, { recursive: true });
    cb(null, uploadDir);
  },
  filename: (req, file, cb) => {
    // 生成唯一文件名避免覆盖
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, `${uniqueSuffix}-${file.originalname}`);
  },
});

// 过滤仅允许图片上传
const fileFilter = (req, file, cb) => {
  if (file.mimetype.startsWith('image/')) {
    cb(null, true);
  } else {
    cb(new Error('仅支持图片文件上传'), false);
  }
};

const upload = multer({ storage, fileFilter });
module.exports = upload;

2. 路由处理文件上传与数据存储 #

在路由中使用multer中间件，将文件路径存入MongoDB：

const express = require('express');
const router = express.Router();
const upload = require('../config/multer');
const Template = require('../models/Template');

router.post('/', upload.single('preview_image'), async (req, res) => {
  try {
    const { templateName, package_ids } = req.body;
    // 存储相对路径，方便前端后续访问图片
    const preview_image = req.file ? `/uploads/${req.file.filename}` : null;

    const template = new Template({
      templateName,
      package_ids: JSON.parse(package_ids), // 将字符串转回数组
      preview_image,
    });

    const savedTemplate = await template.save();
    res.status(201).json(savedTemplate);
  } catch (error) {
    res.status(400).json({ message: error.message });
  }
});

module.exports = router;

三、关键注意事项 #

• 前端input的name属性必须与后端multer配置的字段名一致（此处为preview_image）
• 确保uploads文件夹有服务器写入权限
• 存入MongoDB的路径建议用相对路径，后续可通过静态资源服务访问图片

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