multer返回未定义的文件上传答案

【问题标题】：File upload with multer returning undefinedmulter返回未定义的文件上传
【发布时间】：2018-01-17 08:02:09
【问题描述】：

我目前正在尝试为我的应用程序实现文件上传，其中我使用 ReactJS、带有 express 的 node.js 以及 MongoDB 和猫鼬。我正在使用 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;

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

我尝试了很多东西，比如在router.post() 中使用async(req, res)。我尝试使用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);

【问题讨论】：

您的后端代码是正确的，添加console.log(req.file) ...查看您是否从前端接收文件.....看起来前端有一些错误。
不太明白，我的函数里已经加了console.log(req.file)了，还是按你说应该加在哪里？
代码还是不够，你没有显示./routes/adduser.js的完整内容，可能有问题，需要返回router对象。我还建议将 app.use("/adduser") 放在 app.use(express.static(path.join(__dirname, 'public'))); 之前当你设置你的路线时。
@PhilippeLeefsma 我编辑了我的问题以显示 ./routes/adduser 的完整内容。非常感谢，我马上试试
看起来不错...用 app.use(express.static, ...) 交换 app.use('/adduser', adduser) 有帮助吗？

标签： javascript node.js reactjs express multer

【解决方案1】：

您是否测试了您的帖子端点？您可以使用诸如Postman 或Insomnia 之类的REST 客户端，以确保这不是问题所在。向端点发送一个 POST 请求，看看它是否被调用。

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

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

【讨论】：

所以，我测试了 post 端点，我收到了 404 not found 错误消息。这对我来说似乎很奇怪，因为当我只有文本输入时，这种连接更早地工作了。当我第一次开始使用“/adduser”的应用程序时，它不起作用，因此我切换到“adduser”。我将更新我的问题以包括我如何设置路线。

【解决方案2】：

试试这个：

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

【讨论】：

【解决方案3】：

我认为标题应该是：

{"Content-Type": "multipart/form-data"}

而不是应用程序/json。

【讨论】：