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

先看看效果图

 

Element-UI 自定义upload组件(进度条,删除,下载)_第1张图片

上传过程中.png

 

Element-UI 自定义upload组件(进度条,删除,下载)_第2张图片

上传结束后.png

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

             

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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

你可能感兴趣的:(web前端)