Vue element ui 上传图片封面 回显图片

可以通过以下步骤实现：

1. 在vue中使用`el-upload`组件实现图片上传；
2. 在上传成功后，从接口中获取到图片的URL；
3. 将URL存储在vue的data中；
4. 通过`<img>`标签的`src`属性将图片回显。具体代码如下：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/your-upload-api"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :limit="1"
      :show-file-list="false"
    >
      <el-button type="primary">上传封面</el-button>
    </el-upload>
    <img v-if="imageUrl" :src="imageUrl" style="max-width:100%" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: "", // 存储图片地址
    };
  },

  methods: {
    handleSuccess(response, file, fileList) {
      // 上传成功后获取图片URL
      if (response.status === "success") {
        this.imageUrl = response.data.imageUrl;
      } else {
        this.$message.error("上传图片失败");
      }
    },

    beforeUpload(file) {
      // 限制图片上传的大小和类型
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2; // 限制上传图片的大小为2M以内

      if (!(isJPG || isPNG)) {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式");
      }

      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB");
      }

      return (isJPG || isPNG) && isLt2M;
    },
  },
};
</script>