Multer 从不同的输入但从相同的表单上传不同的文件

Question

我在 Internet 上到处查看，但没有发现任何看起来像我的问题。我是 Node.JS 的新手，我想使用 Multer 上传两张不同的图片，但格式相同。这是我的表格：

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

代码如下：

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

我收到了这个错误：

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)

当我使用 console.log(fields); 时，我得到这个：[Function: next]

我还尝试只上传一张图片，在我的表单中只有一个输入，它似乎可以工作，所以我可能缺少一个能够完成我的工作的功能。

Answer 1

实际上，我想做的是将两张图片分别保存在两个不同的文件夹中（这在 Multer 中是不可能的）所以我找到了解决问题的方法：

新server-side代码：

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

});

希望对某些人有所帮助！

Answer 2

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

Multer 从不同的输入但从相同的表单上传不同的文件

Multer uploads different files from differents inputs but from the same form

javascript

image-uploading

node.js

express

multer