element-ui(vue)upload组件提交后清空文件列表

在 element-ui 的 Upload 组件中，可以通过监听 `success` 事件来清空文件列表。具体操作如下：

1. 给 `el-upload` 组件添加 `ref` 属性，如 `ref="upload"`。

2. 在 `el-upload` 组件上绑定 `success` 事件和对应的处理函数，如下所示：

   <el-upload ref="upload" :on-success="handleSuccess"></el-upload>

3. 在 `handleSuccess` 函数中，调用 `clearFiles` 方法来清空文件列表，如下所示：

   methods: {
     handleSuccess(response, file, fileList) {
       // 处理上传成功的逻辑
       this.$refs.upload.clearFiles(); // 清空文件列表
     }
   }

通过以上操作，当上传成功后，文件列表将被清空。

相关问题

vue element ui upload 组件内图片清空

如果你想在 Element UI Upload 组件内清空图片，可以使用以下方法：

1. 通过 `ref` 获取 Upload 组件实例，并调用 `clearFiles` 方法：

<template>
  <div>
    <el-upload
      ref="upload"
      class="upload-demo"
      action="/upload"
      :file-list="fileList"
      :auto-upload="false"
      list-type="picture">
      <el-button slot="trigger">上传文件</el-button>
      <el-button type="primary" @click="clearFiles">清空文件</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [
        // 初始文件列表
      ]
    }
  },
  methods: {
    clearFiles() {
      this.$refs.upload.clearFiles()
    }
  }
}
</script>

2. 通过给 Upload 组件绑定一个 `key` 属性，来强制刷新 Upload 组件实例：

<template>
  <div>
    <el-upload
      key="upload"
      class="upload-demo"
      action="/upload"
      :file-list="fileList"
      :auto-upload="false"
      list-type="picture">
      <el-button slot="trigger">上传文件</el-button>
      <el-button type="primary" @click="clearFiles">清空文件</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [
        // 初始文件列表
      ]
    }
  },
  methods: {
    clearFiles() {
      this.fileList = []
    }
  }
}
</script>

以上两种方法都可以实现清空图片的效果，具体使用哪种方法可以根据你的实际情况来决定。

vue3语法糖中element组件库如何清空上传的文件

在Vue 3中，你可以使用`clearFiles()`方法来清空Element UI组件库中上传的文件。这个方法可以通过`$refs`来访问上传组件的引用，然后调用该方法进行文件清空操作。以下是一个示例：

<template>
  <el-upload
    ref="uploadRef"
    action="/upload"
    :on-success="handleSuccess"
  >
    <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
  </el-upload>
  <el-button size="small" @click="clearUpload">清空文件</el-button>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      // 处理上传成功逻辑
    },
    clearUpload() {
      this.$refs.uploadRef.clearFiles(); // 调用clearFiles方法清空上传的文件
    }
  }
}
</script>

在上面的示例中，`ref="uploadRef"`将上传组件赋予了一个引用名为`uploadRef`。然后，通过`this.$refs.uploadRef`来访问上传组件，并调用`clearFiles()`方法来清空上传的文件。

希望这个示例能帮助到你！如果还有其他问题，请随时提问。