Node.Js multer req.file始终未定义

时间:2017-02-22 13:48:05

标签: javascript node.js multer

我正在尝试使用multer上传文件,但是req.file始终未定义且目标文件夹为空:

服务器

var express = require('express');
var multer  = require('multer')
var app = express();

    var storage = multer.diskStorage({
            destination: function(req, file, cb) {
                cb(null, './public/uploads/'); // Make sure this folder exists
            },
            filename: function(req, file, cb) {
                            console.log(file)
                var ext = file.originalname.split('.').pop();
                cb(null, file.fieldname + '-' + Date.now() + '.' + ext);
            }
        }),
        upload = multer({
            storage: storage
        }).single('avatar');

    app.post('/uploads', upload, (req, res) => {
        console.log('body', req.body);
        console.log('file', req.file);
                res.json("ok")
    });

客户端:

我看过许多答案,但没有任何效果。

      <form id="myform" encrypt="multipart/form-data">
        <label for="userName">Name</label>
        <input type="text" name="userName"/>
        <br>
        <label for="phoneNumber">PhoneNumber</label>
        <input type="text" name="phoneNumber"/>
        <br>
        <label for="file">UploadFile</label>
        <input type="file" name="avatar"/>
        <input type="submit"/>
    </form>

$('#myForm').submit(function(e){

        var formData = new FormData($(this)[0]);
        $.ajax({
            type:'POST',
            url:'uploads',
            data : formData,
            contentType: true,
            processData: false
        }).done(function(data){
            //print response on success
            console.log(data);

        }).fail(function(data) {
              console.log('Error');
          });
        e.preventDefault();
      });

enter image description here 你能告诉我,我做错了吗?

2 个答案:

答案 0 :(得分:1)

为什么要实施$('#myForm').submit(function(e){...})

您的<form>元素中有拼写错误。该属性称为enctype,而不是“加密”。您只需添加method="POST"属性并删除所有javascript并让浏览器上传。

样品:

<form method="POST" action="/uploads" enctype="multipart/form-data">
 .....
</form>

答案 1 :(得分:0)

我发现ajax中的错误我要将内容类型设置为false:

$('#myForm').submit(function(e){

        var formData = new FormData($(this)[0]);
        $.ajax({
            type:'POST',
            url:'uploads',
            data : formData,
            contentType: false, // <-----------------
            processData: false
        }).done(function(data){
            //print response on success
            console.log(data);

        }).fail(function(data) {
              console.log('Error');
          });
        e.preventDefault();
      });

感谢@Marc。