el-upload上传文件，显示进度条

deviceFile.vue

<el-upload
     class="upload-demo"
     ref="upload"
     action="donothing"
     :http-request="fileUpload"
     :multiple="true"
     :show-file-list="false"
     :file-list="fileList">
             <el-button type="warning" size="mini" @click="chooseFile">上传文件</el-button>
</el-upload>

// methods
fileUpload(file){
        this.$emit('fileUpload',this.client.sessionId,file.file,this.filesystem[0].currentDirectory)
 }

使用element中的el-upload来实现文件上传，点击上传文件，去触发父组建里面的上传文件的函数。

uploadTip.vue

<div slot="header">
                <span>上传列表</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="progressTipClose">关闭</el-button>
            </div>
            <div  class="text item">
                <template>
                    <el-table
                        :data="tableData"
                        style="width: 100%">
                        <el-table-column
                            prop="Filename"
                            label="文件名"
                            width="150px">
                        </el-table-column>
                        <el-table-column
                            prop="Totalsize"
                            label="大小">
                        </el-table-column>
                        <el-table-column
                            prop="progress"
                            label="进度"
                            width="200px">
                            <template slot-scope="scope">
                                <div>
                                    <el-progress :color="customColorMethod" :percentage="scope.row.progress"></el-progress>
                                    <span>{{scope.row.progress === 100 ? '上传成功' : ''}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="handel"
                            label="操作">
                            <template slot-scope="scope">
                                <i class="el-icon-circle-close" v-show="scope.row.progress !== 100"></i>
                            </template>
                            
                        </el-table-column>
                    </el-table>
          </template>
 </div>

props:{
            uploadingFiles:{
                type:Object,
                default:function () {
                    return {}
                }
            },
            showTips:{
                type:Boolean,
                default:false
            },
            client:{
                type:Object,
                default:function () {
                    return {}
                }
            }
 },
data(){
            return{
                tableData: [],
                websocket: '',
                uploadingFileList: [],
            }
        },
watch:{
			//监听从父组建传过来的上传文件
            uploadingFiles:{
                handler(){
                    this.uploadingFilesArr()
                }
            }
        },
created(){
            this.uploadingFilesArr();
        },
methods:{
            progressTipClose(){
                this.$emit('tipsClose')
                this.showProgress = !this.showProgress;
            },
            handelProgress(){
                this.showProgress = !this.showProgress;
                this.showTips = false
            },
            uploadingFilesArr(){
                if(JSON.stringify(this.uploadingFiles) !== '{}'){
                    console.log(this.uploadingFiles)
                    this.ws();
                }
            },
            ws(){
                // WebSocket
                if ("WebSocket" in window) {
                    this.websocket = new WebSocket(`ws://${document.location.host}/api/ratess?id=${this.client.Id}`);
                    this.initWebSocket();
                } else {
                    alert("当前浏览器 Not support websocket");
                }
            },
            initWebSocket() {
                // 连接错误
                this.websocket.onerror = this.setErrorMessage;

                // 连接成功
                this.websocket.onopen = this.setOnopenMessage;

                // 收到消息的回调
                this.websocket.onmessage = this.setOnmessageMessage;

                // 连接关闭的回调
                this.websocket.onclose = this.setOncloseMessage;

                // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
                window.onbeforeunload = this.onbeforeunload;
            },
            setErrorMessage() {
                console.log(
                  "WebSocket连接发生错误   状态码：" + this.websocket.readyState
                );
            },
            setOnopenMessage() {
                console.log("WebSocket连接成功    状态码：" + this.websocket.readyState);
            },
            setOnmessageMessage(event) {
                // 服务器推送的消息
                // console.log("服务端返回：" + event);
                this.uploadingFileList = JSON.parse(event.data);
                let arr = [];
                this.uploadingFileList.map(item => {
                    var param = {};
                    param.Filename = item.Filename;
                    param.Totalsize = item.Totalsize;
                    param.progress = ((parseInt(item.Currentsize) / parseInt(item.Totalsize)).toFixed(2)* 100);
                    arr.push(param);
                })
                this.tableData = arr;
            },
            setOncloseMessage() {
                console.log("WebSocket连接关闭    状态码：" + this.websocket.readyState);
            },
            onbeforeunload() {
                this.closeWebSocket();
            },
            closeWebSocket() {
                this.websocket.close();
            },
            customColorMethod(percentage){
                if (percentage == 100) {
                    return '#D99D00';
                } else {
                    return '#36CFC9';
                }
            }
   }

这是一个上传文件列表展示组建，当有文件上传的时候（也就是监听到父组建传过来的uploadingFiles发生改变的时候），显示文件上传列表，获取文件上传进度，并且在上传的过程中，会显示文件上传进度，不想上传的时候可以点击‘x’取消上传。（但是这里的取消上传没有实现，el-upload的上传底层使用的ajax，貌似不是容易实现取消上传，如果有大佬实现了，欢迎分享）。

获取文件上传进度是一个webSocket协议的接口，动态地获取上传的进度。

index.vue

<deivce-file
             ref="deviceFile"
             @fileUpload="fileUpload"
             @fileDownload="fileDownload"
             :client="client"
             :filesystem="filesystem">
</deivce-file>
 
 <upload-tip :showTips="showTips"
                    :uploadingFiles="uploadingFiles"
                    :client="client"
                    @tipsClose="tipsClose"
                    @blockUpload="blockUpload">
        </upload-tip>

//methods
async fileUpload(sessionId,file,path){
                this.showTips = true
                let formData =await new FormData()
                await formData.append('file',file)
                await WSfileUpload(formData,{size:file.size,filepath:path.streamName,id:sessionId},(e)=>{
                    this.$set(this.uploadingFiles,file.name,e)
                }).then((res)=>{
                    this.$message.success(res.data)
                    ManagedFilesystem.refresh(this.filesystem[0], path)
                }).catch(err=>{
                    this.$message.error(err)
                    console.log(err)
                })
      },

这是父组建， fileUpload：文件上传

1. this.$set
   使用this. $set(obj, key, value)，往对象obj里面添加key,value

2. arr = “[]”
   JSON.parse(arr),可以把数组两端的引号去掉

3. element 中的自带method方法的使用(比如el-upload中的取消上传方法)
   在组建上：；ref=“xxx”
   在要触发的地方：this.$refs.xxx.abort()

 <el-upload
       class="upload-demo"
       ref="upload">
</el-upload>

onProgress () {
       this.$refs.upload.abort();
},