elementui上传图片

ElementUI提供了一个el-upload组件用于上传文件，包括图片。以下是一个简单的示例：

<template>
  <div>
    <el-upload
      class="avatar-uploader"
      action="//jsonplaceholder.typicode.com/posts/"
      :show-file-list="false"
      :on-success="handleSuccess"
      :before-upload="beforeUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '' // 上传成功后图片的地址
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      this.imageUrl = URL.createObjectURL(file.raw); // 使用本地地址作为图片地址
    },
    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 格式的图片');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB');
      }
      return isJPG || isPNG && isLt2M;
    }
  }
}
</script>

<style scoped>
.avatar-uploader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background-color: #f5f5f5;
  overflow: hidden;
}
.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}
</style>

在上面的示例中，我们使用了el-upload组件来实现图片上传功能。我们设置了action属性为一个API接口，用于后端处理上传的文件，这里我们使用了jsonplaceholder提供的虚拟API。当用户选择了一张图片后，我们会先判断图片是否符合要求，如果不符合则会弹出提示框，否则会调用handleSuccess方法来处理上传成功后的回调。在handleSuccess方法中，我们使用URL.createObjectURL方法将本地图片地址作为图片的地址，从而展示上传的图片。