React前端向Express后端上传文件失败排查：后端Postman可正常运行

核心问题：字段名不匹配 #

你的后端Multer配置中，upload.single("uploaded_file")明确指定接收的文件字段名为uploaded_file，但前端FormData里却用了'File'作为键名，这直接导致后端无法识别上传的文件，是上传失败的主要原因。

修复步骤 #

1. 修正FormData字段名
   将前端handleSubmit方法里的字段名改为后端要求的uploaded_file：

   formData.append('uploaded_file', state)
   

2. 添加空值校验（可选）
   避免用户未选择文件就提交的无效请求，在handleSubmit开头增加判断：

   if (!state) {
       console.log('请选择要上传的文件');
       return;
   }
   

3. 解决跨域拦截（潜在问题）
   Postman不受浏览器同源策略限制，但前端请求会被拦截。如果后端未配置CORS，需安装并启用cors中间件：

   • 安装依赖：npm install cors
   • 在Express主文件中添加配置：

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

修改后的完整前端代码 #

import React, { useState } from 'react'

const FileUpload = () => {
    const [selectedFile, setSelectedFile] = useState(null) // 明确初始值

    const handleChange = (e)=>{
        setSelectedFile(e.target.files[0])
    }
    
    const handleSubmit = (e)=>{
        e.preventDefault()
        if (!selectedFile) {
            console.log('请选择要上传的文件');
            return;
        }
        const formData = new FormData();
        formData.append('uploaded_file', selectedFile) // 修正字段名

        fetch("http://localhost:8080/file/upload",{
            method:"POST",
            body: formData
        })
        .then(res => res.text()) // 解析响应内容
        .then(data => console.log(data))
        .catch(err => console.log(err))
    }

  return (
    <div>
        <h1>Upload File</h1>
        <form onSubmit={handleSubmit}> {/* 直接绑定form的onSubmit更规范 */}
            <div>
                <input type="file" onChange={handleChange} name="uploaded_file" />
                <button type="submit">submit</button>
            </div>
        </form>
    </div>
  )
}

export default FileUpload

额外优化建议 #

• 后端fs.rename存在文件覆盖风险，若uploads目录已有同名文件会被直接替换，可给文件名添加时间戳或随机字符串避免冲突。
• 后端建议返回JSON格式响应，方便前端统一处理，比如：res.json({ status: 'success', message: '文件上传成功' })。

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