emmm我又来了๑乛◡乛๑

饿了么上传组件的文件列表filelist有个删除功能，我看源代码它是直接删除，并不会提示。issue上也有不少开发者提过这个问题，开发组还是建议自己写（想偷懒都不行……）

除了复写文件列表外，还加了一个上传状态的显示。

先上效果图：

悬浮时的效果：

上传时的效果：

以下测试在vue(v2.5) + vue-router(v3.0) + element-ui(v2.0)环境下进行，一些细节（如icon）会与上述图片不相符。所以每个步骤都加个图片=。=

步骤一：卡片化

其实就是重写样式，写个类似el-card组件的样式

放大按钮和删除按钮只有鼠标悬浮才显示：

*{    box-sizing: border-box;}.img-list{    overflow:hidden;    width:100%;}.img-list .img-content{    float:left;    position:relative;    display:inline-block;    width:200px;    height:270px;    padding:5px;    margin:5px 20px 20px 0;    border:1px solid #d1dbe5;    border-radius:4px;    transition:all .3s;    box-shadow:0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);}.img-list .img-content img{    display:block;    width:100%;    height:190px;    margin:0 auto;    border-radius:4px;}.img-list .img-content .name{    margin-top:10px;}.img-list .img-content .name>div{    width:90%;    text-overflow:ellipsis;    overflow:hidden;    height:25px;    line-height:25px;}.img-list .img-content:hover .del,.img-list .img-content:hover .layer{    opacity:1;}.img-list .img-content .del,.img-list .img-content .layer{    opacity:0;    transition:all .3s;}.img-list .img-content .del{    position:absolute;    bottom:10px;    right:10px;    color:#8492a6;    cursor:pointer;    font-size:1.1em;}.img-list .img-content .layer{    position:absolute;    left:0;    right:0;    top:0;    height:200px;    color:#fff;    text-align:center;    z-index:5;    background-color:rgba(0,0,0,.4);}.img-list .img-content .layer i{    font-size:1.6em;    margin-top:80px;}

效果图：

步骤二：放大

这个操作很简单，用el-dialog组件

    
         ...    
             
          
     
    

步骤三：删除和修改名字

emmm还是个简单的操作

handleFileRemove(file,i){//删除图片    console.log(file,i)    if(!file.url){        return false;    }    let that = this;    this.$confirm('是否删除此附件？','提示',{        confirmButtonText: '确定',        cancelButtonText: '取消',        type: 'warning'    }).then(() => {        //可添加ajax        this.$message.success("删除成功")        this.$message({            type: 'success',            message: '删除成功',            onClose: () => {                that.imagelist.splice(i,1)            }        })    }).catch((meg) => console.log(meg))},handleFileName(file,i){//修改名字    console.log(file,i)    let that = this;    this.$prompt("请输入新文件名：","提示：",{        confirmButtonText: '确定',        cancelButtonText: '取消'    }).then(({ value }) => {        console.log(value)        if(!value){            return false;        }        //可添加ajax        this.$message.success("操作成功")        that.imagelist[i].name = value    }).catch(() => {})},

效果图：

步骤四：上传进程

emmm其实这篇文章的重点在这儿。

css:

插播一则tips：在项目中文件是直接上传到阿里云，上传参数data会动态变化。但是由于自动上传一直出错（上传参数data有些关键字不存在），后来用手动上传却是可行。所以测试了半天才采用以下方式：

methods:

uploadOnChange(file){    if(file.status == 'ready'){        this.params.data = {            //change        }        this.$nextTick(() => {            this.$refs.upload.submit();        })    }}

加个上传加载的过程，el-progress组件恰好适用

.img-list .img-progress{    text-align:center;    padding-top:50px;}

data:

data(){    return {        progress: 0,//上传进度        pass: null,//是否上传成功    }},computed: {    proStatus(){//上传状态        if(this.pass){            return 'success'        }else if(this.pass == false){            return 'exception'        }else{            return ''        }    }},

methods:

uploadOnProgress(e,file){//开始上传    console.log(e.percent,file)    this.progress = Math.floor(e.percent)},uploadOnChange(file){    console.log("——————————change——————————")    // console.log(file)    if(file.status == 'ready'){        console.log("ready")        //重置progress组件        this.pass = null;        this.progress = 0;    }else if(file.status == 'fail'){        this.$message.error("图片上传出错，请刷新重试！")    }},uploadOnSuccess(e,file){//上传附件    console.log("——————————success——————————")    this.pass = true;    this.$message.success("上传成功")    this.imagelist.push({        url: file.url,        name: '新增图片'    })},uploadOnError(e,file){    console.log("——————————error——————————")    console.log(e)    this.pass = false;},

原本是用this.progress控制status，但是后来发现及时上传进度100%也不一定上传成功，所以改用this.pass。用饿了么的上传地址偶尔会跨域报错，上传多几次又成了=。=

Github地址：（component/uploadlist.vue）