elementui上传并显示

使用 ElementUI 进行文件上传并显示，可以按照以下步骤操作：

1. 安装 ElementUI

在项目中安装 ElementUI，可以使用 npm 或 yarn 进行安装。

npm install element-ui --save

或者

yarn add element-ui

2. 引入 ElementUI 组件

在需要使用上传组件的地方，引入 ElementUI 的上传组件。

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :on-success="handleSuccess"
      :on-preview="handlePreview"
      :file-list="fileList"
      multiple
      :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: []
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response);
    },
    handlePreview(file) {
      this.dialogImageUrl = URL.createObjectURL(file.raw);
      this.dialogVisible = true;
    },
    submitUpload() {
      this.$refs.upload.submit();
    }
  }
};
</script>

3. 配置上传接口

在后端配置文件上传接口，接口应该返回上传成功后的文件路径或者其他相关信息。

4. 显示上传文件

通过 `fileList` 属性可以获取上传成功的文件列表，通过遍历列表将每个文件的路径显示出来即可。

<el-table :data="fileList">
  <el-table-column label="文件名" prop="name"></el-table-column>
  <el-table-column label="大小" prop="size"></el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button type="text" @click="downloadFile(scope.row)">下载</el-button>
    </template>
  </el-table-column>
</el-table>