Question

我目前正在尝试为我的应用程序实现文件上传，其中我使用ReactJS，node.js使用express，以及MongoDB和mongoose。我正在使用multer中间件进行文件上载，但是，尽管在SO上查看所有类似的问题并且查找它，我似乎无法让它工作。

这是我的React表格：

addUser (event) {

    var formfile = new FormData();
    formfile.append("file", this.state.filesToBeSent);

    axios.post('adduser', 
        JSON.stringify({
          entry: this.state.currname,
          passwrd: this.state.currpasswrd,
          formfile : formfile
        }), {
                headers: {"Content-Type": "application/json"} 
                }
            )
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
}

render() {
    return (
        <form onSubmit={this.addUser} encType="multipart/form-data" >
            <input value={this.state.currname} />
            <input value={this.state.currpasswrd} />
            <input type="file" value={this.state.filesToBeSent} name="file" />
            <button type="submit" >Add</button>
        </form>
    );
}

这是我的node.js文件：

var express = require('express');
var router = express.Router();

var mongoose = require('mongoose');
var User = require('../models/User.js');
var bodyParser = require('body-parser');
var multer = require("multer");
const uuidv4 = require("uuid/v4");

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cd(null, "./uploads");
    },

    filename: (req, file, cb) => {
        const newFilename = `${uuidv4()}${path.extname(file.originalname)}`;
        cb(null, newFilename);
    },
})

const upload = multer({ storage });

router.post("/", upload.single("file"), (req, res) => {
    console.log(req.file + " and exit.");
});

module.exports = router;

我还没有对文本输入做任何事情，因为我想先让文件上传。

我尝试了各种各样的事情，例如在async(req, res)中使用router.post()。我尝试使用x-www-form-urlencoded作为内容类型，并且只发送没有文本输入的文件（我指定formfile作为要发送的数据而没有整个JSON.stringify()，但是，我没有设法让它发挥作用。

有人能在我的代码中发现错误吗？或者是否有人对如何使其发挥作用有任何其他想法？

编辑：在app.js中设置adduser-route：

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var adduser = require('./routes/adduser');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/adduser', adduser);

Answer 1

您是否测试过后端点？您可以使用其他客户端，例如Postman或Insomnia，以确保这不是问题所在。向端点发送POST请求，看它是否被调用。

然后我猜你应该在你的客户端使用“/ adduser”而不是“adduser”如果你的端点暴露在“localhost：port / adduser”。您的代码未显示如何在node.js代码中设置路由。

最后，您可能希望使用更高级别的组件来执行上传，如果您上传较大的文件，可以为您处理多部分。我发现组合react-dropzone + Multer非常方便。

Answer 2

试试这个：

router.post("/", upload.single("formfile"), (req, res) => {
    console.log(req.formfile + " and exit.");
});

文件上传时multer返回undefined

2 个答案: