使用Multer+Axios上传图片失败问题排查求助

问题描述 #

尝试通过Axios将图片上传至React项目的Images文件夹，但上传功能无法正常运行，触发Axios错误和内部服务器错误。已尝试修改multer.diskStorage中的目标路径，问题仍未解决。

相关代码 #

后端文件 #

Index.js

const connectToMongo = require('./db');
const express = require('express');
const { Router } = require('express');
connectToMongo();

const app = express()
const cors= require("cors");
app.use(cors());

const port = 5000;


app.use(express.json())

app.use("/api/auth",require("./Routes/auth"));
app.use("/api/medicine",require("./Routes/medicine"));
app.use("/api/shopcon",require("./Routes/shopcon"));
app.use("/api/upload",require("./Routes/upload"));


app.listen(port, () => {
  console.log(`Medicine Backend-app listening on${port}`)
})

Upload.js

const express= require("express");

const router = express.Router();
const multer= require("multer");

const path = require('path');

const storage= multer.diskStorage({
    destination:(req,file,cb)=>{
        const destinationPath = path.join(__dirname, '..', '..','..' ,'public');
        console.log('Destination Path:', destinationPath);
        cb(null,'Routes/Backend-app/src/Images');

    },
    filename:(req, file ,cb)=>{
        cb(null, new Date().toISOString() + file.originalname);
    }
})


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

router.post('/uploads', upload.single("Image") , (req,res)=>{
    res.send(`/${req.file.path}`);

})

module.exports=router;

前端图片上传表单 #

import e from 'cors';
import React, { createContext } from 'react'
import { useContext, useState } from 'react';
import "../Styles/shopinfo.css";
import ShopContext from '../context/meds/ShopContext';
import Shopstate from '../context/meds/Shopstate';
import axios from 'axios';



import Form from 'react-bootstrap/Form';

export default function Info() {
 
  const [Province, setProvince] = useState("");
  const [ownername, setOwner] = useState("");
  const [shopname, setShopName] = useState("");
  const [phone, setPhone] = useState("");
  const [address, setAddress] = useState("");
  const [shopaddress, setShopAddress] = useState("");
  const [City, setCity] = useState("");
  const [file, setFile] = useState(null)
  
  var random="random";
  const  context= useContext(ShopContext);
  const {addShops} = context;




  
  const handleChange = (event) => {
    setFile("Hello")
    console.log(file);
   
}

const config = {     
  headers: { 'content-type': 'multipart/form-data' }
}
  const handleSubmit = async (e) => {
    e.preventDefault();
    const data = new FormData(); 
    data.append('file', file);
    data.append('fileName', file.name);
    console.log(data);
    try {
      let result = axios.post("http://localhost:5000/api/upload/uploads",data);
      
      console.log(result.response.data);
    } catch (error) {
      console.error(error.response.data);     // NOTE - use "error.response.data` (not "error")
    }
   

    addShops(ownername, shopname, phone, address,shopaddress,Province,City,random);
     



  }
  return (

    <div className="rm-background" >
      <h2 className='bar'>
        Shop Approval Form

      </h2>
      <div className='container pt-0 pr-0 card layout'>
        <div className='row justify-content-center'>
          <div className='col-xs-12 col-sm-10 col-md-8 col-lg-5'>
            <form onSubmit={handleSubmit}>
              <div className='form-group'>

                <small className="text-body-secondary">Owner Name</small>

                <input type='text' className='form-control' placeholder='Enter Medicine Name' value={ownername} onChange={(e) => setOwner(e.target.value)} />
                <Form.Text id="passwordHelpBlock" muted>
                 <b>Your password must be 8-20 characters long, contain letters and numbers,
                  and must not contain spaces, special characters, or emoji.</b> 
                </Form.Text>
              </div>
              <div className='form-group'>
                <label htmlFor=''>Shop Name</label>
                <span className="currencyinput"><input type="text" className='form-control value' name="currency" placeholder='Enter Price' value={shopname} onChange={(e) => setShopName(e.target.value)} /></span>

              </div>
              <div className='form-group'>
                <label htmlFor=''>Phone</label>
                <input type='text' className='form-control' placeholder='Enter Category' value={phone} onChange={(e) => setPhone(e.target.value)} />
              </div>
              <div className='form-group'>
                <label htmlFor='' className="form-label">Address</label>

                <input type="text" className='mb-3  ml-3 mr-3 form-control' placeholder='Enter Quantity' value={address} onChange={(e) => setAddress(e.target.value)} />
              </div>
           

              <div className='form-group'>
                <label htmlFor=''>Shop Address</label>
                <input type='text' className='mb-3  ml-3 mr-3 form-control' placeholder='Enter Medicine Name' value={shopaddress} onChange={(e) => setShopAddress(e.target.value)} />
              </div>
              <div className='form-group'>
                <label htmlFor=''>Province</label>
                <input type='text' className='mb-3  ml-3 mr-3 form-control' placeholder='Enter Medicine Name' value={Province} onChange={(e) => setProvince(e.target.value)} />
              </div>
              <div className='form-group'>
                <label htmlFor=''>City</label>
                <input type='text' className='mb-3  ml-3 mr-3 form-control' placeholder='Enter Medicine Name' value={City} onChange={(e) => setCity(e.target.value)} />
              </div>
              <label htmlFor='file-upload'>* Upload Profile Image</label>
              <input type="file" id='file-upload' name="Image" onChange={handleChange}/>
              <button className='btn btn-success mb-4 form-control'>
                Submit
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  )
}

