快捷導(dǎo)航

axios實(shí)現(xiàn)文件上傳并獲取進(jìn)度

更新時(shí)間：2020年03月25日 14:21:45 作者：九段刀客

這篇文章主要為大家詳細(xì)介紹了axios實(shí)現(xiàn)文件上傳并獲取進(jìn)度，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了axios實(shí)現(xiàn)文件上傳并獲取進(jìn)度的具體代碼，供大家參考，具體內(nèi)容如下

實(shí)現(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 = ' ' //你的后臺(tái)上傳地址
  let data = new FormData()
  data.append('file', files[0])
  axios({
   url,
   method: 'post',
   data,
   headers: {
   
   },
   //原生獲取上傳進(jìn)度的事件
   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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄當(dāng)前標(biāo)簽后變色功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄當(dāng)前標(biāo)簽后變色功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
vue中如何使用lodash的debounce防抖函數(shù)
防抖函數(shù) debounce 指的是某個(gè)函數(shù)在某段時(shí)間內(nèi),無(wú)論觸發(fā)了多少次回調(diào),都只執(zhí)行最后一次,在Vue中使用防抖函數(shù)可以避免在頻繁觸發(fā)的事件中重復(fù)執(zhí)行操作,這篇文章主要介紹了vue中使用lodash的debounce防抖函數(shù),需要的朋友可以參考下
2024-01-01
Vue關(guān)于Element UI中的文本域換行問(wèn)題
這篇文章主要介紹了Vue關(guān)于Element UI中的文本域換行問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue3系統(tǒng)進(jìn)入頁(yè)面前的權(quán)限判斷和重定向方式
這篇文章主要介紹了vue3系統(tǒng)進(jìn)入頁(yè)面前的權(quán)限判斷和重定向方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue loadmore組件上拉加載更多功能示例代碼
這篇文章主要介紹了vue loadmore組件上拉加載更多功能示例代碼,需要的朋友可以參考下
2017-07-07
vue3獲取ref實(shí)例結(jié)合ts的InstanceType問(wèn)題
這篇文章主要介紹了vue3獲取ref實(shí)例結(jié)合ts的InstanceType問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
你不知道的Vue技巧之--開發(fā)一個(gè)可以通過(guò)方法調(diào)用的組件(推薦)
這篇文章主要介紹了你不知道的Vue技巧之--開發(fā)一個(gè)可以通過(guò)方法調(diào)用的組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue-test-utils初使用詳解
這篇文章主要介紹了vue-test-utils初使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
Vite配置文件如何加載深入剖析
我們知道，Vite?構(gòu)建環(huán)境分為開發(fā)環(huán)境和生產(chǎn)環(huán)境，不同環(huán)境會(huì)有不同的構(gòu)建策略，但不管是哪種環(huán)境，Vite?都會(huì)首先解析用戶配置，那接下來(lái)，本文就來(lái)與大家分析配置解析過(guò)程中?Vite?到底做了什么？即Vite是如何加載配置文件的
2023-11-11
vue+element下日期組件momentjs轉(zhuǎn)換賦值問(wèn)題解決
這篇文章主要介紹了vue+element下日期組件momentjs轉(zhuǎn)換賦值問(wèn)題,記錄下使用momentjs轉(zhuǎn)換日期字符串賦值給element的日期組件報(bào)錯(cuò)問(wèn)題，需要的朋友可以參考下
2024-02-02