vue中利用axios實(shí)現(xiàn)文件上傳進(jìn)度實(shí)時(shí)更新

shiguibiao 發(fā)布于2019-08-22 11:21 / 3253人閱讀

摘要：二級(jí)增加了事件我們可以據(jù)此在瀏覽器接收新數(shù)據(jù)期間添加實(shí)時(shí)數(shù)據(jù)進(jìn)度條從而使得交互更加友好模板上傳成功關(guān)鍵點(diǎn)在于事件而對(duì)封裝之后需要在的參數(shù)里面寫好事件處理函數(shù)具體參數(shù)寫法可查看文檔

XHR二級(jí)增加了progress事件,我們可以據(jù)此在瀏覽器接收新數(shù)據(jù)期間添加實(shí)時(shí)數(shù)據(jù)進(jìn)度條,從而使得交互更加友好

vue模板

vue-js

    var form = new FormData()
    form.append("file", vm.$refs.upload.files[0])
    form.append("id", id)
    form.append("type", type)
    var config = {
        onUploadProgress: progressEvent => {
            var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + "%"
            this.progress = complete
        }
    }
    axios.post(`api/uploadFile`,
        form, config).then((res) => {
        if (res.data.status === "success") {
            console.log("上傳成功")
        }
    })

關(guān)鍵點(diǎn)在于progress事件,而axios對(duì)ajax封裝之后需要在axios的config參數(shù)里面寫好事件處理函數(shù)(具體參數(shù)寫法可查看axios文檔)

云服務(wù)器 GPU云服務(wù)器 vue+webrtc實(shí)現(xiàn)實(shí)時(shí)視頻通話,語音通話文件上傳進(jìn)度條 php實(shí)現(xiàn)上傳文件 ajax實(shí)現(xiàn)文件上傳

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92236.html

相關(guān)文章

基于Vue + Node.js + MongoDB的圖片上傳組件，實(shí)現(xiàn)圖片的預(yù)覽和刪除

摘要：網(wǎng)址功能單圖多圖上傳圖片上傳預(yù)覽上傳進(jìn)度條分組上傳，分組查詢新建分組，刪除分組刪除圖片選擇圖片目錄結(jié)構(gòu)前端利用搭建，中引入子組件。實(shí)現(xiàn)分組的新增查詢刪除。利用模塊實(shí)現(xiàn)刪除文件功能。公司要寫一些為自身業(yè)務(wù)量身定制的的組件，要基于Vue,寫完后擴(kuò)展了一下功能，選擇寫圖片上傳是因?yàn)樽约褐耙恢睂?duì)這個(gè)功能比較迷糊，所以這次好好了解了一下。演示在網(wǎng)址打開后的show.gif中。使用技術(shù)：Vu...

hzx 2019-06-26 17:30 評(píng)論0 收藏0
element 上傳組件 el-upload 的經(jīng)驗(yàn)總結(jié)

摘要：正文上傳圖片到七牛云這個(gè)需要前后端的配合才能實(shí)現(xiàn)，這里是官方的參考鏈接。參考鏈接組件的怎么獲取進(jìn)度值谷歌找到的其一谷歌找到的其二完前言最近在做后臺(tái)管理項(xiàng)目，采用的 vue-element-admin ，上傳圖片是一個(gè)很常用的功能，也遇到了很多問題，剛好趁此機(jī)會(huì)做一些總結(jié)。初步總結(jié)下會(huì)提到的問題，目錄如下： el-upload 自定義上傳方法圖片上傳到七牛云圖片壓縮后再上傳（...

Neilyo 2019-08-26 10:24 評(píng)論0 收藏0
一些基于React、Vue、Node.js、MongoDB技術(shù)棧的實(shí)踐項(xiàng)目

摘要：利用中間件實(shí)現(xiàn)異步請(qǐng)求，實(shí)現(xiàn)兩個(gè)用戶角色實(shí)時(shí)通信。目前還未深入了解的一些概念。往后會(huì)寫更多的前后臺(tái)聯(lián)通的項(xiàng)目。刪除分組會(huì)連同組內(nèi)的所有圖片一起刪除。算是對(duì)自己上次用寫后臺(tái)的一個(gè)強(qiáng)化，項(xiàng)目文章在這里。后來一直沒動(dòng)，前些日子才把后續(xù)的完善。歡迎訪問我的個(gè)人網(wǎng)站：http://www.neroht.com/? 剛學(xué)vue和react時(shí)，利用業(yè)余時(shí)間寫的關(guān)于這兩個(gè)框架的訓(xùn)練，都相對(duì)簡(jiǎn)單，有的...

tangr206 2019-06-26 17:34 評(píng)論0 收藏0
第三方庫

摘要：微信支付，支付寶支付，銀聯(lián)支付三大支付總結(jié)支付寶植入總結(jié)支付寶的植基于和百度地圖的組件庫基于百度地圖封裝的組件庫，使用這個(gè)庫最好需要先了解和百度地圖。 Commento - 多說 & Disqus 開源替代品 Commento - 多說 & Disqus 開源替代品 anime.js 簡(jiǎn)單入門教程強(qiáng)大輕量的動(dòng)畫庫 anime.js 入門教程來自B站的開源的MagicaSakura源...

seanHai 2019-08-22 13:58 評(píng)論0 收藏0
第三方庫

摘要：微信支付，支付寶支付，銀聯(lián)支付三大支付總結(jié)支付寶植入總結(jié)支付寶的植基于和百度地圖的組件庫基于百度地圖封裝的組件庫，使用這個(gè)庫最好需要先了解和百度地圖。 Commento - 多說 & Disqus 開源替代品 Commento - 多說 & Disqus 開源替代品 anime.js 簡(jiǎn)單入門教程強(qiáng)大輕量的動(dòng)畫庫 anime.js 入門教程來自B站的開源的MagicaSakura源...

gityuan 2019-08-29 14:17 評(píng)論0 收藏0