React前端上传CSV文件至Express后端无响应，求排查解决

前端问题分析与修复 #

1. 文件获取错误：提交函数saveStmnt中，e.target.files[0]是从表单提交事件中获取，而非文件输入框的文件，应该使用之前保存在state中的statement。
2. 请求头设置错误：上传FormData时，手动设置'Content-Type': 'application/json'会导致后端无法解析表单数据，需移除该配置，让axios自动生成正确的multipart/form-data请求头。

修正后的React前端代码 #

const AddCreditCardStmnt = () => {
    const [bankName, setBankname] = useState("");
    const [creditCardNo, setCreditcardno] = useState("");
    const [statement, setStatement] = useState(null);
    const navigate = useNavigate();

    const changeHandler = (e) => {
        setStatement(e.target.files[0]);
    };

    const saveStmnt = async (e) => {
        e.preventDefault();
        if (!statement) {
            console.log("请选择文件");
            return;
        }
        const formData = new FormData();
        formData.append('bankName', bankName);
        formData.append('creditCardNo', creditCardNo);
        formData.append('file', statement);

        try {
            await axios.post("http://localhost:3001/statements", formData);
            navigate("/");
        } catch (error) {
            console.error("上传失败:", error);
        }
    };

    return (
        <div className="columns mt-5">
            <div className="column is-half">
                <form onSubmit={saveStmnt}>
                    <div className="field">
                        <label className="label">Bank Name</label>
                        <div className="control">
                            <div className="select is-fullwidth">
                                <select value={bankName} onChange={(e) => setBankname(e.target.value)}>
                                    <option value="citi">Citi</option>
                                    <option value="americanexpress">American Express</option>
                                    <option value="wellsfargo">Wells Fargo</option>
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div className="field">
                        <label className="label">Credit Card Number</label>
                        <div className="control">
                            <input
                                type="text"
                                className="input"
                                value={creditCardNo}
                                onChange={(e) => setCreditcardno(e.target.value)}
                                placeholder="Credit Card Number"/>
                        </div>
                    </div>
                    <div className="field">
                        <label className="label">Statement</label>
                        <div className="control">
                            <input
                                type="file"
                                className="input"
                                onChange={changeHandler}
                                accept=".csv"
                            />
                        </div>
                    </div>
                    <div className="field">
                        <div className="control">
                            <button type="submit" className="button is-success">
                                Save
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    );
};

后端问题分析与修复 #

1. 路由配置错误：在saveStmnt函数内新建Express Server是错误逻辑，应在已有的Express应用中配置路由，同时路由路径需添加前置斜杠/statements。
2. Multer配置未生效：定义了diskStorage但未使用，而是用了dest选项，导致自定义存储配置失效。
3. 跨域问题：前后端端口不同，需添加CORS中间件允许跨域请求。
4. 函数结构错误：export const saveStmnt不应包含Server初始化逻辑，应作为路由处理函数整合到主服务器文件中。

修正后的Express后端代码 #

首先安装依赖：

npm install multer cors

主服务器文件（如server.js）：

const express = require('express');
const multer = require('multer');
const cors = require('cors');
const path = require('path');
const fs = require('fs');

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

// 配置Multer存储
const storage = multer.diskStorage({
    destination: (req, file, callBack) => {
        const uploadDir = path.join(__dirname, 'data/uploads');
        // 确保上传目录存在
        if (!fs.existsSync(uploadDir)) {
            fs.mkdirSync(uploadDir, { recursive: true });
        }
        callBack(null, uploadDir);
    },
    filename: (req, file, callBack) => {
        callBack(null, `${file.originalname}`);
    }
});

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

// 配置文件上传路由
app.post('/statements', upload.single('file'), (req, res, next) => {
    const file = req.file;
    if (!file) {
        const error = new Error('未选择文件');
        error.httpStatusCode = 400;
        return next(error);
    }
    // 获取表单其他字段
    const { bankName, creditCardNo } = req.body;
    console.log('银行名称:', bankName);
    console.log('信用卡号:', creditCardNo);
    console.log('上传文件名:', file.filename);
    res.send({ message: '文件上传成功', fileInfo: file });
});

const PORT = 3001;
app.listen(PORT, () => {
    console.log(`服务器运行在端口 ${PORT}`);
});

验证步骤 #

1. 启动后端服务器：node server.js
2. 启动前端应用，选择CSV文件并填写表单后点击保存，检查Chrome网络面板是否出现POST /statements请求，后端控制台是否输出文件及表单字段信息。

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