vuejs使用FormData，ajax上傳圖片文件

我相信不少使用vuejs的朋友，都有采用ajax上傳圖片的需求，由於先後端分離後，咱們但願都能用ajax來解決數據問題，傳統的表單提交會致使提交成功後頁面跳轉，而使用ajax可以無刷新上傳圖片等文件。
其實已經有朋友封裝了相關的npm包，可是我想說用原生的js api來實現，也用不了多少代碼，並且更靈活，能使用原生就儘可能用原生。接下來就以一個簡單的頭像上傳來講明如何使用。

效果圖

前端實現

<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>

解釋一下上面代碼的意思，當咱們點擊圖片會觸發setAvatar函數，該函數會觸發input的click事件，因而就會彈出文件選擇框，當咱們選擇了一張圖片後，觸發chageImage函數，這個函數的功能就是預覽你上傳的圖片，單後當咱們點擊修改按鈕後，就會把資源傳到後端

後端處理

後端接收到你上傳的資源，確定要把資源保存到服務器，我就以Nodejs來講明，我使用formidable解析上傳的數據

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": "頭像上傳成功"
        })
      })
  })
}

後端解析ajax提交的數據和解析採用傳統表單提交的數據方法同樣，若是你是作前端開發的，不瞭解後端代碼影響不大。
說這麼多，仍是來個demo吧，https://github.com/wmui/vueblog，這個小項目後臺有個頭像修改的功能，是使用ajax上傳圖片的，核心代碼百行不到，先後端分離。
在這裏挺感謝sf和掘金的朋友的，開源此項目半月左右，收到200多個star，人生第一次這麼輝煌。