如何使用ReactJS导入Excel文件并保存到项目本地目录

你的前端代码仅能实现文件选择操作，浏览器环境下的JavaScript没有权限直接写入服务器/项目仓库的本地文件系统，必须配合后端接口完成文件存储。以下是完整实现方案：

1. 修改前端React代码 #

添加文件上传逻辑，将选中的Excel文件通过POST请求发送到后端接口：

import { useState } from 'react';

function ImportTemplate() {
    const [selectedFile, setSelectedFile] = useState();
    const [isFilePicked, setIsFilePicked] = useState(false);
    
    const changeHandler = (event) => {
        setSelectedFile(event.target.files[0]);
        setIsFilePicked(true);
    };

    const handleUpload = async () => {
        if (!selectedFile) return;
        
        const formData = new FormData();
        formData.append('excelFile', selectedFile);
        
        try {
            const response = await fetch('/api/upload-excel', {
                method: 'POST',
                body: formData
            });
            
            if (response.ok) {
                alert('文件保存成功');
                setIsFilePicked(false);
                document.querySelector('input[type="file"]').value = '';
            } else {
                alert('文件保存失败');
            }
        } catch (error) {
            console.error('上传出错:', error);
            alert('上传过程中发生错误');
        }
    };

    return (
        <div style={{ backgroundColor: "red", height: "100vh", display: 'flex', flexDirection: 'column', gap: '1rem', padding: '2rem' }}>
            <input type="file" name="file" accept=".xlsx, .xls" onChange={changeHandler} />
            {isFilePicked && <button onClick={handleUpload}>保存文件到项目仓库</button>}
        </div>
    );
}

export default ImportTemplate;

2. 后端Node.js/Express实现 #

创建后端接口接收文件，并保存到项目仓库内的指定文件夹（比如./uploads）：

首先安装依赖：

npm install express multer

编写后端代码（示例文件名server.js）：

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

const app = express();
const PORT = 3001;

// 配置文件存储规则
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        // 指定项目下的uploads文件夹为存储目录，需提前手动创建该文件夹
        const uploadPath = path.join(__dirname, 'uploads');
        cb(null, uploadPath);
    },
    filename: (req, file, cb) => {
        // 保留原文件名，可根据需求自定义命名规则
        cb(null, file.originalname);
    }
});

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

// 上传接口
app.post('/api/upload-excel', upload.single('excelFile'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('未选择文件');
    }
    res.status(200).send('文件已成功保存到项目仓库');
});

app.listen(PORT, () => {
    console.log(`后端服务运行在 http://localhost:${PORT}`);
});

关键说明 #

• 前端通过FormData封装文件，发送POST请求到后端接口
• 后端使用multer中间件处理文件上传，配置存储路径为项目仓库内的文件夹
• 需提前在项目根目录创建uploads文件夹，确保后端具备写入权限
• 可根据需求添加文件格式校验、自定义文件名、存储路径等扩展逻辑

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