vue項目中使用axios上傳圖片等文件操作
更新時間：2017年11月02日 08:32:51 作者：風雨后見彩虹
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。這篇文章主要給大家介紹了vue項目中使用axios上傳圖片等文件操作，需要的朋友參考下吧
axios 簡介
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特征：
從瀏覽器中創(chuàng)建 XMLHttpRequest
從 node.js 發(fā)出 http 請求
支持 Promise API
攔截請求和響應(yīng)
轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)
取消請求
自動轉(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，然后通過普通的post請求發(fā)送到服務(wù)端。
操作簡單，適合小圖，以及如果想兼容低版本的ie沒辦法用此方法
2.通過form表單提交。
form表單提交圖片會刷新頁面，也可以時form綁定到一個隱藏的iframe上，可以實現(xiàn)無刷新提交數(shù)據(jù)。
這里只講解一下第二種方式：
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() // 創(chuàng)建form對象
param.append('file', file, file.name) // 通過append向form對象添加數(shù)據(jù)
param.append('chunk', '0') // 添加form表單中其他數(shù)據(jù)
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)
})
}
總結(jié)
以上所述是小編給大家介紹的vue項目中使用axios上傳圖片等文件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
實現(xiàn)vuex與組件data之間的數(shù)據(jù)同步更新方式
今天小編就為大家分享一篇實現(xiàn)vuex與組件data之間的數(shù)據(jù)同步更新方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家介紹了Vue與VueComponent的關(guān)系，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了vue-cli3配置與跨域處理方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
vue.js?自定義指令（拖拽、拖動、移動）?指令?v-drag詳解
這篇文章主要介紹了vue.js?自定義指令（拖拽、拖動、移動）?指令?v-drag,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
Vue 3 + Element Plus樹形表格全選多選及子節(jié)點勾選的問題解決方
在本文中,我們解決了Vue 3和Element Plus樹形表格中的全選、多選、子節(jié)點勾選和父節(jié)點勾選等常見問題,通過逐步實現(xiàn)這些功能,您可以構(gòu)建功能強大且用戶友好的樹形表格組件,以滿足各種數(shù)據(jù)展示需求,對Vue 3 Element Plus樹形表格相關(guān)知識感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了vue如何清除瀏覽器歷史棧，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家詳細介紹了vue使用ECharts實現(xiàn)折線圖和餅圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了使用vue自定義如何實現(xiàn)Tree組件和拖拽功能，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue中的自定義指令的相關(guān)資料，幫助大家更好的理解和學(xué)習vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要為大家介紹了vue頁面狀態(tài)持久化，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12