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; //禁止點擊
}