req.file 未定义（multer，node.js）答案

【问题标题】：req.file is undefined (multer, node.js)req.file 未定义（multer，node.js）
【发布时间】：2017-11-24 09:25:39
【问题描述】：

我一直在尝试上传图片一段时间，但 req.file 仍未定义。有人知道为什么吗？

this is my page. I am able to pick an image when I click the '+' glyphicon, but on the server side req.file is still empty.

EJS 文件

input[type="file"] 和 input[type="submit"] 有 css 样式 display: none

<form action="/profile/addProfilepicture" method="post" id="form" enctype="multipart/form-data">
            <span id="upload" class="glyphicon glyphicon-plus-sign"></span>
            <label for="profilePic"></label>
            <input id=profilePic type='file'  />
            <input type="submit">
        </form>

        <img class="profileImg"
             src="<%="images/pexels-photo-370799.jpeg"%>"
             alt="fail">

客户端 JS 文件

当我单击“+”字形图标时，它可以让我选择一个图像。当我这样做时，这将触发表单提交并发送一个发布请求。

   $("#upload").on('click',function() {
        $("input[type='file']").click();
    });

    $('input[type="file"]').change(function (e) {
       $("input[type='submit']").click()
    });

服务器端 JS

在服务器端它停在：

TypeError：无法读取未定义的属性“文件名” 在 C:\Users\Tijl Declerck\Desktop\projects\digitalNomadApp\routes\profile.js:27:38 在 Immediate._onImmediate (C:\Users\Tijl Declerck\Desktop\projects\digitalNomadApp\node_modules\multer\lib\make-middleware.js:53:37) 在 runCallback (timers.js:793:20) 在 tryOnImmediate (timers.js:751:5) 在 processImmediate [as _immediateCallback] (timers.js:722:5)

我试过的 console.logs 给了我这个：req.body 返回一个空对象，req.file 返回未定义。

var express = require('express');
var router = express.Router();
var multer  = require('multer');
var User = require('../models/Users');

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './public/uploads/profilePics')
    },
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now())
    }
});

var upload = multer({ storage: storage }).single('myImage');


router.post('/addProfilePicture', function (req, res) {

    var profilePicUrl = '';
    upload(req, res, function (err) {
        if (err) {
            // An error occurred when uploading

        } else {
            console.log(req.file);
            profilePicUrl = req.file.filename;

            User.update({username: req.user.username}, {'profilePic.uploaded': true, 'profilePic.link': profilePicUrl}, function(err, doc){
            console.log('THIS IS DONE')
            });
        }
    });
});

【问题讨论】：

标签： javascript jquery node.js express multer

【解决方案1】：

你必须为你的文件输入提供一个名称，它应该与单个方法的名称相匹配，这是来自 multer doc：

.single(字段名)

接受名称为 fieldname 的单个文件。单个文件将是存储在 req.file 中。

这没有很好的记录，但字段名是指输入名称属性

EJS 文件

<input id='profilePic' name='myImage' type='file'  />

快递

...
var upload = multer({ storage: storage }).single('myImage');
...

【讨论】：

是的，就是这样。谢谢楼主！