关于elementui中:key=“clearThumbnail“问题

在使用elementui的上传文件缩略图功能时，发现官方的开发文档并没有给出删除页面图片的代码，所以只能自己写。但是查了很多网上的资料，大多都不能删掉页面上的图片，所以去问了一下AI，果然有惊喜。

先附上代码。

<div class="layui-upload">
					<div class="layui-form-item">
						<label class="layui-form-label">缩略图</label>
						<div class="layui-input-block" style="width: 100%;">
							<div id="app">
								<el-upload action="__URL__/upload_images" list-type="picture-card" :auto-upload="true"
									:on-success="handleAvatarSuccess" :before-upload="beforeUpload" :limit="1"
									:on-error="uploadError" ref="upload" :on-remove="handleRemove" :key="clearThumbnail"
									accept="image/jpeg,image/jpg,image/png">
									<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="handlePictureCardPreview(file)">
												<i class="el-icon-zoom-in"></i>
											</span>
											<span v-if="!disabled" class="el-upload-list__item-delete"
												@click="handleRemove(file)">
												<i class="el-icon-delete"></i>
											</span>
										</span>
									</div>
								</el-upload>
								<el-dialog :visible.sync="dialogVisible">
									<img width="100%" :src="image_url" alt="">
								</el-dialog>
							</div>

						</div>
					</div>
				</div>

//上传图片
		new Vue({
			el: '#app',
			data() {
				return {
					control: true,//控制器
					image_url: '', //存储对话框中展示的图片链接地址
					dialogVisible: false, //控制对话框是否显示
					disabled: false, //控制按钮是否禁用
					formdata: new FormData(),
					fileList: [],
					clearThumbnail: false,//清空图片
				};
			},
			methods: {
				// 上传文件之前
				beforeUpload(file) {
					//文件大小校验
					if (file.size > 10 * 1024 * 1024) {
						this.$message('文件过大，请上传小于10MB的文件〜')
						return false
					}	
					this.control = true;				
					return true
				},
				//上传图片
				uploadFiles(file) {
					// 调用文件大小校验方法
					if (this.beforeUpload(file.file)) {
						this.formData = new FormData()
						this.formData.append('file', file.file);
						axios({
							method: 'post',
							url: '__URL__/upload_images',
							data: {
								'param1': value,
							}
						})
						// 请求接口
						uploadFiles(this.formData).then((res) => {
							if (res.code == '0') {
								this.$message({
									message: '上传成功',
									type: 'success'
								})
								// 图片赋值
								image_url = res.data.realPath
							} else {
								// 错误信息
								this.$message({
									message: res.msg,
									type: 'error'
								})
							}
						})
					}
				},
				//上传成功
				handleAvatarSuccess(response, file, fileList) {
					console.log('上传成功的文件信息：', response, file, fileList);
					this.image_url = response.data.src;
					this.fileList.push(image_url);
				},
				//上传失败
				uploadError(err, file, fileList) {
					this.$message({
						type: 'warning',
						message: '上传失败'
					})
				},
				//输出被删除的文件信息
				handleRemove(file) {
					console.log("执行了删除操作");
					let _this = this;
					url = file.response.data.src;
					$.post('__URL__/remove_image', { image_url: url }, function (res) {
						console.log(res)
						if (res != 1) {
							layer.msg('删除缩略图失败', { icon: 5, time: 1000 });
							return false; // 阻止表单提交
						} else {
							image_url = "";
							_this.clearThumbnail = true;
							_this.control = false;
							console.log("全删")
						}
					}, 'json');
					this.clearThumbnail = false;
				},
				//对应图片的链接地址存储到到image_url，预览图片
				handlePictureCardPreview(file) {
					this.image_url = file.url;
					if (this.control != false) {
						this.dialogVisible = true;
					}
				},
			}
		});

我通过:key="clearThumbnail"连接到JS中的clearThumbnail: false,//清空图片，达到页面点击删除能清空图片的效果。

但是我很快发现，在第一次删除图片后，第二次插入图片再删除时，图片不会在页面上保留，但是存储图片的文件夹里却会保存第二次插入的图片。

我一点一点找问题所在，发现图片的删除方法根本没有被触发。

只能再去问AI。

【根据你提供的代码，当执行handleRemove方法时，会向服务器发送删除图片的请求。如果请求成功，会将图片链接地址清空（image_url = ""），同时将clearThumbnail设置为true。

在页面上，如果clearThumbnail为true，组件中的<el-upload>标签会自动清空已上传的文件列表（即清空页面上的图片）。这是由于<el-upload>组件的clearFiles方法会在clearThumbnail为true时被调用，从而清空已上传的文件列表。

因此，当执行handleRemove方法时，会先清空页面上的图片，然后再向服务器发送删除图片的请求。如果请求失败，页面上的图片不会恢复。如果请求成功，由于image_url被清空，页面上的图片不会重新显示出来。】

原来是第一次执行完删除图片的方法后，clearThumbnail依旧保持在true的状态，所以我们要手动把它调回false。

//输出被删除的文件信息
				handleRemove(file) {
					console.log("执行了删除操作");
					let _this = this;
					url = file.response.data.src;
					$.post('__URL__/remove_image', { image_url: url }, function (res) {
						console.log(res)
						if (res != 1) {
							layer.msg('删除缩略图失败', { icon: 5, time: 1000 });
							return false; // 阻止表单提交
						} else {
							image_url = "";
							_this.clearThumbnail = true;
							_this.control = false;
							console.log("全删")
						}
					}, 'json');
					this.clearThumbnail = false;//就在这里手动调回false
				},

这样就可以了。

不过因为我还需要在上传文件之前，把control 手动调成 true，这样就不影响触发handlePictureCardPreview(file)方法预览图片。

// 上传文件之前
				beforeUpload(file) {
					//文件大小校验
					if (file.size > 10 * 1024 * 1024) {
						this.$message('文件过大，请上传小于10MB的文件〜')
						return false
					}	
					this.control = true;//手动调成true				
					return true
				},

  一切都处理好了，终于能达到我想要的效果了。

完结撒花。