解决方案 #

1. 前端文件处理逻辑修复 #

• 修正文件获取逻辑：你的handleChange方法错误地将file设置为字符串，无法传递有效文件对象

const handleChange = (event) => {
  // 获取选中的文件对象
  setFile(event.target.files[0]);
  console.log(event.target.files[0]);
}

• 修正FormData字段名与异步请求：后端接收字段为Image，需保持一致；Axios请求需加await等待异步结果

const handleSubmit = async (e) => {
  e.preventDefault();
  if (!file) {
    console.error('请选择要上传的图片');
    return;
  }
  const data = new FormData(); 
  // 字段名与后端upload.single("Image")保持一致
  data.append('Image', file);
  data.append('fileName', file.name);
  try {
    // 等待请求完成
    let result = await axios.post("http://localhost:5000/api/upload/uploads", data, config);
    console.log(result.data);
  } catch (error) {
    console.error(error.response?.data || error.message);
  }
  addShops(ownername, shopname, phone, address,shopaddress,Province,City,random);
}

2. 后端存储路径与文件名修复 #

• 用绝对路径替代相对路径，避免路径解析错误；同时确保目标目录存在

const storage= multer.diskStorage({
    destination:(req,file,cb)=>{
        // 根据项目目录结构生成绝对路径，示例为从Upload.js所在Routes目录定位到Backend-app/src/Images
        const destinationPath = path.join(__dirname, '../src/Images');
        console.log('Destination Path:', destinationPath);
        // 自动创建不存在的目录
        const fs = require('fs');
        if (!fs.existsSync(destinationPath)) {
            fs.mkdirSync(destinationPath, { recursive: true });
        }
        cb(null, destinationPath);
    },
    filename:(req, file ,cb)=>{
        // 替换ISO时间中的冒号（Windows文件名不允许冒号）
        const fileName = new Date().toISOString().replace(/:/g, '-') + file.originalname;
        cb(null, fileName);
    }
})

3. 后端路由错误捕获优化 #

添加错误捕获逻辑，便于排查问题：

router.post('/uploads', upload.single("Image") , (req,res)=>{
  try {
    if (!req.file) {
      return res.status(400).send('未接收到文件');
    }
    res.send(`/${req.file.path}`);
  } catch (err) {
    console.error(err);
    res.status(500).send('文件上传失败');
  }
})

额外注意事项 #

• 确保后端服务器对目标文件夹拥有读写权限
• 验证前端请求URL与后端路由完全匹配

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