Multer 一直给我 undefined

Question

我想使用 Multer 将图像文件上传到我的节点服务器。代码很简单，我是从 Multer 的文档中复制过来的。我花了一整天的时间来解决这个问题，它总是回来给我 undefined for using ajax to send the image.

使用表格确实有效：

不过，我很好奇有没有人成功使用ajax方式发送文件。

HTML

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

当用户点击按钮并选择文件时，我只显示文件信息，并使用ajax将数据发送到我的节点路由器 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 未定义。

节点

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;

非常感谢任何帮助。

Answer 1

您的 node.js 代码给出 undefined 没有任何问题，因为 multer 将 file 对象附加到 req 对象。如果数据是任何其他格式，multer 中间件仅解析 'multipart/format-data'，multer 会在不添加 file 对象的情况下传递请求，因此 req.file 未定义。因此，为了让您的代码正常工作，您需要在 'multipart/format-data' 中发送文件。此 link 将有助于发送正确的 ajax 请求 Sending multipart/formdata with jQuery.ajax

希望对您有所帮助:)

Answer 2

您可以使用 FormData 通过 ajax 提交整个表格连同图像。

脚本它使用 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示例代码，可以设置文件名方便访问：

//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     
    });
});

Multer 一直给我 undefined

Multer keeps giving me undefined

node.js

multer

HTML

js

节点