Multer 一直给我 undefined

Question

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

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

不过，我很想知道是否有人成功使用 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'。此链接将有助于发送正确的 ajax 请求Sending multipart/formdata with jQuery.ajax

希望对你有帮助:)

Answer 2

您可以使用FormDatavia 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     
    });
});