elementui上传多张图片可以点击预览 删除 预览的功能详解

ElementUI 提供了一个 Upload 组件，可以实现上传多张图片并且提供预览和删除功能。以下是详细的实现步骤：

1. 在组件中引入 Upload 组件：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList"
    :list-type="'picture-card'"
    :multiple="true"
    :auto-upload="false"
  >
    <i class="el-icon-plus"></i>
  </el-upload>
</template>

其中，`:on-preview`和`:on-remove`分别绑定了两个方法 `handlePreview` 和 `handleRemove`，用于预览和删除图片。`:file-list`用于绑定已上传的图片列表。

2. 在 `methods` 中定义 `handlePreview` 和 `handleRemove` 方法：

methods: {
  handlePreview(file) {
    // 预览图片
    this.$preview(file.url);
  },
  handleRemove(file, fileList) {
    // 删除图片
    this.fileList = fileList;
  }
}

其中，`handlePreview` 方法用于预览图片，`handleRemove` 方法用于删除图片。在 `handlePreview` 方法中，我们可以使用 `$preview` 方法来实现图片的预览。在 `handleRemove` 方法中，我们需要更新已上传的图片列表，即将删除后的列表重新赋值给 `fileList`。

3. 在 `mounted` 钩子中定义 `$preview` 方法：

mounted() {
  this.$preview = (url) => {
    this.$alert(`<img src="${url}" style="max-width: 100%">`, '预览', {
      dangerouslyUseHTMLString: true
    });
  };
},

在 `$preview` 方法中，我们使用 `this.$alert` 方法来显示预览图片的弹窗，其中的 `dangerouslyUseHTMLString` 选项用于在弹窗中显示 HTML 字符串。

4. 在 `data` 中定义 `fileList` 数组：

data() {
  return {
    fileList: []
  };
}

这里的 `fileList` 数组用于存储已上传的图片列表。

至此，我们就完成了 ElementUI Upload 组件的多张图片预览和删除功能实现。