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
攔截請求和響應
轉換請求和響應數(shù)據(jù)
取消請求
自動轉換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.本地圖片轉換成base64，然后通過普通的post請求發(fā)送到服務端。
操作簡單，適合小圖，以及如果想兼容低版本的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)
})
}
總結
以上所述是小編給大家介紹的vue項目中使用axios上傳圖片等文件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
element-plus中el-upload組件限制上傳文件類型的方法
?Element Plus 中,el-upload 組件可以通過設置 accept 屬性來限制上傳文件的格式,這篇文章主要介紹了element-plus中el-upload組件限制上傳文件類型,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細介紹Vue3中簡單diff算法的實現(xiàn)與使用，文中的示例代碼講解詳細，具有一定的借鑒價值，感興趣的可以了解一下2022-09-09
這篇文章主要介紹了vue同步父子組件和異步父子組件的生命周期順序問題,需要的朋友可以參考下2018-10-10
這篇文章主要為大家詳細介紹了Vue實現(xiàn)商品放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue.js綁定HTML class數(shù)組語法錯誤的原因分析
Vue.js綁定HTML class數(shù)組語法錯誤有哪些原因導致的呢，該如何解決呢？下面小編給大家分享Vue.js綁定HTML class數(shù)組語法錯誤的原因分析，感興趣的朋友一起看看吧2016-10-10
這篇文章主要介紹了10分鐘上手vue-cli 3.0 入門介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
elementui的table根據(jù)是否符合需求合并列的實現(xiàn)代碼
這篇文章主要介紹了elementui的table根據(jù)是否符合需求合并列的實現(xiàn)代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
使用Vue.js和Element-UI做一個簡單登錄頁面的實例
下面小編就為大家分享一篇使用Vue.js和Element-UI做一個簡單登錄頁面的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue工程如何為組件自動注入全局樣式文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問題，就是本篇要探討的主要問題，感興趣的朋友跟隨腳本之家小編一起學習吧2018-05-05