Element: [Feature Request] Add method to remove uploaded image previews in el-upload-list component while using scoped-slot for changing default thumbnail template

[frozenex]

Existing Component

Yes

Component Name

ElUploadList

Description

Need a helper method to remove a file from the files list in el-upload-list component.

When using el-upload component with scoped slot for changing the default thumbnail template there is no method available for removing the image previews which have been already created by.el-upload-list component.

[frozenex]

In the following example listed under el-upload component docs. How can we implement the handleRemove method. I am unable to remove the image previews.

<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>

[angelapper]

you can not ! they got bug on this part..
:file-list is not bind, and you even can not use fileList to remove, what you need to do currently, you have to maintain all this by yourself.

[angelapper]

for example, get file list from upload component

  // since elm do not sync file list, we have to hack it
  const uploadFileList = this.$refs.uploadComponent.uploadFiles
  uploadFileList.splice(uploadFileList.indexOf(file), 1)