vue中利用axios實現文件上傳進度實時更新

XHR二級增長了progress事件,咱們能夠據此在瀏覽器接收新數據期間添加實時數據進度條,從而使得交互更加友好

vue模板

<div class="progress" @click="upload"
         :style="{backgroundImage:'linear-gradient(to right,#C0C7CB 0%,#C0C7CB '+progress+',#E1E6E9 '+progress+',#E1E6E9 100%)'}">

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('上傳成功')
        }
    })

關鍵點在於progress事件,而axios對ajax封裝以後須要在axios的config參數裏面寫好事件處理函數(具體參數寫法可查看axios文檔)