element ui el

element ui el

需求如下：

这里是在form表单中做的

<el-form-item label="凭证照片"   ref="loadElement" prop="picList"><el-uploadaction="#"ref="upload"list-type="picture-card":on-preview="handlePictureCardPreview":on-remove="handleRemove":http-request="uploadAvatar":before-upload="beforeAvatarUpload":file-list="fileList"><!-- :action="baseUrl" --><img v-if="imageUrl" :src="imageUrl" class="avatar" /><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload><el-dialog :visible.sync="dialogVisible" append-to-body><img width="100%" :src="dialogImageUrl" alt=""></el-dialog></el-form-item>

      // 图片上传功能uploadAvatar(item) {console.log(item.file,"1234")const formData = new FormData()formData.append('files', item.file)const uid = item.file.uiduploadManyFile(formData).then(res => {this.form.picList.push({ key: uid, value:sult })console.log(this.form.picList,"434")// ptyUpload()})if (item.file) {this.$refs.loadElement.clearValidate();}},beforeAvatarUpload(file) {const isJPG = pe === 'image/jpeg'const isPng = pe === 'image/png'const isLt2M = file.size / 1024 / 1024 < 2if (!isJPG && !isPng) {this.$('上传图片只能是 JPG或png 格式!')}if (!isLt2M) {this.$('上传图片大小不能超过 2MB!')}return (isJPG || isPng) && isLt2M},handleRemove(file, fileList) {for (const i in this.form.picList) {if (this.form.picList[i].key === file.uid) {this.form.picList.splice(i, 1)}console.log(this.form.picList,"434")}},handlePictureCardPreview(file) {this.dialogImageUrl = file.urlthis.dialogVisible = true},/*** 清空上传组件*/emptyUpload() {const mainImg = this.$refs.uploadif (mainImg) {if (mainImg.length) {mainImg.forEach(item => {item.clearFiles()})} else {this.$refs.upload.clearFiles()}}},

data 中定义
form: {id: "",picStr: "",picList: [],},
imageUrl: "",
dialogImageUrl: "",

最后得在弹窗消除后清除图片

 close() {this.$refs.upload.clearFiles();}