使用Axios向Node.js后端上传大文件JS对象时遇404错误如何解决？

1. 前端代码的核心错误 #

你创建了formObj这个FormData对象并完成了数据追加，但实际发送请求时传入的是原始formData而非处理后的formObj，这会导致后端无法正确解析表单数据（尤其是文件），直接引发请求异常。

修正后的handleSubmit函数：

const handleSubmit = async () => {
    const formObj = new FormData();
    // 遍历表单数据并追加到FormData对象
    Object.entries(formData).forEach(([fieldName, fieldValue]) => {
        formObj.append(fieldName, fieldValue);
    });
    
    try{     
        const postReq = await axios.post('http://localhost:8000/postData', formObj, {
            // 上传文件时显式指定请求头，Axios会自动适配边界值
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        });
        console.log('请求成功:', postReq.data);
    }catch(e){
        console.error('请求失败:', e.response?.data || e.message);
    }
}

注：移除了无意义的formObj空判断（new FormData()永远不会返回null），同时修正了请求参数并补充了合适的请求头配置。

2. 后端文件大小限制调整 #

如果确实是大文件导致的传输失败，需要针对Node.js后端框架调整上传大小限制：

若使用Express框架 #

• 针对普通JSON/表单请求：

const express = require('express');
const app = express();

// 调整解析限制，示例为50MB
app.use(express.json({ limit: '50mb' }));
app.use(express.urlencoded({ extended: true, limit: '50mb' }));

• 若用multer处理文件上传：

const multer = require('multer');
// 配置文件存储路径与大小限制（示例50MB）
const upload = multer({ 
    dest: './uploads/',
    limits: { fileSize: 50 * 1024 * 1024 }
});

// 路由中使用multer中间件
app.post('/postData', upload.any(), (req, res) => {
    // 处理上传逻辑
    res.status(200).json({ msg: '上传完成' });
});

若使用Koa框架 #

通过koa-body配置文件大小限制：

const koaBody = require('koa-body');

app.use(koaBody({
    multipart: true,
    formidable: {
        maxFileSize: 50 * 1024 * 1024 // 设置为50MB
    }
}));

3. 404错误额外排查点 #

• 确认后端服务在localhost:8000正常运行，且/postData路由为POST方法
• 检查后端是否存在路由拼写错误，或中间件拦截了请求
• 查看后端日志，确认请求是否真的到达服务端，以及返回404的具体原因

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