MERN项目中前端无法向服务器传输文件问题求助

问题概述 #

在MERN项目中尝试从React前端向服务器传输图片文件时，每次上传都会返回"file not found"错误。请求已正常发送，文件名显示正确，但文件本身未成功传输到后端。

相关代码 #

前端代码 #

文件上传状态与上传逻辑

useEffect(()=>{
    const getImage=async ()=>{
        if(file){
            const data=new FormData();
            data.append("name",file.name);
            data.append("file",file);
            
            const response=await API.uploadFile(data);
            post.picture=response.data;
        }
    }
    getImage();
},[file])

文件选择组件

<label htmlFor="fileInput">
    <Add fontSize="large" color="action"/>
</label>
       
<input 
    type="file" 
    id="fileInput"
    style={{display:"none"}}
    onChange={(e)=>{
        setFile(e.target.files[0])
    }}
/>

后端代码 #

接口端点

router.post("/file/upload",upload.single("file"),uploadImage);

Multer中间件配置

import multer from "multer";
import {GridFsStorage} from "multer-gridfs-storage";
import dotenv from "dotenv";

dotenv.config();

const username=process.env.DB_USERNAME;
const password=process.env.DB_PASSWORD;

const storage=new GridFsStorage({
    url:`mongodb+srv://${username}:${password}@cluster0.xki5wr4.mongodb.net/blog?retryWrites=true&w=majority`,
    options:{useNewUrlParser:true},
    file:(request,file) => {
        const match=["image/png","image/jpg,image/jpeg"];
        
        if(match.indexOf(file.memeType)===-1){
            return `${Date.now()}-blog-${file.originalname}`;
        }
        
        return {
            bucketName:"photos",
            filename:`${Date.now()}-blog-${file.originalname}`
        }
    }
})
export default multer({storage});

上传回调函数

const url="http://localhost:8000";

export const uploadImage=(request,response)=>{
    if(!request.file){
        return response.status(404).json({msg:"file not found"})
    }
    
    const imageUrl=`${url}/file/${request.file.filename}`;
    return response.status(200).json({imageUrl});
}

Axios拦截器请求头配置

headers:{
    "Accept": "application/json,form-data", 
    "Content-Type":"application/json",
    // 'Content-Type': 'multipart/form-data'
    // "Content-Type": "'application/x-www-form-urlencoded'"
}

问题分析 #

1. 请求头配置错误：手动设置Content-Type: application/json会导致FormData无法被正确解析。浏览器会自动为FormData请求添加multipart/form-data头并生成boundary分隔符，手动覆盖会丢失关键的boundary信息，后端Multer无法识别文件。
2. Multer配置中的拼写错误：file.memeType应为file.mimetype（拼写错误少了字母t），导致文件类型判断失效。
3. 文件类型数组格式错误：match数组中"image/jpg,image/jpeg"是单个字符串，应拆分为两个独立元素"image/jpg"和"image/jpeg"，否则无法匹配正确的文件类型。

解决方案 #

1. 修正Axios请求头 #

移除手动设置的Content-Type，让浏览器自动处理FormData的请求头：

headers:{
    "Accept": "application/json", 
    // 移除Content-Type设置，浏览器会自动添加正确的multipart/form-data头
}

2. 修正Multer配置中的拼写与数组格式 #

const storage=new GridFsStorage({
    url:`mongodb+srv://${username}:${password}@cluster0.xki5wr4.mongodb.net/blog?retryWrites=true&w=majority`,
    options:{useNewUrlParser:true},
    file:(request,file) => {
        // 拆分文件类型为独立元素，修正拼写错误
        const match=["image/png","image/jpg","image/jpeg"];
        
        if(match.indexOf(file.mimetype)===-1){
            return `${Date.now()}-blog-${file.originalname}`;
        }
        
        return {
            bucketName:"photos",
            filename:`${Date.now()}-blog-${file.originalname}`
        }
    }
})

3. 确保FormData正确传递 #

Axios发送FormData时无需额外处理，直接传递即可，确保API.uploadFile方法正确将FormData作为请求体发送（通常是axios.post(url, data)形式，不手动序列化）。

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