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)換成base，然后通過普通的post請(qǐng)求發(fā)送到服務(wù)端。

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

2.通過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) // 通過append向form對(duì)象添加數(shù)據(jù)
 param.append('chunk', '0') // 添加form表單中其他數(shù)據(jù)
 console.log(param.get('file')) // FormData私有類對(duì)象，訪問不到，可以通過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)
 })
 }

總結(jié)

以上所述是小編給大家介紹的vue項(xiàng)目中使用axios上傳圖片等文件，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！