React文件上传异常：添加value属性后文件名不显示，移除后报400错误

问题出在哪 #

1. 文件输入框的value属性误用：file类型的输入框受浏览器安全限制，value只能是空字符串或浏览器生成的伪文件路径，不能直接绑定File对象。你把value={statement}（这里statement应该是存储的File对象）绑上去后，浏览器无法正确更新输入状态，导致选完文件也不显示文件名。
2. 提交时请求体构造错误：去掉value后文件名显示正常，但你可能用了普通JSON格式提交请求，后端无法识别文件数据，所以返回400错误。文件上传必须用multipart/form-data格式的请求体，需要用FormData构造。

正确的前端实现代码 #

1. 定义状态存储文件和字段

import { useState } from 'react';

function UploadForm() {
  // 存储选中的文件
  const [statement, setStatement] = useState(null);
  // 示例：其他表单字段
  const [bankName, setBankName] = useState('');

2. 修改文件输入框与事件处理

<div className="control">
  <input
    type="file"
    className="input"
    onChange={handleFileChange}
    placeholder="Bank Name"
    // 无需设置value，浏览器会自动显示选中的文件名
  /> 
</div>

const handleFileChange = (e) => {
  // 获取选中的第一个文件
  const selectedFile = e.target.files[0];
  if (selectedFile) {
    setStatement(selectedFile);
  }
};

3. 提交表单时构造FormData

const handleSubmit = async (e) => {
  e.preventDefault();
  if (!statement) {
    alert('请选择要上传的文件');
    return;
  }

  const formData = new FormData();
  // 追加文件，键名要和后端接收的字段名一致
  formData.append('statement', statement);
  // 追加其他字段
  formData.append('bankName', bankName);

  try {
    const res = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
      // 不要手动设置Content-Type，浏览器会自动添加带boundary的multipart/form-data头
    });

    if (res.ok) {
      console.log('上传成功');
      // 重置表单状态
      setStatement(null);
      setBankName('');
    } else {
      console.error('上传失败，请检查后端配置');
    }
  } catch (err) {
    console.error('请求出错:', err);
  }
};

Express后端接收文件示例（用multer） #

首先安装依赖：npm install multer

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

// 配置文件存储路径（需提前创建uploads文件夹）
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  filename: (req, file, cb) => {
    // 自定义文件名避免重复
    cb(null, Date.now() + '-' + file.originalname);
  }
});

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

// 接收单个文件，参数对应前端FormData的键名
router.post('/upload', upload.single('statement'), (req, res) => {
  // req.file 是上传的文件信息
  // req.body 是其他表单字段，比如req.body.bankName
  if (!req.file) {
    return res.status(400).json({ msg: '未上传文件' });
  }
  res.status(200).json({ msg: '上传成功', file: req.file });
});

module.exports = router;

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