node.js - 用nodejs上传文件，multer，react

Question

我正在尝试从前端上传文件（在反应中）并保存到服务器中的文件系统。当我向服务器发出请求时，请求成功，但文件没有保存到我的文件系统中。当我控制台记录 req.file 时，我得到一个“未定义”（在服务器端）。

服务器.js

const express = require('express')
const app = express()
const port = 5000
const fs = require('fs');
const path = require('path');
const childProcess = require('child_process');
//const { request } = require('express');
const multer = require("multer");

app.use(express.bodyParser({limit: '500000mb'}));


const storage = multer.diskStorage({
    destination: function(req, file, cb){
        cb(null, "upload/");
    },
    filename: function(req, file, cb){
        console.log(req);
        cb(null, "test.png");
    }
})

const upload = multer({storage});

app.post("/model", upload.single("file"), (req, res) => {
    console.log(req.files);
    res.send("files received");
})


app.use(express.static('build'));

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
});

addBtn.js

import React, { Component } from "react";
import axios from 'axios';

class AddBtn extends Component{
   
    render(){
        return(
            <div className="form">
                <form method="post" enctype="multipart/form-data" action="/model">
                    <input type="file" name="file" />
                    <input type="submit" value="upload" />
                </form>
            </div>
        );
    }
}

export default AddBtn;

当我 console.log(req.files) 我得到：

{ file:
   { fieldName: 'file',
     originalFilename: 'requerimento.png',
     path: '/tmp/37648-1b0v335.qt09.png',
     headers:
      { 'content-disposition': 'form-data; name="file"; filename="requerimento.png"',
        'content-type': 'image/png' },
     ws:
      WriteStream {
        _writableState: [WritableState],
        writable: false,
        _events: [Object],
        _eventsCount: 2,
        _maxListeners: undefined,
        path: '/tmp/37648-1b0v335.qt09.png',
        fd: null,
        flags: 'w',
        mode: 438,
        start: undefined,
        autoClose: true,
        pos: undefined,
        bytesWritten: 30082,
        closed: true },
     size: 30082,
     name: 'requerimento.png',
     type: 'image/png' } }

当我在 filename: 函数中使用 console.log 时，它不会在屏幕上打印任何内容

我遵循本教程https://www.youtube.com/watch?v=-3ePnBWFH9o并且它有效，但是当我尝试在我的代码（使用反应）中实现它时它失败了，我不知道为什么。谁能告诉我我做错了什么？

标签： node.jsreactjsexpressfile-uploadmulter