elementui上传多张图片可以点击预览图片 删除图片

是的，Element UI 提供了 `el-upload` 组件用于文件上传，支持上传多张图片，并且可以实现预览和删除功能。

预览图片可以使用 `el-upload` 组件的 `list-type` 属性设置为 `'picture-card'`，然后在上传成功后的回调函数中，将上传成功的图片地址存储到一个数组中。然后可以使用 `el-dialog` 组件来展示预览图片的弹窗，将存储的图片数组传给 `el-carousel` 组件进行轮播展示。

删除图片可以在上传成功后的回调函数中，根据用户的操作将对应的图片地址从数组中删除即可。同时也可以通过 `before-remove` 属性来实现删除前的确认弹窗。

相关问题

elementui 上传图片

ElementUI 提供了一个 `el-upload` 组件来实现图片上传功能，以下是一个简单的示例：

<template>
  <el-upload
    class="upload-demo"
    action="//jsonplaceholder.typicode.com/posts/"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :file-list="fileList"
    :auto-upload="false"
    list-type="picture"
    :headers="{'Authorization': token}"
    :data="{userId: userId}"
    :multiple="true"
    :limit="3"
    :on-exceed="handleExceed"
    :show-file-list="false"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      token: 'your_token',
      userId: 'your_userId'
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }

      return isJPG && isLt2M;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 ${this.limit} 张图片，本次选择了 ${files.length} 张图片，共选择了 ${files.length + fileList.length} 张图片`);
    }
  }
}
</script>

<style>
.upload-demo {
  margin-top: 20px;
}
</style>

上面的示例中，我们通过配置 `el-upload` 组件的不同属性来实现以下功能：

- `action`：上传图片的接口地址
- `on-preview`：点击预览图片时的回调函数
- `on-remove`：点击删除图片时的回调函数
- `on-success`：图片上传成功时的回调函数
- `before-upload`：上传图片之前的校验函数
- `file-list`：已上传的图片列表
- `auto-upload`：是否自动上传
- `list-type`：文件列表的类型，这里设置为 `picture`，表示只显示图片
- `headers`：请求头信息
- `data`：上传图片时需要携带的参数
- `multiple`：是否支持多选
- `limit`：限制上传图片的数量
- `on-exceed`：超过上传图片数量限制时的回调函数
- `show-file-list`：是否显示文件列表

以上是 ElementUI 实现上传图片的基本示例，你可以根据实际需求来配置组件的不同属性。

elementui 单个图自上载 预览 删除

elementUI是一个基于Vue.js的UI框架，可以方便地进行前端页面的开发和设计。要实现单个图片的上传、预览和删除功能，可以借助elementUI提供的组件来实现。

首先，我们需要使用elementUI的上传组件来实现图片的上传功能。通过设置组件的属性，可以限制上传的文件类型和大小。

接下来，需要使用elementUI的图片预览组件来显示上传的图片。当图片上传成功后，可以获取到图片的URL地址，然后将该地址传递给预览组件进行显示。

最后，使用elementUI的弹窗组件或者确认框组件来实现删除功能。当用户点击删除按钮时，弹出确认框来询问用户是否确定删除该图片。如果用户确认删除，可以通过删除图片的URL地址来实现删除操作。

综上所述，通过使用elementUI的上传组件、图片预览组件和弹窗组件，可以方便地实现单个图片的上传、预览和删除功能。这些组件的使用非常简单，只需要按照官方文档提供的指引进行配置和调用即可实现所需的功能。