elementui怎么文件上传并显示图片

Element UI 提供了一个名为 Element Upload 的组件，用于处理文件上传功能。在 Vue.js 中，你可以轻松地集成这个组件来实现文件上传并显示图片。以下是基本步骤：

1. 引入组件：首先，在你的 Vue 文件中引入 Element UI 的 `el-upload` 组件，可以全局注册或者按需引入。

<script src="https://unpkg.com/element-ui/lib/upload/index.js"></script>

2. 创建组件模板：在需要上传和展示图片的地方，创建一个 `el-upload` 元素，并设置必要的属性。

<template>
  <el-upload
    :action="'/api/upload'"  <!-- 这里替换为你实际的上传地址 -->
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :file-list="list"  <!-- 存储上传文件的信息列表 -->
  >
    <i class="el-icon-upload"></i> 选择文件
  </el-upload>

  <!-- 如果你想预览图片，添加 el-image 组件 -->
  <el-image
    v-for="item in list"
    :key="item.id"
    :src="item.url"  <!-- 这里的 url 应该来自 file-list，包含图片 URL -->
    :alt="item.name"
  ></el-image>
</template>

3. 定义方法：编写一些方法来控制上传过程和成功后的操作。

<script>
export default {
  data() {
    return {
      list: [],  // 初始化为空数组，用于存储上传文件信息
    };
  },
  methods: {
    beforeUpload(file) {
      return this.validateFile(file);  // 自定义验证规则
    },
    
    handleSuccess(response, file) {
      if (response.status === 200) {
        let imageUrl = response.data.url;  // 获取服务器返回的新图片URL
        this.$set(this.list, this.list.length - 1, { ...file, url: imageUrl });
      }
    },
    
    validateFile(file) {
      // 验证文件大小、类型等，这里仅做简单示例
      const maxSize = 5 * 1024 * 1024; // 5MB
      if (file.size > maxSize) {
        return false;
      }
      return true;
    },
  },
};
</script>