elementui上传并显示

Element UI 提供了一个上传组件 `el-upload`，可以方便地上传文件并显示。

首先，你需要在项目中引入 Element UI 组件库和样式：

<!-- 引入 Element UI 样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入 Element UI 组件库 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

然后，在你的 Vue 组件中使用 `el-upload` 组件：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :auto-upload="false"
      list-type="picture"
      :limit="3"
      :on-exceed="handleExceed"
      :on-remove="handleRemove"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <div v-for="item in fileList" :key="item.uid">
      <img :src="item.url" alt="">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList);
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500K = file.size / 1024 < 500;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        return false;
      }
      if (!isLt500K) {
        this.$message.error('上传头像图片大小不能超过 500KB!');
        return false;
      }
      return true;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    }
  }
};
</script>

在 `el-upload` 组件中，我们可以设置上传的一些参数：

- `class`: 自定义样式类名，可以用于设置样式；
- `action`: 文件上传的地址；
- `on-success`: 文件上传成功的回调函数；
- `before-upload`: 上传前的钩子函数，可用于校验文件格式、大小等信息；
- `file-list`: 已上传文件列表；
- `auto-upload`: 是否自动上传；
- `list-type`: 文件列表类型，可选值为 `text`、`picture`、`picture-card`；
- `limit`: 文件上传数量限制；
- `on-exceed`: 文件数量超出时的回调函数；
- `on-remove`: 文件移除时的回调函数。

在组件中，我们可以使用 `v-for` 指令遍历已上传的文件列表，并使用 `img` 标签显示文件内容。

以上就是使用 Element UI 上传文件并显示的示例。