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

方法一：

原理：调用<el-upload>组件的方法唤起选择文件事件

效果：

页面代码：

1、选择图片按钮
<div class="flex_row_spacebetween btn" @click="chooseImg"><span class="el-icon-plus ic-plus-sign"></span> <span style="font-size: 13px;">更换票种图片</span>
</div>
2、展示选择的图片
<div><el-uploadref="piaoTypeDialogUpload"class="piao-type-dialog-upload"action="#":limit="2" :file-list="dialogform.img_files" list-type="picture-card":auto-upload="false" :before-upload="beforeAvatarUpload":on-change="piaoTypePicChange"accept=".png,.jpg"><i slot="default" class="el-icon-plus" ></i><div slot="file" slot-scope="{file}"><img class="el-upload-list__item-thumbnail" :src="file.url" alt=""><span class="el-upload-list__item-actions"><span class="el-upload-list__item-preview" @click="picShow(file)"><i class="el-icon-zoom-in"></i></span><span class="el-upload-list__item-delete" @click="picDel('dialogform',file)"><i class="el-icon-delete"></i></span></span></div></el-upload>
</div>

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;
}

方法二：

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

效果：

 页面代码：

1、选择文件按钮
<div><el-uploadaction="#"accept="image/*":on-change="(file)=>picChange(file,item)":show-file-list="false":multiple="item.multiple":before-upload="beforeAvatarUpload":auto-upload="false"><div><i class="el-icon-plus" style="color: #FF4C15;"></i><span style="color: #FF4C15;">上传</span></div></el-upload>
</div>
2、显示图片区域
<div class="imglist" v-if="item.file_list.length != 0"><div class="img-item" v-for="(img,index) in item.file_list" :key="item.pic_id"><img :src="img.url" class="hover" alt="" style="width: 100%;height:100%">3、预览图片，删除图片按钮<span class="el-upload-list--picture-card"><span class="el-upload-list__item-actions"><span class="el-upload-list__item-preview" @click="picShow(img)"><i class="el-icon-zoom-in"></i></span><span class="el-upload-list__item-delete" @click="zizhiPicDel(typeIndex+1,img)"><i class="el-icon-delete"></i></span></span></span></div>
</div>

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文档说明里就可以了