elementUI 的上传组件＜el-upload＞，自定义上传按钮样式

方法一：

原理：调用组件的方法唤起选择文件事件

效果：

页面代码：

1、选择图片按钮

     
    更换票种图片

2、展示选择的图片

    
        
        

        
        
            
                
            
            
                
            
        
        
    

js代码：（其他逻辑与element文档的上使用一致）

chooseImg(){
    this.$refs['piaoTypeDialogUpload'].$refs['upload-inner'].handleClick()
},

css代码：

隐藏原来的选择图片按钮

.piao-type-dialog-upload .el-upload-list--picture-card .el-upload-list__item {
  width: 90px;
  height: 90px;
}

.piao-type-dialog-upload .el-upload--picture-card {
  display: none;
}

方法二：

原理：把图片显示分离出来，做选择图片使用，单独做一个显示图片的区域

效果：

 页面代码：

1、选择文件按钮

    
        

            
            上传
        
    

2、显示图片区域

    

        
        3、预览图片，删除图片按钮
        
         
                
                    
                
          
               
          
         
        
    

js 代码：

picChange(file,item){
    item.file_list.push({
        pic_id: xxxx,
        url: xxxx, // 图片地址，就如何从file里获取图片地址（可能你选择图片就上传到服务器了，这时候放的就是服务器返回的地址）
    });
}

css代码：

.imglist{
  display: flex;
  flex-wrap: wrap;
}
.imglist .img-item{
  width:120px;
  height:120px;
  margin-right: 15px;
  margin-top: 15px; 
}

总结

两个方法的代码量都差不多，看自己的逻辑偏向哪个转得快一点。方法二还需要自己写上删除图片的东西。方法一，图片放大删除都用elementui文档说明里就可以了