vue項(xiàng)目中使用axios上傳圖片等文件操作
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)
})
}
總結(jié)
以上所述是小編給大家介紹的vue項(xiàng)目中使用axios上傳圖片等文件，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- vue實(shí)現(xiàn)實(shí)時(shí)上傳文件進(jìn)度條
- Vue實(shí)現(xiàn)帶進(jìn)度條的文件拖動(dòng)上傳功能
- 使用axios實(shí)現(xiàn)上傳圖片進(jìn)度條功能
- Vue axios 中提交表單數(shù)據(jù)(含上傳文件)
- vue使用axios上傳文件(FormData)的方法
- vue使用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新詳解
- axios實(shí)現(xiàn)簡(jiǎn)單文件上傳功能
- vue-cli+axios實(shí)現(xiàn)文件上傳下載功能(下載接收后臺(tái)返回文件流)
- axios+Vue實(shí)現(xiàn)上傳文件顯示進(jìn)度功能
- Vue+Axios實(shí)現(xiàn)文件上傳自定義進(jìn)度條
相關(guān)文章
element-plus中el-upload組件限制上傳文件類型的方法
?Element Plus 中,el-upload 組件可以通過(guò)設(shè)置 accept 屬性來(lái)限制上傳文件的格式,這篇文章主要介紹了element-plus中el-upload組件限制上傳文件類型,需要的朋友可以參考下2024-02-02
一文詳解Vue3中簡(jiǎn)單diff算法的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹Vue3中簡(jiǎn)單diff算法的實(shí)現(xiàn)與使用，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的可以了解一下2022-09-09
vue同步父子組件和異步父子組件的生命周期順序問(wèn)題
這篇文章主要介紹了vue同步父子組件和異步父子組件的生命周期順序問(wèn)題,需要的朋友可以參考下2018-10-10
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)商品放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue.js綁定HTML class數(shù)組語(yǔ)法錯(cuò)誤的原因分析
Vue.js綁定HTML class數(shù)組語(yǔ)法錯(cuò)誤有哪些原因?qū)е碌哪?，該如何解決呢？下面小編給大家分享Vue.js綁定HTML class數(shù)組語(yǔ)法錯(cuò)誤的原因分析，感興趣的朋友一起看看吧2016-10-10
這篇文章主要介紹了10分鐘上手vue-cli 3.0 入門介紹，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
elementui的table根據(jù)是否符合需求合并列的實(shí)現(xiàn)代碼
這篇文章主要介紹了elementui的table根據(jù)是否符合需求合并列的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
使用Vue.js和Element-UI做一個(gè)簡(jiǎn)單登錄頁(yè)面的實(shí)例
下面小編就為大家分享一篇使用Vue.js和Element-UI做一個(gè)簡(jiǎn)單登錄頁(yè)面的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要介紹了vue工程如何為組件自動(dòng)注入全局樣式文件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來(lái)一樣直接用標(biāo)簽編寫(xiě)鏈接哪？vue-router如何使用？常見(jiàn)路由操作有哪些？等等這些問(wèn)題，就是本篇要探討的主要問(wèn)題，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05