node.js - Multer 一直给我未定义

我希望使用 Multer 将图像文件上传到我的 Node 服务器。代码很简单，我是从 Multer 的文档中复制过来的。我花了一整天的时间来解决这个问题，它总是返回给我 undefined 使用 ajax 发送图像。

使用表单确实有效 : multer - req.file always undefined

但是，我很想知道是否有人成功使用 ajax 方式发送文件。

HTML

<input type="file" id="avatar" name="avatar"/>

当用户单击按钮并选择一个文件时，我只是显示文件信息，并使用 ajax 将数据发送到我的 Node 路由器
http://localhost:8882/profile

js

<script>
//files structure contains data about each file you load in
   document.getElementById('avatar').addEventListener('change', function() {

    var file = this.files[0];
    console.dir(this.files[0]);

    postItem(this.files[0]);

}, false);


function postItem(imageObj) {
  console.log("postItem <----");
    $.ajax({
        type: "POST",
        url: "http://localhost:8882/profile",
        contentType:false,
        cache: false,
        processData: false,
        data:  imageObj,
        success: function(data) {
            //show content
            alert('Success!');
        },
        error: function(jqXHR, textStatus, err) {
            //show error message
            alert('text status ' + textStatus + ', err: '+err);
        }

    }); //ajax
}//postItem()

</script>

在 Node 端，代码直接来自 multer 的文档:
https://www.npmjs.com/package/multer

我不断为 req.file 定义未定义。

Node

var express     = require('express');
var app         = express();
var bodyParser  = require('body-parser');
var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })

app.post('/profile', upload.single('avatar'), function (req, res, next) {
    console.log("------ /profile --------");

    if(req) {
        console.dir(req.file);
    }

    console.log("------------------------");
    res.send({"message":"ok"});
});

app.listen(8882);
console.log("index.js - listening on port " + 8882);
exports.app = app;

将不胜感激任何帮助。

最佳答案

您可以通过 ajax 使用 FormData 提交整个表单和图像。

脚本 它使用 jQuery:

$(function(){
   $('form').submit(function(e){

      //formData sets: multipart/form-data
      var formData = new FormData($(this)[0]);
      $.ajax({
          type:'POST',
          url:'http://localhost:3000/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();
    });
})();

HTML 表单 示例代码:

<form>
    <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>

Node.Js Sample Code，可以设置文件名方便访问:

//file upload module
const storage = multer.diskStorage({
    destination :function(req,file,cb){
        cb(null,'./uploads');
    },
    filename : function(req,file,cb){
        cb(null,req.file.originalname+'.jpg');
    }
});

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

app.post('/uploads',upload,(req,res)=>{

    res.json({
     "fileName":req.file.originalname,
     "userName":req.body.userName,
     "phoneNumer":req.body.phoneNumber
    });
});

关于node.js - Multer 一直给我未定义，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36197196/