axios 簡介
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端,它本身具有以下特征:
從瀏覽器中創建 XMLHttpRequest
從 node.js 發出 http 請求
支持 Promise API
攔截請求和響應
轉換請求和響應數據
取消請求
自動轉換JSON數據
客戶端支持防止 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.本地圖片轉換成base64,然后通過普通的post請求發送到服務端。
操作簡單,適合小圖,以及如果想兼容低版本的ie沒辦法用此方法
2.通過form表單提交。
form表單提交圖片會刷新頁面,也可以時form綁定到一個隱藏的iframe上,可以實現無刷新提交數據。
這里只講解一下第二種方式:
html代碼:
<input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>
js代碼:
import axios from 'axios' // 添加請求頭 update (e) { // 上傳照片 var self = this let file = e.target.files[0] /* eslint-disable no-undef */ let param = new FormData() // 創建form對象 param.append('file', file, file.name) // 通過append向form對象添加數據 param.append('chunk', '0') // 添加form表單中其他數據 console.log(param.get('file')) // FormData私有類對象,訪問不到,可以通過get判斷值是否傳進去 let config = { headers: {'Content-Type': 'multipart/form-data'} } // 添加請求頭 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) }) }
總結
以上所述是小編給大家介紹的vue項目中使用axios上傳圖片等文件,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com