关于vue+axios上传文件或图片到node上

在网上看到的大部分都是通过表单来上传的文件，我这里分享一个自己的方法。
vue代码

  <div class="admin_box">
    <input type="file"
           @change="changeFile"
           name="avatar"		//注意这里的name要和下面服务端的保持一致，很坑
           id="">
    <input type="button"
           @click="uploadImg"
           value="提交">
    <p>已上传{{rate}}%</p>
  </div>
//script部分代码
data () {
    return {
      file: {},
      rate: 0
    }
  },
  methods: {
    changeFile (e) {
      this.file = e.target.files[0]
    },
    uploadImg () {
      let formData = new FormData();
      formData.append('avatar', this.file)   //注意，这里必须上传文件的name为avatar要和服务端接收的保持一致
      this.$axios.post('/api/admin/upload', formData, {		//我这里请求地址是用的proxy代理跨域，可根据自己的地址进行更改
        onUploadProgress: (progressEvent) => {      //这里要用箭头函数
          //不然这个this的指向会有问题
          this.rate = parseInt((progressEvent.loaded / progressEvent.total) * 100);
        }
      })
    }
  }

node端代码

const express = require('express')
const router = express.Router()
const multer = require('multer')		//express框架上传文件所需要的中间件

var upload = multer({			//multer中间件的使用方法可以看官网
  dest: './uploads/'
})
router.post('/upload', upload.single('avatar'), (req, res) => {		//注意这里的avatar
  var fileName = "";
  console.log(req.file);
  if (req.file != undefined) {
    fileName = new Date().getTime() + "_" + req.file.originalname;
    fs.rename(req.file.path, __dirname + "/" + fileName, err => {
    	if(err) console.log(err)
    }); //重命名，加后缀，不然图片会显示乱码，打不开
  }
  res.send("1");
})
module.exports = router;

这里面有几个很坑的地方：
1.file元素的name属性一定要和node端的一致，并注意在FormData里面加上
2.一定要去了解下中间件的使用方法
3.formdata的使用方法也要了解下