el-upload上传文件，且带进度条，随带刷新页面小知识

1.若是直接使用el-upload的自动上传，那么它就直接携带着上传进度条，不过很多时候，我们上传文件的时候需要携带一些信息，如token信息

2.故而选用手动上传文件，而这个时候就需要做出一些改变，且看代码：

               
             
                         
       选择文件
       
                   上传到服务器
                        
                        
                        

3.编写 httpRequest函数，编写完成之后便需要使用到之前的ref="upload"和submitUpload(editForm.id)函数来进行触发了

        //定义一个http-request的函数,该函数用于提交数据附件等信息
        //这个和之前的 ：http-request = "httpRequest"成功的呼应上了，该函数即是用于提交
        //的操作，从这里可以看到携带了token，及file_id这个id即为editForm.id由于
        //httpRequest不能直接在el-upload中加入参数，故而为了获得id，我是从之前的
        //submitUpload(editForm.id) 处获得的id，且将其保存在了return data处，故而用
        //this.files_id获得

      httpRequest(param){
        
        var file_id = this.files_id    
            
        let formData = new FormData();
        formData.append("fileList",this.fileList[0].raw);  //置入 文件内容
        formData.append("file_id",file_id);  //置入编号id表的唯一标识

        this.$axios.post(this.dbURL+'/document/upload',formData,{
                     headers:{
                         "Authorization":localStorage.getItem("token")
                     },
                     //这里便是实现进度条的关键之处了，简洁明了
                     //其中的param带着上传的文件的各种信息，且直接在httpRequest(param)
                     //声明即可使用
                     onUploadProgress: (progressEvent) => {
                        let num = progressEvent.loaded / progressEvent.total * 100 | 0;  
                        param.onProgress({percent: num})     //进度条
                    }
                  }).then(res=>{
                       
                       Element.Message.success("上传成功！",{duration : 3*1000});
                       this.fileList = [];  //添加成功将其置空
                })
             
      },

4.编写submitUpload(id)函数，进行触发 http-request

  //简洁明了，触发httpRequest函数，进行上传，且会出现进度条
 submitUpload(id) {
         this.files_id = id   //将id保存在files_id中
         this.$refs.upload.submit();  //触发http-request函数，即httpRequest()函数
}

5.效果：选择与上传

 ***************************************************************************************

上传之后及时的刷新页面。

1.在App.vue中进行修改得到如下：

在需要用到的地方引入

在某个方法里面使用：this.reload() 这样便可以执行刷新页面了。