如何在反应节点中一次上传多个图像答案

【问题标题】：How to upload multiple images at once in react Node如何在反应节点中一次上传多个图像
【发布时间】：2021-08-29 04:28:45
【问题描述】：

我想一次上传多张图片，我使用Multer作为中间件，我可以成功上传单张图片。

客户

  const {register,handleSubmit}=useForm() 
    const onSubmit = (images) => {
       let formData = new FormData()
       axios.post(`${url}/uploadMultiple`,formdata)
        }

使用 react-hook-form

<form onSubmit={handleSubmit(onSubmit)}>
    <input type='file' multiple {...register('multipleImages')} />
     <button type='submit' >Upload multiple images</button>
</form>        
    )

路线

route.post('/uploadMultiple',upload.array('imagess'),(req,res)=>{
    console.log(req.files)
}

【问题讨论】：

标签： node.js reactjs

【解决方案1】：

你需要使用 Multer 的 .array(selector,fileLimit)。选择器是指输入中的名称属性。如果您想限制文件数量，请使用 fileLimit

例如：

<input type='file' name='images' multiple />

route.post('/uploadImages',upload.array('images', 10),(req,res)=>{
    //your code here
}

【讨论】：

【解决方案2】：

将图像发送到服务器的最简单方法

  const onSubmit = async(e) => {
        const fd = new FormData();
            [...e.file].map(file => {
                fd.append('imagess',file)
            })

           await axios.post(`${url}/uploadMultiple`,fd)
    }

import multer from 'multer'

let upload
 const storage = multer.diskStorage({
    destination:(req, file, cb)=> {
      cb(null, 'images')
    },
    filename:  (req, file, cb)=> {
      cb(null, Date.now()+ '_' +file.originalname)
    }
  })
  
  export default  upload = multer({ storage: storage })

节点服务器

route.post('/uploadMultiple',upload.array('imagess'),(req,res)=>{
    console.log(req.files)
}

【讨论】：