javascript - Uploading image and text using multer in Node JS - Stack Overflow

admin管理员组

文章数量:1387342

I'm using body-parser, express and multer in my NodeJS app. I need to upload Image and few text fields in signup form. I'm using multer for this, I tried exactly the same thing suggested here

But I get empty object in req.body. Files are being created in the destination folder, but req.files.forEach methods logs empty result.

Here is my code:

Html front end code

         <form id="form" enctype="multipart/form-data" action="/profile"  method="post" >

           <label>Name</label>
           <input type="text" placeholder=" Name" name="name" id="name" class="form-control">

           <label>Logo</label>
           <input type="file" placeholder="Logo" name="logo" id="logo" class="form-control">

           <button id="addform" type="submit" class="btn btn-primary">Add Profile</button>


        </form>

Server Side Code:

    app.post('/profile', function(req, res) {

      var storage = multer.diskStorage({
              destination: __dirname+'/file/uploads/'
          });
     var upload = multer({ storage : storage}).any();

          upload(req,res,function(err) {
              if(err) {
                  console.log(err);
                  return res.end("Error uploading file.");
              } else {
                 console.log(req.body);
                 console.log(req.files);
                 req.files.forEach( function(f) {
                   console.log(f);
                   // and move file to final destination...  
                 });
                res.end("File has been uploaded");
              }
              });

    });

Log output in Node:

{}
[]

I'm using body-parser, express and multer in my NodeJS app. I need to upload Image and few text fields in signup form. I'm using multer for this, I tried exactly the same thing suggested here

But I get empty object in req.body. Files are being created in the destination folder, but req.files.forEach methods logs empty result.

Here is my code:

Html front end code

         <form id="form" enctype="multipart/form-data" action="/profile"  method="post" >

           <label>Name</label>
           <input type="text" placeholder=" Name" name="name" id="name" class="form-control">

           <label>Logo</label>
           <input type="file" placeholder="Logo" name="logo" id="logo" class="form-control">

           <button id="addform" type="submit" class="btn btn-primary">Add Profile</button>


        </form>

Server Side Code:

    app.post('/profile', function(req, res) {

      var storage = multer.diskStorage({
              destination: __dirname+'/file/uploads/'
          });
     var upload = multer({ storage : storage}).any();

          upload(req,res,function(err) {
              if(err) {
                  console.log(err);
                  return res.end("Error uploading file.");
              } else {
                 console.log(req.body);
                 console.log(req.files);
                 req.files.forEach( function(f) {
                   console.log(f);
                   // and move file to final destination...  
                 });
                res.end("File has been uploaded");
              }
              });

    });

Log output in Node:

{}
[]

• javascript
• node.js
• express
• multer

Share Improve this question Follow edited Oct 10, 2020 at 4:40 Aryan 3,63855 gold badges2323 silver badges4646 bronze badges asked Sep 30, 2017 at 12:56 AnirudhAnirudh 3,44855 gold badges8282 silver badges133133 bronze badges 4

• I have copied the exact code and tried it. And everything is working fine with the body and the file being logged to the console. So, maybe the problem with some other code? a middleware maybe? hope this helps. – madllamas Commented Sep 30, 2017 at 13:25
• is your isssue resolved? – Sagar Commented Oct 5, 2017 at 11:06
• Yes, actually I forgot to add '#' while referencing button click. – Anirudh Commented Oct 5, 2017 at 14:09
• Please mark it as answer. – Sagar Commented Sep 2, 2019 at 4:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Try moving your Multer outside of the req body and try including filename parameter. I have modified your code.

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

var upload = multer({ storage: storage })

//passing multer as middleware
app.post('/profile',upload.any(), function(req, res) {
   console.log(req.body)


 });

Please recheck your form and make sure you have added name attribute to your input fields. I encountered same issue, and similarly was trying to find, but when reviewed multer documentation and found that it doesn't block req.body than I checked my form and found my other fields were not having name attribute only id was there.

本文标签： javascriptUploading image and text using multer in Node JSStack Overflow