携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

如图，要实现一个卡片列表，卡片内容包括一些基本信息和它的封面。当鼠标悬浮在卡片上的时候，出现更改封面的图标，点击图标可以上传和修改封面图片，点击图标之外的其他地方跳转到这个卡片活动的详情页面，下面我们一起看看吧

html部分

list部分用flex布局，将更改封面的icon，定位到卡片中间，样式设置隐藏，鼠标悬浮到卡片，再将图标show出来。
icon图标的点击事件要用@click.stop事件阻止冒泡
上传功能直接用的elementui的el-upload组件

<div class="list" v-if="list.length">
    <div class="list-item" v-for="item in list" :key="item.id" @click="skipNext(item)">
        <div class="status">
            <div class="tag yellow-color" v-if="item.actStatus == 0">未开始</div>
            <div class="tag blue-color" v-else-if="item.actStatus == 1">进行中</div>
            <div class="tag" v-else-if="item.actStatus == 2">已结束</div>
        </div>
        <div class="img">
            <el-image class="img" :src="item.viewPath ? item.viewPath : require('@/assets/images/cover1.png')" fit="cover"></el-image>
        </div>
        <div class="info">
            <div class="info-item title txt-overflow">{{item.name}}</div>
            <div class="info-item name">{{item.joinSize || 0}}人正在参加</div>
            <div class="info-item time">{{item.tcreate || '--'}}</div>
        </div>
        <div class="edit" @click.stop="actId = item.id">
            <el-upload
                :accept="'image/*'"
                action=""
                :http-request="uploadFile"
                :before-upload="beforeUpload"
            >
                <i class="el-icon-edit"></i>
            </el-upload>
        </div>
    </div>
</div>

js代码

上传用到两个方法：

beforeUpload ，上传之前先判断文件大小，类型是否符合要求再上传
uploadFile，上传方法，上传成功会返回上传的文件信息，文件信息是需要传给后台的

// 判断图片上传附件类型
beforeUpload(file) {
    let testMsg = file.name.substring(file.name.lastIndexOf('.') + 1);
    const extension = testMsg === 'png';
    const extension2 = testMsg === 'jpg';
    const extension3 = testMsg === 'jpeg';
    const isLt2M = file.size / 1024 / 1024 < 2 ;// 文件大小限制
    if(!extension && !extension2 && !extension3) {
        this.$message.error(`上传失败,文件格式错误`);
        return false;
    }
    if(!isLt2M) {
        this.$message.error(`上传失败,文件大小不能超过2MB`);
        return false;
    }
    return true;
},

// 上传图片logo
uploadFile(params) {
    let file = params.file;
    let formData = new FormData();
    formData.append("picture", file);
    formData.append("type", '1');
    this.$postFormFile(uploadCover, formData).then(res => {
        this.imgUrl = res.result;
        // 掉后台的保存封面接口
    })
},

// 跳转到活动详情
skipNext(item) {
    this.$router.push('/exercise/home');
},

elementUI实现卡片封面上传

html部分

js代码