multer 库的使用

• 原生表单上传

  <!-- 必须要指定 enctype 值，因为默认是 application/x-www-form-urlencoded -->
  <form action="http://localhost:3000/test" method="post" enctype="multipart/form-data">
      <input type="file" name="avatar" />
      <button type="submit">提交</button>
  </form>
  

• element-ui 组件上传

  <el-upload action="" :http-request="uploadFile" >
        <el-button type="primary" size="small">
          <i class="el-icon-upload2 el-icon--left" />
          点击上传文件
        </el-button>
  </el-upload>
  
  <script>
  	export default {
          methods: {
              // 可以肯定的说，这个 file 就是我们读到的文件，就是原生input框拿到的那种格式
              async uploadFile(file) {
              	await test(file)
              }
          }
      }
  </script>
  

  axiosRequest({
      method: 'post',
      url,
      data: file,  // 将上面的 file 传到这里就好了
      headers: {
          'Content-Type': 'multipart/form-data'  // 只要我们传的是原汁原味的 file，那么这里浏览器会自动帮我们加 boundry
      }
  })
  

• 后端代码

  const fs = require('fs')
  const multer = require('multer')
  const upload = multer({ dest: 'uploads/' })  // 它会将读到的文件，暂存到这个目录下；这种相对路径，貌似也是你执行 node 指令时的路径为相对
  
  // upload.any() 是指可以传任意格式的文件（不太清楚这个配置项，下次可研究一下）
  // 因为我们拿到的originalname（读取到的文件名称）是乱码的，这里转码
  // 然后利用 fs 模块写入本地
  router.post('/test', upload.any(), (req, res) => {
      const fileName = Buffer.from(req.files[0].originalname, 'latin1').toString('utf8')
      const path = 'public/image/' + fileName
      fs.readFile(req.files[0].path, (err, data) => {
          if (err) {
              res.send(Message.sendFail())
          }else {
              fs.writeFile(path, data, err => {
                  if (err) {
                      res.send(Message.sendFail())
                  }else {
                      res.send(Message.sendSuccess())
                  }
              })
          }
      })
  })
  
  

• 附一：req.files的内容

[
  {
    fieldname: 'file',
    originalname: 'QQæ\x88ªå\x9B¾20221214110458.jpg',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    destination: 'uploads/',
    filename: '6c01384cdfeee88e04e97579aded5a09',
    path: 'uploads\\6c01384cdfeee88e04e97579aded5a09',
    size: 2827
  }
]