multer结合FormData多文件上传

tips

记录一下使用multer 和 FormData 多文件上传的几个注意点和具体过程

页面

input 元素添加 multiple 属性
创建formdata实例,将文件迭代添加到imgs字段;必须添加到同一个字段
将formdata作为fetch的 body 发送;注意,不要添加任何响应头(我之前就是自作聪明添加了"Content-Type":“multipart/form-data”,一直没有成功),它会自动设置的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="file" id="imgs" multiple>
  <button onclick="upload()">上传</button>
  <script>
    function upload(){
      const imgs = document.getElementById('imgs')
      
      const formdata = new FormData()
      
      for (const file of imgs.files) {
        formdata.append('imgs',file)
      }

      fetch('http://localhost:8888/api/upload',{
        method:'POST',
        body:formdata
      })
    }
  </script>
</body>
</html>

服务端

只要注意两点即可upload.array(filedName,fileCount):

filedName 和 formdata 添加的字段名称一致,比如: "imgs*
传入的文件个数只能少于或者等于fileCount,比如:设置为 3,那就最多只能传 3 个文件

另外,limit 可以对单个文件大小进行限制

import Express from 'express'
import path from 'path'
import multer from 'multer'

const router = Express.Router()

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, path.resolve(__dirname, '../uploads'))
  },
  filename: function (req, file, cb) {
    const ext = path.extname(file.originalname)
    const profix = Math.random().toString(36).slice(-6)
    const middle = new Date().toLocaleDateString()
    const filename = profix + middle + ext
    cb(null, file.fieldname + '-' + filename)
  }
})

function fileFilter(req,file,cb){
  const ext = path.extname(file.originalname)
  const whiteList = ['.jpg','.png']
  if(whiteList.includes(ext)){
    cb(null,true)
  }else{
    cb(new Error(`your ext ${ext} is not be supported`))
  }
}

const upload = multer({
  storage,
  limits: { // 是单个文件限制
    fileSize: 500 * 1024
  },
  fileFilter,
})

router.post('/',upload.array('imgs',3),(req,res)=>{
  res.send({
    msg:'上传成功'
  })
})

export default router