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

在这段代码中，我尝试将文件保存在./uploads文件夹中，并在移动每个文件时将详细信息输入数据库中，同时我也在更改文件名，因为它们以唯一的方式移动到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');
  }
})

希望通过express-fileupload上传多个图像

2 个答案: