ReactJS单/多文件上传问题：无报错但未实际上传

核心问题：前后端文件字段名不匹配 #

服务端multer配置的是接收名为files的文件数组：

const upload = multer({storage}).array('files');

但前端FormData中追加的字段名是file，multer无法识别对应字段，因此不会处理文件上传，最终导致req.files为空，前端收到空数据。

修复步骤 #

1. 统一前后端字段名 #

修改前端FileUploader组件中FormData的字段名，与服务端保持一致：

const onSubmit = (e) => { 
    e.preventDefault();

    const data = new FormData();

    for(let i = 0; i < files.length; i++) {
        // 将'file'改为'files'，匹配服务端multer配置的字段名
        data.append('files', files[i]);
    }

    axios.post('//localhost:4000/filesAPI/upload', data)
        .then((response) => {
            toast.success('Upload Success');
            onSuccess(response.data)
        })
        .catch((err) => {
            toast.error('Upload Error')
        })
};

2. 确保上传目录存在 #

服务端multer指定的上传目录myUploads如果不存在，会导致文件无法写入。可以手动在服务端根目录创建该文件夹，或者在storage配置中自动创建目录：

const fs = require('fs');
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        const dir = "myUploads";
        // 检查目录是否存在，不存在则创建
        if (!fs.existsSync(dir)) {
            fs.mkdirSync(dir);
        }
        cb(null, dir);
    },
    filename: (req, file, cb) => {
        cb(null, Date.now() + '-' + file.originalname)
    }
});

3. 排查路由冲突 #

服务端同时注册了app.use('/filesAPI', require('./Routes/FilesRoutes'))和app.post('/filesAPI/upload')，如果FilesRoutes中也存在/upload路由，会导致请求处理冲突。可以暂时注释掉app.use('/filesAPI', require('./Routes/FilesRoutes'))进行测试，或者确保两个路由逻辑不重复。

4. 优化前端状态处理（可选） #

e.target.files是FileList类数组对象，转成数组后操作更稳妥：

const onInputChange = (e) => { 
    setFiles([...e.target.files]);
};

验证修复 #

1. 重启服务端，确认myUploads目录已存在。
2. 选择文件提交后，查看myUploads目录是否有文件生成。
3. 控制台打印response.data，确认返回的文件信息不为空。

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