vuejs使用FormData实现ajax上传图片文件

<template> <div class="admin"> <div class="admin-content">  <div class="edit">  <div class="avatar">   <div class="img">   <img :src="avatar" @click="setAvatar">   <span>更改</span>   </div>   <input type="file" name="avatar" accept="image/gif,image/jpeg,image/jpg,image/png" style="display:none" @change="changeImage($event)" ref="avatarInput">  </div>  <button type="button" @click="edit">确认修改</button>  </div> </div> </div></template><script>export default { data() { return {  avatar: this.$store.state.administrator.avatar, } }, methods: { edit() {  // 修改了头像  if (this.$refs.avatarInput.files.length !== 0) {   var image = new FormData()   image.append('avatar', this.$refs.avatarInput.files[0])   this.axios.post('/avatar', image, {   headers: {    "Content-Type": "multipart/form-data"   }   })  }  })  }, setAvatar() {  this.$refs.avatarInput.click() }, changeImage(e) {  var file = e.target.files[0]  var reader = new FileReader()  var that = this  reader.readAsDataURL(file)  reader.onload = function(e) {  that.avatar = this.result  } } }}</script>

exports.avatar = function(req, res, next) { let form = new formidable.IncomingForm() form.parse(req, function(err, fields, files) { if (err) {  return res.json({  "code": 500,  "message": "内部服务器错误"  }) } // 获取后缀名 let extname = path.extname(files.avatar.name) let oldpath = files.avatar.path; let newpath = './public/avatar' + extname; let avatarName = 'avatar' + extname; // 更改名字和路径 fs.rename(oldpath, newpath, function(err) {  if (err) {  return res.json({   "code": 401,   "message": "图片上传失败"  })  } }) // 更新数据库 db.updateMany('users', { "user": username }, { "avatar": avatarName },  function(err, result) {  if (err) {   return res.json({   "code": 401,   "message": "头像更新失败"   })  }  return res.json({   "code":200,   "message": "头像上传成功"  })  }) })}