React项目发帖：username与image无法存入MongoDB的求助

一、Username存储失败的问题修复 #

问题根源 #

前端提交时传给后端的字段是user，但后端路由错误地从req.body解构username，导致无法获取用户名；同时前端初始化username状态为对象，可能引发类型不匹配问题。

修改步骤 #

1. 前端状态初始化修正：
   将username的初始值从对象改为空字符串：

   const [username, setUsername] = useState('');
   

2. 后端路由字段匹配修正：
   后端调整解构逻辑，直接从req.body获取user字段（前端传的就是这个键）：

   router.post('/', upload.single('image'), async (req, res) => {
     try {
       const { title, description, user } = req.body;
       const imagePath = req.file ? req.file.path : undefined;
   
       const post = new PostModel({
         user,
         title,
         description,
         image: imagePath
       });
   
       const savedPost = await post.save();
       res.json(savedPost);
     } catch (err) {
       res.status(400).json({ error: 'Failed to create post', details: err.message });
     }
   });
   

二、Image存储失败的问题修复 #

问题根源 #

前端直接将File对象通过JSON请求发送，无法被序列化；后端未配置文件上传处理逻辑，无法接收和存储文件。

修改步骤 #

1. 前端改用FormData提交数据：
   表单提交时创建FormData封装所有数据（包括文件），并设置正确的请求头：

   const handleSubmit = async (event) => {
     event.preventDefault();
   
     const formData = new FormData();
     formData.append('user', username);
     formData.append('title', title);
     formData.append('description', description);
     if (image) {
       formData.append('image', image);
     }
   
     try {
       await axios.post('http://localhost:3001/posts', formData, {
         headers: {
           'Content-Type': 'multipart/form-data'
         }
       });
       setTitle('');
       setDescription('');
       setImage(null); // 清空文件选择状态
       console.log('Post submitted successfully!');
     } catch (error) {
       console.error('Error submitting post:', error);
     }
   };
   

2. 后端配置multer处理文件上传：

   • 先安装multer：npm install multer
   • 在post路由文件中引入并配置multer：

     const multer = require('multer');
     const path = require('path');
     const fs = require('fs');
     
     // 确保uploads目录存在，不存在则创建
     const uploadDir = path.join(__dirname, '../uploads');
     if (!fs.existsSync(uploadDir)) {
       fs.mkdirSync(uploadDir, { recursive: true });
     }
     
     // 配置文件存储路径和唯一文件名
     const storage = multer.diskStorage({
       destination: function (req, file, cb) {
         cb(null, uploadDir);
       },
       filename: function (req, file, cb) {
         const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
         cb(null, `${file.fieldname}-${uniqueSuffix}${path.extname(file.originalname)}`);
       }
     });
     
     const upload = multer({ storage: storage });
     

   • 修改路由，添加multer中间件处理单文件上传：

     // 路由添加upload.single('image')中间件，对应前端FormData里的'image'键
     router.post('/', upload.single('image'), async (req, res) => {
       try {
         const { title, description, user } = req.body;
         // 从req.file中获取上传后的文件路径，存入数据库
         const imagePath = req.file ? req.file.path : undefined;
     
         const post = new PostModel({
           user,
           title,
           description,
           image: imagePath
         });
     
         const savedPost = await post.save();
         res.json(savedPost);
       } catch (err) {
         res.status(400).json({ error: 'Failed to create post', details: err.message });
       }
     });
     

额外注意事项 #

• 确保localStorage中的userID是有效用户ID，且/auth/${userID}接口能正确返回包含username的用户数据。
• 如果需要前端展示上传后的图片，可将后端返回的image路径拼接成完整URL（比如http://localhost:3001/${savedPost.image}），同时在后端主文件中配置静态文件服务：

  app.use('/uploads', express.static(path.join(__dirname, 'uploads')));
  

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