vue elementui上传图片并显示

可以使用 ElementUI 的 Upload 组件来实现图片上传并显示。具体步骤如下：

1. 在 Vue 组件中引入 Upload 组件：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/your-upload-api"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :file-list="fileList"
      list-type="picture-card">
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 上传成功后的回调函数
      console.log(response);
    },
    beforeUpload(file) {
      // 上传前的校验函数
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
        return false;
      }
      return true;
    }
  }
};
</script>

2. 在 handleSuccess 回调函数中，将上传成功后的图片地址保存到 fileList 中：

handleSuccess(response, file, fileList) {
  // 上传成功后的回调函数
  console.log(response);
  this.fileList.push({
    name: file.name,
    url: response.data.url
  });
}

3. 在模板中使用 v-for 循环遍历 fileList，将图片显示出来：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/your-upload-api"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :file-list="fileList"
      list-type="picture-card">
      <i class="el-icon-plus"></i>
    </el-upload>
    <div v-for="(item, index) in fileList" :key="index">
      <img :src="item.url" alt="">
    </div>
  </div>
</template>