从不同的输入字段使用 multer 上传多个图像文件

Question

我无法使用 Multer 从两个不同的输入标签上传两张图片。

这是html表格的代码

<form action="/upload" method="post" enctype="multipart/form-data">
    <h1>Upload Image 1</h1>
    <input name="photo1" type="file" />
    <img id="output_image" />

    <h1>Upload Image 2</h1>
    <input name="photo2" type="file" />
    <img id="output_image1" />
  
    <button type="submit">Upload</button>
</form>

这是nodejs文件的代码

const upload = multer({ dest: 'uploads/' })

app.post('/upload', upload.fields([
    { name: 'photo1', maxCount: 1},
    { name: 'photo2', maxCount: 1}
]), (req, res, next) => {
    console.log(req.file);
    next();
});

但是请求对象始终未定义。我尝试按照文档进行操作，但没有解决这个问题。

之前我尝试上传一个文件，但确实成功了。为此，我删除了表格的以下部分

<h1>Upload Image 2</h1>
<input name="photo2" type="file" />
<img id="output_image1" />

这是与文档中相同的 nodejs 文件

const upload = multer({ dest: 'uploads/' })

app.post('/upload', upload.single('photo1'), (req, res, next) => {
    console.log(req.file);
    next();
});

我找不到这里的错误。是否无法使用 multer 从不同的输入字段拍摄两张图像？如有任何建议，我们将不胜感激。

Answer 1

使用以下任一方法

这对你有帮助吗.any() 接受通过网络传输的所有文件。文件数组将存储在 req.files.

警告：确保您始终处理用户上传的文件。切勿将 multer 添加为全局中间件，因为恶意用户可能会将文件上传到您没有预料到的路径。仅在处理上传文件的路由上使用此功能。

我是从[这里][1]说的。

或者对于多个文件使用这个

而不是 upload.single('image') 你想做 upload.array('image')，然后看看 req.files instead of req.file.

3)

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

});

更多解释https://codingstatus.com/upload-multiple-files-using-multer-in-node-js-and-express/

从不同的输入字段使用 multer 上传多个图像文件

Uploading multiple image files with multer from different input fields

node.js

express

multer