el-upload 修改默认样式

官网默认样式：

 

 目标样式：

 

 

1、template：

<div class="adds_item">
    <div class="adds_item_txt">软件图片：</div>
    <div class="adds_item_info">
        <el-upload
            class="upload-demo"
            :class="{hide:hideUpload}"
            action=""
            :auto-upload="false"
            :show-file-list='true'
            :file-list="certificates"
            :on-preview="showimg"
            :on-change="handlePictureCardPreview"
            :on-exceed="handleExceed"
            :on-remove="handleRemove"
            :limit="1"
            accept=".jpg,.jpeg,.png,.JPG,.JPEG"
            list-type="picture-card">
            <i class="el-icon-picture-outline"></i>
            <el-button class="upload_btn" size="small" type="primary">上传图片</el-button>
        </el-upload>
        <el-dialog :visible.sync="dialogVisibleImg">
            <img width="100%" :src="showimgs" alt="">
        </el-dialog>
    </div>
</div>

2、data：

hideUpload: false,
limitCount: 1,
software_Img: '',//软件图片
certificates: [], // 软件图片回显
dialogVisibleImg: false,//软件图片是否显示大图
showimgs: '',//软件图片大图

3、methods：

// 软件上传-软件图片选中
handlePictureCardPreview(file, fileList) {
    this.softwareChange = true;
    const isLt5M = file.size <  1024 * 1024;
    let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
    if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 1M!');
        fileList.splice(-1,1);
        return false;
    }
    if(extension !== 'jpg' && extension !== 'jpeg' && extension !== 'png' && extension !== 'JPG' && extension !== 'JPEG') {
        this.$message.error('只能上传.jpg,.jpeg,.png,.JPG,.JPEG的文件!');
        fileList.splice(-1,1);
        return false;
    }
    const readers = new FileReader();
    readers.readAsDataURL(file.raw);
    readers.onload = () => {
        this.software_Img = readers.result;
    }
    this.hideUpload = fileList.length >= this.limitCount;
},
// 软件上传-软件图片限制上传
handleExceed(files, fileList) {
    this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
// 软件上传-软件图片删除
handleRemove(file, fileList) {
    var that = this;
    fileList.forEach((item, index) => {
        that.certificate.push(item.url);
    })
    this.software_Img = '';
    this.softwareChange = false;
    this.hideUpload = fileList.length >= this.limitCount;
},
// 软件上传-软件图片显示
showimg(file) {
    this.showimgs = file.url;
    this.dialogVisibleImg = true;
},

4、css：

//上传按钮
.upload-demo /deep/ .el-upload--picture-card .upload_btn{
    background: #fff;
    color: #3C56C6;
    border: none;
    border-radius: 0;
    position: absolute;
    bottom: -5px;
    right: -90px;
    pointer-events: auto; //按钮穿透点击
    text-decoration: underline;
}
.upload-demo /deep/ .el-upload--picture-card,
.upload-demo /deep/ .el-upload-list--picture-card .el-upload-list__item{
    line-height: 100px;
    font-size: 12px;
    height: 100px;
    width: 100px;
    position: relative;
    background: #F8F8F8;
    border: 1px solid #d2d2d2;
    border-radius: 0;
}
.upload-demo /deep/ .el-upload--picture-card{
    pointer-events: none; //禁止点击
}