当我将文件 reactjs 发送到快递服务器时得到空值答案

【问题标题】：Getting null when I send file reactjs to express server当我将文件 reactjs 发送到快递服务器时得到空值
【发布时间】：2022-11-01 16:12:24
【问题描述】：

我正在尝试使用 react js 发送文件来表达服务器。但是当我从前端发送一个文件时，我在服务器中得到了一个空值。

前端：我有控制台登录到前端，一切都可以进入前端。

const ProductImport = function () {
    const [file, setFile] = useState<any>();
    const [isLoading, setIsLoading] = useState<boolean>(false);
    const [fileName, setFileName] = useState("");

    const saveFile = (e) => {
        setFile(e.target.files[0]);
        setFileName(e.target.files[0].name);
    };
    const uploadFile = async (e: any) => {
        e.preventDefault()
        const formData = new FormData();
        formData.append("file", file);
        formData.append("fileName", fileName);

        console.log(file);
        console.log(fileName);

        fetch('http://localhost:5000/upload-excel', {
            method: 'POST',
            body: formData
        })
            .then(response => response.json())
            .then(data => {
                if (data.insertedId) {
                    alert('excel Added')
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });

    };
    return (
        <form onSubmit={uploadFile}>
            <label htmlFor="formGroupExampleInput" className="form-label">Example label</label>
            <input type="file" onChange={saveFile} />
            <button type="submit">Upload</button>
        </form>
    )
}

后端：问题出在后端，我得到了 null

//MIddleware
app.use(cors())
app.use(express.json())
app.use(cors());
app.use(fileupload());
app.use(express.static("files"));
app.use(bodyParser.json({ limit: "50mb" }));
app.use(bodyParser.urlencoded({ limit: "50mb", extended: true, parameterLimit: 50000 }));

     app.post("/upload-excel", async (req, res) => {
            const file = req.files;
            console.log(file);
        });

前端控制台：

后端控制台：

【问题讨论】：

标签： javascript node.js reactjs file file-upload

【解决方案1】：

Express 默认无法解析 formData，您必须使用 3rd 方包，如multer

你将不得不做一些改变，然后安装 multer npm i multer

const multer  = require('multer')
const upload = multer({ dest: 'path/to/save/file' })

 app.post("/upload-excel", upload.single('excel-file'), async (req, res) => {
            const file = req.file;
            console.log(file);
        });

【讨论】：

仍然为空

【解决方案2】：

我有同样的问题。原来只需要引用正确的项目

    app.post("/upload-excel", async (req, res) => {
        const file = req.files.file;
        console.log(file);

        //for people that want to write to disk 
        require("fs").writeFile(somepath, file.data, function(err) {
          console.log(err);
        });
});

【讨论】：