Vue.js Element UI自定义上传缩略图如何实现删除文件功能

云上老周

2026-7-23

Element UI Upload自定义模板中触发删除事件的实现方法

核心思路

自定义缩略图模板时，需手动调用Upload组件的内部删除方法，或通过组件引用同步更新文件列表，关键是确保传递正确的文件对象来触发对应逻辑。

具体实现步骤

1. 给Upload组件添加ref引用

在Upload标签上设置ref属性，方便后续获取组件实例：

<el-upload
  ref="upload"
  action="/your-upload-api"
  :file-list="fileList"
  list-type="picture-card"
>
  <template #file="{ file }">
    <div>
      <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 class="el-upload-list__item-delete" @click="handleRemove(file)">
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
  </template>
  <i class="el-icon-plus"></i>
</el-upload>

2. 实现删除方法

在Vue的methods中定义删除逻辑，推荐直接调用组件内置的handleRemove方法，它会自动同步更新fileList：

methods: {
  handleRemove(file) {
    // 调用Upload组件内置的删除方法，自动处理文件列表同步
    this.$refs.upload.handleRemove(file);
  },
  handlePictureCardPreview(file) {
    // 按需实现预览逻辑
  }
}

3. 自定义扩展（可选）

如果需要在删除前添加确认提示，或额外处理业务逻辑，可以修改删除方法：

handleRemove(file) {
  this.$confirm('确定要删除该文件吗？', '提示', {
    type: 'warning'
  }).then(() => {
    this.$refs.upload.handleRemove(file);
    this.$message.success('删除成功');
  }).catch(() => {
    this.$message.info('已取消删除');
  });
}