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

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

deviceFile.vue

             上传文件


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

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

uploadTip.vue

                上传列表
                关闭
            
            

                
 

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

 
 
        

//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()

 


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