javascript - Multer uploads different files from differents inputs but from the same form - Stack Overflow

admin管理员组

文章数量:1314997

I looked everywhere on internet but I found nothing that looks like my issue. I'm new to Node.JS and I want to upload, with Multer, two different pictures but from the same form. Here's my form:

<form action="/upload" enctype="multipart/form-data" method="post">
    <label for="pp_uploader">Add a profile picture</label>
    <input type="file" id="pp_uploader" name="pp"/><br>
    <label for="banner_uploader">Add a banner</label>
    <input type="file" id="banner_uploader" name="banner" /><br>
    <input class="sbutton" type="submit" value="Envoyer" />
</form>

Here's the code:

app.post("/upload", function(req, res, fields) {

  const storagepp = multer.diskStorage({
    destination: "data/pp/",
    filename: function(req, file, cb){
      cb(null, sess.surname + sess.name + ".jpg");
    }
  });
  const uploadpp = multer({
    storage: storagepp
  }).single("pp");
  uploadpp(req, res, (err) => {
    if (err) throw err;
  });

  const storagebanner = multer.diskStorage({
    destination: "data/banner/",
    filename: function(req, file, cb){
      cb(null, sess.surname + sess.name + ".jpg");
    }
  });
  const uploadbanner = multer({
    storage: storagebanner
  }).single("banner");
  uploadbanner(req, res, (err) => {
    if (err) throw err;
  });
})

And I'm getting this error:

Error: Unexpected field
    at makeError (/home/quentin/Documents/SocialHorse/node_modules/multer/lib/make-error.js:12:13)
    at wrappedFileFilter (/home/quentin/Documents/SocialHorse/node_modules/multer/index.js:40:19)
    at Busboy.<anonymous> (/home/quentin/Documents/SocialHorse/node_modules/multer/lib/make-middleware.js:114:7)
    at Busboy.emit (events.js:160:13)
    at Busboy.emit (/home/quentin/Documents/SocialHorse/node_modules/busboy/lib/main.js:38:33)
    at PartStream.<anonymous> (/home/quentin/Documents/SocialHorse/node_modules/busboy/lib/types/multipart.js:213:13)
    at PartStream.emit (events.js:160:13)
    at HeaderParser.<anonymous> (/home/quentin/Documents/SocialHorse/node_modules/dicer/lib/Dicer.js:51:16)
    at HeaderParser.emit (events.js:160:13)
    at HeaderParser._finish (/home/quentin/Documents/SocialHorse/node_modules/dicer/lib/HeaderParser.js:68:8)

When I use console.log(fields); I'm getting this: [Function: next]

I also tried to upload only one picture with only one input in my form and it seems to work so I'm probably missing a function which is able to done my work.

I looked everywhere on internet but I found nothing that looks like my issue. I'm new to Node.JS and I want to upload, with Multer, two different pictures but from the same form. Here's my form:

<form action="/upload" enctype="multipart/form-data" method="post">
    <label for="pp_uploader">Add a profile picture</label>
    <input type="file" id="pp_uploader" name="pp"/><br>
    <label for="banner_uploader">Add a banner</label>
    <input type="file" id="banner_uploader" name="banner" /><br>
    <input class="sbutton" type="submit" value="Envoyer" />
</form>

Here's the code:

app.post("/upload", function(req, res, fields) {

  const storagepp = multer.diskStorage({
    destination: "data/pp/",
    filename: function(req, file, cb){
      cb(null, sess.surname + sess.name + ".jpg");
    }
  });
  const uploadpp = multer({
    storage: storagepp
  }).single("pp");
  uploadpp(req, res, (err) => {
    if (err) throw err;
  });

  const storagebanner = multer.diskStorage({
    destination: "data/banner/",
    filename: function(req, file, cb){
      cb(null, sess.surname + sess.name + ".jpg");
    }
  });
  const uploadbanner = multer({
    storage: storagebanner
  }).single("banner");
  uploadbanner(req, res, (err) => {
    if (err) throw err;
  });
})

And I'm getting this error:

Error: Unexpected field
    at makeError (/home/quentin/Documents/SocialHorse/node_modules/multer/lib/make-error.js:12:13)
    at wrappedFileFilter (/home/quentin/Documents/SocialHorse/node_modules/multer/index.js:40:19)
    at Busboy.<anonymous> (/home/quentin/Documents/SocialHorse/node_modules/multer/lib/make-middleware.js:114:7)
    at Busboy.emit (events.js:160:13)
    at Busboy.emit (/home/quentin/Documents/SocialHorse/node_modules/busboy/lib/main.js:38:33)
    at PartStream.<anonymous> (/home/quentin/Documents/SocialHorse/node_modules/busboy/lib/types/multipart.js:213:13)
    at PartStream.emit (events.js:160:13)
    at HeaderParser.<anonymous> (/home/quentin/Documents/SocialHorse/node_modules/dicer/lib/Dicer.js:51:16)
    at HeaderParser.emit (events.js:160:13)
    at HeaderParser._finish (/home/quentin/Documents/SocialHorse/node_modules/dicer/lib/HeaderParser.js:68:8)

When I use console.log(fields); I'm getting this: [Function: next]

I also tried to upload only one picture with only one input in my form and it seems to work so I'm probably missing a function which is able to done my work.

• javascript
• node.js
• express
• image-uploading
• multer

Share Improve this question Follow asked Feb 16, 2018 at 21:33 palmtreesnativepalmtreesnative 2,85533 gold badges1515 silver badges2424 bronze badges 2

• 1 You can try upload.fields() OR upload.any().Hope this will Help!! Ref link - github./expressjs/multer – Full Stack Tutorials Commented Feb 16, 2018 at 22:19
• Thx you, I read the documentation and found the solution with upload.fields() – palmtreesnative Commented Feb 17, 2018 at 9:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Actually, what I wanted to do is to save the two pictures separately in two different folder (which is impossible with Multer) so i found a solution to my problem:

New server-side code:

app.post("/upload", function(req, res, fields) {

  const storage = multer.diskStorage({
    destination: "public/data/",
    filename: function(req, file, cb){
      crypto.randomBytes(20, (err, buf) => {
        cb(null, buf.toString("hex") + path.extname(file.originalname))
      })
    }
  });

  const upload = multer({
    storage: storage
  }).fields([{name: "pp"}, {name: "banner"}]);

  upload(req, res, (err) => {
    if (err) throw err;
  });

});

Hoping it would help some people !

var express = require('express')
var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })

var app = express()

app.post('/profile', upload.single('avatar'), function (req, res, next) {
  // req.file is the `avatar` file
  // req.body will hold the text fields, if there were any
})

app.post('/photos/upload', upload.array('photos', 12), function (req, res, next) {
  // req.files is array of `photos` files
  // req.body will contain the text fields, if there were any
})

var cpUpload = upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', 
maxCount: 8 }])

app.post('/cool-profile', cpUpload, function (req, res, next) { 

 // req.files is an object (String -> Array) where fieldname is the key, and the 
 //value is array of files
 // e.g.
 //  req.files['avatar'][0] -> File
 //  req.files['gallery'] -> Array
 //
 // req.body will contain the text fields, if there were any
})

本文标签： javascriptMulter uploads different files from differents inputs but from the same formStack Overflow