vue項(xiàng)目中如何使用axios上傳圖片

這篇文章將為大家詳細(xì)講解有關(guān)vue項(xiàng)目中如何使用axios上傳圖片，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

axios 簡(jiǎn)介

axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特征：

從瀏覽器中創(chuàng)建 XMLHttpRequest

從 node.js 發(fā)出 http 請(qǐng)求

支持 Promise API

攔截請(qǐng)求和響應(yīng)

轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)

取消請(qǐng)求

自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)

客戶端支持防止 CSRF/XSRF

首先安裝axios：

1.利用npm安裝npm install axios –save

2.利用bower安裝bower install axios –save

3.直接利用cdn引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

一般情況上傳照片有兩種方式：

1.本地圖片轉(zhuǎn)換成base64，然后通過(guò)普通的post請(qǐng)求發(fā)送到服務(wù)端。

　　操作簡(jiǎn)單，適合小圖，以及如果想兼容低版本的ie沒(méi)辦法用此方法

2.通過(guò)form表單提交。

　　form表單提交圖片會(huì)刷新頁(yè)面，也可以時(shí)form綁定到一個(gè)隱藏的iframe上，可以實(shí)現(xiàn)無(wú)刷新提交數(shù)據(jù)。

這里只講解一下第二種方式：

html代碼：

<input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>

js代碼：

import axios from 'axios'
// 添加請(qǐng)求頭
update (e) {  // 上傳照片
   var self = this
   let file = e.target.files[0]
   /* eslint-disable no-undef */
   let param = new FormData() // 創(chuàng)建form對(duì)象
   param.append('file', file, file.name) // 通過(guò)append向form對(duì)象添加數(shù)據(jù)
   param.append('chunk', '0') // 添加form表單中其他數(shù)據(jù)
   console.log(param.get('file')) // FormData私有類對(duì)象，訪問(wèn)不到，可以通過(guò)get判斷值是否傳進(jìn)去
   let config = {
    headers: {'Content-Type': 'multipart/form-data'}
   }
   // 添加請(qǐng)求頭
  axios.post('http://172.19.26.60:8081/rest/user/headurl', param, config)
    .then(response => {
     if (response.data.code === 0) {
      self.ImgUrl = response.data.data
     }
     console.log(response.data)
    })
  }

關(guān)于“vue項(xiàng)目中如何使用axios上傳圖片”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。