Element UI Upload 组件 上传图片可删除、预览；设置只允许上传单张 / 多张图片的操作
效果
上传图片单张图片，可删除、预览 完整代码
如果不上传单张图片，可以把 :limit=“1” 删除，把单张图片操作步骤删除就是多张图片上传咯！
html部分
<el-form-item label="头像" prop="csAvatar"><el-upload action="aaa" list-type="picture-card" :class="{ disabled: uploadDisabled }":auto-upload="false" :limit="1" ref="upload" :on-change="handleChange" :on-preview="handlePictureCardPreview":on-remove="handleRemove" :file-list="fileList"><i class="el-icon-plus"></i></el-upload><!-- 预览图片 --><el-dialog :visible.sync="dialogVisibleimg" append-to-body><img width="100%" :src="dialogImageUrl" alt="" /></el-dialog></el-form-item>
javascript
data(){return {dialogVisibleimg: false,dialogImageUrl: "",formdata: new FormData(),fileList: [],addimg: [],removeimg: [],ruleForm: {csAvatar: "",}},methods:{// 添加活动展示照片handleChange(file, fileList) {const isJPG =file.raw.type === "image/jpeg" || file.raw.type === "image/png";const isLt5M = file.size / 1024 / 1024 < 5;if (!isJPG) {this.$message.error("上传头像图片只能是 JPG 、png 格式!");fileList.splice(-1, 1);//移除错误文件return false;}if (!isLt5M) {this.$message.error("上传头像图片大小不能超过 5MB!");fileList.splice(-1, 1);return false;}this.addimg = fileList[0].raw;this.ruleForm.csAvatar = this.addimg;},// 删除活动展示照片handleRemove(file, fileList) {console.log(fileList)this.ruleForm.csAvatar = '';this.formdata = new FormData();},// 活动展示照片预览handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisibleimg = true;},// 渲染编辑获取idapply() {this.fileList = [{url: "" }];//这里是踩坑的点，必须写this.fileList[0].url = res.data.csAvatar;//这里是调用接口获取到的值 res.data.csAvatar，赋值就可以回显了//this.fileList[0].url 做的是单张图片回显，多张图片回显可以去掉[0]},// 提交上传按钮submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {this.formdata = new FormData();if(this.ruleForm.csAvatar){//新增this.formdata.append("picture", this.ruleForm.csAvatar);//上传图片要把参数和值放在FormData里//如果有其他参数，也要一并放在this.formdata里/* 例：this.formdata.append("csLevel", this.ruleForm.serviceLevel);this.formdata.append("csMaximum", this.ruleForm.size);*/}//上传图片的接口（重要看传参部分怎么传参）CustomerServiceController.add(this, this.formdata)//传参直接传this.formdata即可.then((res) => {if (res.success == true) {this.$message.success("新建成功");} else {this.$message.error("新建失败");}}).catch((e) => {});} else {console.log("error submit!!");return false;}});},},computed: {uploadDisabled: function () {console.log(this.ruleForm.csAvatar)return this.ruleForm.csAvatar !='';},},}
css
.disabled{.el-upload--picture-card{display: none;}}
Element UI Upload 组件 设置只允许上传单张图片的操作
只要在检测到上传列表中已经有一张图片时，就隐藏上传组件，只展示上传列表。
那么就可以给整个上传组件一个class名称，这个class没有任何样式，只是做选择器用。
比如：disabled
那么就在监测到上传一张后，隐藏disabled 下面的 el-upload–picture-card
js：
computed: {uploadDisabled:function() {return this.imagelist.length >0 }, },
css：
.disabled .el-upload--picture-card {display: none;}
uploadDiseabled 会根据上传列表的长度动态的给upload的组件添加样式，进而将达到只上传一张的效果。然后这个方法也可以用于限制上传张数。
