element 用户上传组件不支持大图预览，拿组件的简单修改一些，发表上来主要是记一下，以后可以用

效果图

<template><div class="flex-img"><div class="el-upload-list el-upload-list--picture-card" v-show="hideShow"><div class="el-upload-list__item is-success"><img class="flex-img__image" :src="imageUrl"><label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check"></i></label><span class="el-upload-list__item-actions" ><span@click="handlePictureCardPreview()"><i class="el-icon-zoom-in"></i></span><span class="el-upload-list__item-delete" v-show="disabledBoolean ? false:true"><i class="el-icon-delete" @click.stop="handleRemove()"></i></span></span></div></div><el-uploadclass="image-uploader":show-file-list="false":headers="headers"action="/api/blade-resource/oss/endpoint/put-file":on-success="handleAvatarSuccess":before-upload="beforeUpload"v-show="!hideShow"><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"     append-to-body><img width="100%" :src="imageUrl" alt=""></el-dialog></div>
</template><script>import {getToken} from "@/util/auth";export default {name: "uploadImage.vue",data() {return {file: this.imageUrl ? this.imageUrl : '',headers:"", //上传地址imageForm:"",//给父组件传值dialogVisible: false,//控制大图预览};},props:{imageUrl:{//父组件传值过来照片回显type:String,dispatch() {return "";}},disabledBoolean:{//父组件传过来是编辑，还是查看type: Boolean,default() {return false;}},},watch:{imageUrl(value) {this.file = value},imageForm(value) {//当照片地址改变的时候，给父组件传值const list = value;this.$emit('updateImage', list);}},computed: {hideShow() {//当图片多于一张的时候，就隐藏上传框return this.file === '' ? false : true}},methods: {handlePictureCardPreview() {this.dialogVisible = true;},beforeUpload(file) {const imageSize = file.size / 1024 / 1024 < 1;//上传图片大小不超过1Mif (!imageSize) {this.$message.error('上传封面大小不能超过 1MB!');}return imageSize;},//删除照片是清空所有handleRemove() {this.file = '';this.imageUrl="";this.imageForm="";},handleAvatarSuccess(res, file) {this.imageUrl =  URL.createObjectURL(file.raw);this.imageForm = res.data.name;},}
}
</script><style scoped>
.flex-img {display: flex;
}
.image-uploader {background-color: #fbfdff;border: 1px dashed #c0ccda;border-radius: 6px;-webkit-box-sizing: border-box;box-sizing: border-box;width: 148px;height: auto;cursor: pointer;line-height: 146px;vertical-align: top;text-align: center
}.image-uploader {font-size: 28px;color: #8c939d;
}.image-uploader .el-upload:hover {border-color: #409EFF;
}.flex-img__image {width: 146px;height: auto;border-radius: 6px;
}
</style><style>
.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;
}
.avatar-uploader .el-upload:hover {border-color: #409EFF;
}
.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;
}
.avatar {width: 178px;height: 178px;display: block;
}
</style>