axios實現(xiàn)文件上傳并獲取進度
更新時間：2020年03月25日 14:21:45 作者：九段刀客
這篇文章主要為大家詳細介紹了axios實現(xiàn)文件上傳并獲取進度，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了axios實現(xiàn)文件上傳并獲取進度的具體代碼，供大家參考，具體內(nèi)容如下
實現(xiàn)效果
代碼部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<input @change="change" type="file">
</div>
<script src="./lib/vue.js"></script>
<script src="./lib/axios.js"></script>
<script>
new Vue({
el: '#app',
data: {
val: ''
},
methods: {
change(e) {
let files = e.target.files
// 上傳部分
let url = ' ' //你的后臺上傳地址
let data = new FormData()
data.append('file', files[0])
axios({
url,
method: 'post',
data,
headers: {
},
//原生獲取上傳進度的事件
onUploadProgress:function(progressEvent){
let complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
console.log('上傳 ' + complete)
}
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
}
}
})
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue實現(xiàn)點擊導航欄當前標簽后變色功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
vue中如何使用lodash的debounce防抖函數(shù)
防抖函數(shù) debounce 指的是某個函數(shù)在某段時間內(nèi),無論觸發(fā)了多少次回調(diào),都只執(zhí)行最后一次,在Vue中使用防抖函數(shù)可以避免在頻繁觸發(fā)的事件中重復(fù)執(zhí)行操作,這篇文章主要介紹了vue中使用lodash的debounce防抖函數(shù),需要的朋友可以參考下2024-01-01
Vue關(guān)于Element UI中的文本域換行問題
這篇文章主要介紹了Vue關(guān)于Element UI中的文本域換行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3系統(tǒng)進入頁面前的權(quán)限判斷和重定向方式
這篇文章主要介紹了vue3系統(tǒng)進入頁面前的權(quán)限判斷和重定向方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue loadmore組件上拉加載更多功能示例代碼,需要的朋友可以參考下2017-07-07
vue3獲取ref實例結(jié)合ts的InstanceType問題
這篇文章主要介紹了vue3獲取ref實例結(jié)合ts的InstanceType問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
你不知道的Vue技巧之--開發(fā)一個可以通過方法調(diào)用的組件(推薦)
這篇文章主要介紹了你不知道的Vue技巧之--開發(fā)一個可以通過方法調(diào)用的組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了vue-test-utils初使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
我們知道，Vite?構(gòu)建環(huán)境分為開發(fā)環(huán)境和生產(chǎn)環(huán)境，不同環(huán)境會有不同的構(gòu)建策略，但不管是哪種環(huán)境，Vite?都會首先解析用戶配置，那接下來，本文就來與大家分析配置解析過程中?Vite?到底做了什么？即Vite是如何加載配置文件的2023-11-11
vue+element下日期組件momentjs轉(zhuǎn)換賦值問題解決
這篇文章主要介紹了vue+element下日期組件momentjs轉(zhuǎn)換賦值問題,記錄下使用momentjs轉(zhuǎn)換日期字符串賦值給element的日期組件報錯問題，需要的朋友可以參考下2024-02-02