vue+element-ui+axios实现下载进度条

Vue代码

记录自己工作中遇到的问题，有不足的地方还请各位大佬指出

<div> 
 <el-progress 
 :text-inside="true" 
 :stroke-width="20" 
 :percentage="percentage" 
 status="success" >
 </el-progress> 
</div>

element-ui js代码

export default { 
    data() { 
        return { 
            percentage: 0 // 当前下载进度 
               }; 
           }, 
    // 通过计算属性来初步获取存储在vuex中的值 
    computed: { 
        contractFile() {
            return this.$store.state.downloadProgress; 
                       } 
              }, 
    // 使用侦听器对文件下载进度进行侦听并且赋值 
    watch: { 
        contractFile(val) { 
            this.percentage = val; 
                          } 
           }, 
}

vuex代码

const store = new Vuex.Store({ 
    state: { 
        downloadProgress: "" // 定义一个仓储的变量名 
           }, 
    mutations: { 
        // 定义一个同步方法对上方的值进行修改 
        setDownloadProgress(state, payload) {
        // 百分比计算： (当前下载数量 / 文件总大小) * 100 
        state.downloadProgress = (payload.loaded / payload.total) * 100; 
             } 
          }, 
    actions: { 
        // 因为mutations定义的方法是同步方法，所以在actions定义一个异步方法 
        SET_DOWNLOAD_PROGRESS({ commit }, payload) { 
            commit("setDownloadProgress", payload); 
            } 
        } 
}

axios代码

export const apiDownloadfile = params => { 
    return new Promise((resolve, reject) => { 
        instance.post( 
            url, 
             data 
        }, 
        { 
        responseType: "blob",
        // 定义 onDownloadProgress 方法来实时获取下载进度，再调用vuex方法将数据进行保存 
        onDownloadProgress: res => { 
        store.dispatch("SET_DOWNLOAD_PROGRESS", res); 
                } 
        } ).then(response => { 
                resolve(response); 
           }).catch(error => { 
                reject(error); });
           }); 
};

// `onDownloadProgress` 允许处理下载的进度事件
onDownloadProgress: function ( progressEvent ) { // 对本地进度事件做任何你想做的事情  },
// 上传用这个
// `onUploadProgress` 允许处理上传的进度事件
 onUploadProgress: function ( progressEvent ) { // 对本地进度事件做任何你想做的事情  },

后端那边让他们将文件的大小返回给我们即可