Element-UI 自定义upload组件(进度条,删除,下载)

先看看效果图

 

上传过程中.png

 

上传结束后.png

代码也很简单,样式自己写好之后就剩下处理进度条了

             

                    

                        产品资料
                        （提示：文件请控制大小在10MB以内）
                        
                            浏览
                           
                    
                    

                        

                            {{item.name}}
                            

                                
                            
                            上传成功!
                            上传失败!
                            {{item.size | fileSize}}
                            

                                [删除]
                                [下载]
                            
                            

                                [删除]
                                [下载]
                            
                        
                    
                

methods部分

    <---文件上传部分-->
     //上传前的函数(用于验证上传文件格式及大小)
        beforeUploadFile(file){
            const isLt10M = file.size / 1024 / 1024 < 10;
            if (!isLt10M) {
              return false;
            }
        },
    //文件上传过程中的函数(在这里获取进度条的进度)
        uploadFileProcess(event, file, fileList){
            this.fileArr = fileList
            this.fileArr.forEach(item=>{
                if (item.percentage == 100) {

                } else {
                  item.progressFlag = true
                  item.progressPercent = Math.abs(item.percentage.toFixed(0));
                }
            })
        },
    //文件上传成功的函数(用于文件上传成功之后的逻辑)
        handleFileSuccess(res, file,fileList){
            this.fileArr = fileList
            this.fileArr.forEach((item,index)=>{
                item.progressFlag = false
                if(item.status == 'success'){
                    item.successFlag = true
                }else{
                    item.successFlag = false
                }
            })
        },
        //删除文件(基于文件列表的数据进行操作)
        removeFile(item,index){
            this.fileArr.splice(index,1)
        },
        //下载文件(基于文件列表的数据进行操作)
        downLoadFile(item,index){
            
        }

作者：Tomatoro
链接：https://www.jianshu.com/p/989af714553d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。