el-upload上传图片查看和删除

`el-upload`是Element UI库中的一个组件，用于实现文件上传功能，包括图片上传。在Vue.js项目中，你可以这样使用它：

1. 引入组件：首先，在你的Vue文件里引入`ElUpload`和相关的样式。

<template>
  <div>
    <el-upload
      :action="uploadUrl"
      :file-list="imageList"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="beforeUpload"
      :remove-file="handleRemove"
    >
      <i class="el-icon-upload"></i> <em slot="tip">点击上传</em>
    </el-upload>
  </div>
</template>

<script>
import { ElUpload } from 'element-ui';
export default {
  components: {
    ElUpload,
  },
  // 其他配置...
};
</script>

2. 配置选项：
- `action`: 上传的服务器地址。
- `file-list`: 上传后的文件列表，显示已上传的图片。
- `before-upload`: 文件上传前的钩子函数，可以在这里做预处理。
- `handleSuccess`: 文件上传成功的回调，通常会接收到服务器返回的数据。
- `handleError`: 文件上传失败的回调。
- `handleRemove`: 删除文件的操作，用户可以选择单个或全部文件删除。

3. 示例方法：
- `handleRemove(file)`: 删除指定文件。
- `handleSuccess(response, file)` 或 `handleSuccess(response, file, fileList)`: 成功上传后，可以根据response处理数据，更新文件列表。

4. 指令和事件：
- 用户选择文件后，触发`change`事件，传递当前选择的文件对象给组件。
- 可以监听`dragover`、`drop`等事件，支持拖拽上传。