希望使用 express-fileupload 上传多张图片

Question

希望上传多个图像，我可以像在代码中一样单独完成，但现在我希望所有图库图像都在一个输入中发送，并支持多个上传而不限制数字这是我的代码。

 router.post('/add-product', isAdmin, function (req, res, next) {
    console.log(req.files);
    errorMsg = req.flash('error')[0];
    successMsg = req.flash('success')[0];
    var imageFile, imageFile1, imageFile2, imageFile3;

    if (!req.files) {
        res.send('No files were uploaded.');
        return;
    }
    imageFile = req.files.imageFile;
    imageFile1 = req.files.imageFile1;
    imageFile2 = req.files.imageFile2;
    imageFile3 = req.files.imageFile3;
    imageFile.mv('public/images/' + req.user._id + req.body.code + req.body.name + '.png', function (err) {
        if (err) {
            res.status(500).send(err);
        }
    });

    imageFile1.mv('public/images/' + req.user._id + req.body.code + req.body.name + 'g1' + '.png', function (err) {
        if (err) {
            res.status(500).send(err);
        }
    });

    imageFile2.mv('public/images/' + req.user._id + req.body.code + req.body.name + 'g2' + '.png', function (err) {
        if (err) {
            res.status(500).send(err);
        }
    });

    imageFile3.mv('public/images/' + req.user._id + req.body.code + req.body.name + 'g3' + '.png', function (err) {
        if (err) {
            res.status(500).send(err);
        }
    });
    product = new Product({
        name: req.body.name,
        code: req.body.code,
        Wifi: req.body.Wifi,
        campfire: req.body.campfire,
        Pool: req.body.Pool,
        parking: req.body.parking,
        title: req.body.title,
        Duration: req.body.Duration,
        Product_Group: req.body.Product_Group,
        price: parseFloat((req.body.price * 100).toFixed(2)),
        description: req.body.description,
        shippable: req.body.shippable,
        taxable: req.body.taxable,
        category: req.body.category,
        Longitude: req.body.Longitude,
        Latitude: req.body.Latitude,
        imagePath: '/images/' + req.user._id + req.body.code + req.body.name + '.png',
        imagePathg1: '/images/' + req.user._id + req.body.code + req.body.name + 'g1' + '.png',
        imagePathg2: '/images/' + req.user._id + req.body.code + req.body.name + 'g2' + '.png',
        imagePathg3: '/images/' + req.user._id + req.body.code + req.body.name + 'g3' + '.png',
    });
    console.log(product);
    product.save(function (err) {
        if (err) {
            req.flash('error', 'Error: ' + err.message);
            return res.redirect('/admin/products');
        }
        //console.log("product: " + product);
        return res.redirect('/admin/products');

    });
});

前面部分与下面的代码 html 部分相同，不同图像的输入不同，但现在希望为同一个节点进行多个输入，支持该功能的节点模块是 express-fileupload

<div class="form-group">
        <ul class="list-group">
            <li class="list-group-item">
                <label for='imageFile'>Display Image</label>
                <input type='file' name='imageFile' class='form-control'>
            </li>
        </ul>
    </div>
    <div class="form-group">
        <ul class="list-group">
            <li class="list-group-item">
                <label for='imageFile1'>Gallery1</label>
                <input type='file' name='imageFile1' class='form-control'>

            </li>
        </ul>
    </div>
    <div class="form-group">
        <ul class="list-group">
            <li class="list-group-item">
                <label for='imageFile2'>Gallery2</label>
                <input type='file' name='imageFile2' class='form-control'>

            </li>
        </ul>
    </div>
    <div class="form-group">
        <ul class="list-group">
            <li class="list-group-item">
                <label for='imageFile3'>Gallery3</label>
                <input type='file' name='imageFile3' class='form-control'>

            </li>
        </ul>
    </div>

Answer 1

你可以这样做

    if(req.files){

        const file = req.files.filename;
        for(let i = 0 ; i < file.length; i++){

            file[i].mv('./upload/'+file[i].name, function (err){

                if(err){

                    res.send(err);

                }

            })

        }
       res.send('files uploaded);

    }

一定要把上传目录改成你的目录

Answer 2

前端：

<form method="POST" action=".../add-product" enctype="multipart/form-data">
     <input multiple type="file" name="images" />
     <input type="submit" />
</form> 

后端：

  app.post('/add-product', async (req, res) => {
    if (!req.files) {
        return res.send({
            success: false,
            message: 'No image uploaded!'
        });
    }

    const file = req.files.images;
    const data = [];

    function move(image) {
        try { image.mv('public/images/' + image.name); }
        catch (e) {
            return res.send({
                success: false,
                message: 'upload error'
            });
        }
        
        data.push({
            name: image.name,
            mimeType: image.mimetype,
            size: image.size
        });
    }

    Array.isArray(file) ? file.forEach((file) => move(file)) : move(file);
    return res.send({ success: true, message: 'uploaded successfully', data });
});

Answer 3

在此代码中，我尝试将文件保存在 ./uploads 文件夹中，并在移动每个文件时将详细信息输入数据库，并且在将文件移动到具有唯一性的上传文件夹时更改文件名姓名。为此，我使用了一个名为 uniqueFilename 的库，您可以根据需要省略 uniqueFilename 和数据库操作。 var ext 也用于存储该文件的扩展名，稍后用于添加到数据库中..

您也可以调用 savemulti 来保存单个文件。

    const savemulti = async (file)=>{
  var filename = file.name
  var re = /(?:\.([^.]+))?$/;
  var ext = re.exec(filename)[1];
  var nm = uniqueFilename('')

  file.mv('./uploads/'+nm+'.'+ext,(err)=>{
    if(err){
      throw err
    }else{
      var sql3 = "insert into your_db_name (name1,name2,filetitle,mime_type,file_size,upload_date) values (?)";
      var date = new Date();
      
      var values = [filename,nm+'.'+ext,filename,file.mimetype,file.size,date]
      con.query(sql3,[values],(err,result)=>{
      if(err){throw err}
      console.log("Inserted")
      })

    }

  })

  return Promise
}

const savefiles = async (filesarray)=>{
  for(const file of filesarray)
  {
    await savemulti(file)
  }
  return Promise.resolve(1)
}

app.post('/testfileupload',async (req,res)=>{
  if(req.files)
  {
    console.log(req.files)
    const file = req.files.Upload

    try{
      if(Array.isArray(file))
      {
        await savefiles(file).then(()=>{
          res.status(200).send("File uploaded")
        })
      }
 
    }catch(err){
      return res.status(404).send('an error occured')
    }

  }else{
    res.status(404).send('no file attached');
  }
})