element-ui上传upload缩略图踩坑

复制element-ui upload上传文件缩略图示例代码，发现删除图片后界面无更新，特此记录一下，

<el-upload
  action="#"
  list-type="picture-card"
  :auto-upload="false">
    <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="handleDownload(file)"
        >
          <i class="el-icon-download"></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="dialogImageUrl" alt="">
</el-dialog>
<script>
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false
      };
    },
    methods: {
      handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      }
    }
  }
</script>

因为我只需要调用删除功能，所以先删除其他不需要的功能，直接在upload上调用on-remove方法就行，如下所示，

	<el-upload
	 :action="imgUploadUrl"
	  :headers="headers"
	  list-type="picture-card"
	  :on-success="handleSuccess"
	  :before-upload="beforeUpload"
	  :on-remove="handleRemove"
	>
	  <i slot="default" class="el-icon-plus" />
	</el-upload>

// 上传图片成功回调
    handleSuccess(response, file, fileList) {
    },
// 删除成功的回调
    handleRemove(file) {
    }