vuejs使用FormData實現(xiàn)ajax上傳圖片文件

更新時間：2017年08月08日 10:55:19 作者：wmui

本篇文章主要介紹了vuejs使用FormData實現(xiàn)ajax上傳圖片文件，具有一定的參考價值，有興趣的可以了解一下

我相信很多使用vuejs的朋友，都有采用ajax上傳圖片的需求，因為前后端分離后，我們希望都能用ajax來解決數(shù)據(jù)問題，傳統(tǒng)的表單提交會導(dǎo)致提交成功后頁面跳轉(zhuǎn)，而使用ajax能夠無刷新上傳圖片等文件。

其實已經(jīng)有朋友封裝了相關(guān)的npm包，但是我想說用原生的js api來實現(xiàn)，也用不了多少代碼，而且更靈活，能使用原生就盡量用原生。接下來就以一個簡單的頭像上傳來說明如何使用。

效果圖

前端實現(xiàn)

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

解釋一下上面代碼的意思，當(dāng)我們點擊圖片會觸發(fā)setAvatar函數(shù)，該函數(shù)會觸發(fā)input的click事件，于是就會彈出文件選擇框，當(dāng)我們選擇了一張圖片后，觸發(fā)chageImage函數(shù)，這個函數(shù)的功能就是預(yù)覽你上傳的圖片，單后當(dāng)我們點擊修改按鈕后，就會把資源傳到后端

后端處理

后端接收到你上傳的資源，肯定要把資源保存到服務(wù)器，我就以Nodejs來說明，我使用formidable解析上傳的數(shù)據(jù)

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": "內(nèi)部服務(wù)器錯誤"
  })
 }

 // 獲取后綴名
 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": "圖片上傳失敗"
  })
  }
 })
 // 更新數(shù)據(jù)庫
 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提交的數(shù)據(jù)和解析采用傳統(tǒng)表單提交的數(shù)據(jù)方法一樣，如果你是做前端開發(fā)的，不了解后端代碼影響不大。
說這么多，還是來個demo吧，https://github.com/wmui/vueblog，這個小項目后臺有個頭像修改的功能，是使用ajax上傳圖片的，核心代碼百行不到，前后端分離。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: