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

本文链接：https://blog.csdn.net/hehe_www2012/article/details/115608338

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

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

               <!-- 其中需要注意的便是 ref="upload"    //下方有用
                    :http-request="httpRequest"   //待会儿会用到
                    :on-progress="progressA"  //这个似乎没了也ok，不过带着好了
                    :auto-upload='false'   //让其不要自动提交
                    还有按钮出的@click="submitUpload(editForm.id)
                    其中editForm.id是该记录在数据库中的表的主键id，方便记录对应着自己的附件
                     -->
             <el-upload
                             class="upload-demo"
                             ref="upload"
                             action=" " 
                             :auto-upload='false'
                             accept=".txt , .pdf , .xls , .doc , .rar , .zip"
                             :on-preview="handlePreview"
                             :on-remove="handleRemove"
                             :before-remove="beforeRemove"
                             :on-change="handleChange"
                             :http-request="httpRequest"
                             :on-progress="progressA"
                             multiple
                             :limit="1"
                             :on-exceed="handleExceed"
                             :file-list="fileList">
                         
       <el-button  slot="trigger"  type="primary" size="small" 
             icon="el-icon-document">选择文件</el-button>
       <el-button style="margin-left: 10px;" size="small" type="success" 
            icon="el-icon-upload" @click="submitUpload(editForm.id)">
                   上传到服务器</el-button>
                        
                        
                        </el-upload>

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中进行修改得到如下：

<template>
    <div id="app">
        <router-view v-if="isRouterAlive"></router-view>
    </div>
</template>
<script>
    export default {
        name: 'App',
        components: {},
        computed: {},
        provide() {
            return {
                reload: this.reload
            }
        },
        data() {
            return {
                loading: true,
                isRouterAlive: true,
            }
        },
        created() {
        },
        methods: {
            reload() {
                let vue = this
                vue.isRouterAlive = false
                //在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
                vue.$nextTick(() => {
                    vue.isRouterAlive = true
                })
            }
        }
    }
</script>

在需要用到的地方引入