使用vue3+Element-plus编写图片上传 代码加注释

好的，下面是使用 Vue3+Element-plus 编写图片上传的代码及注释：

<template>
  <div>
    <el-upload
      class="avatar-uploader"
      action="/api/upload"
      :show-file-list="false"
      :on-success="handleSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <!-- 上传按钮 -->
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'AvatarUpload',
  setup() {
    const imageUrl = ref('')
  
    // 上传前的校验
    const beforeAvatarUpload = (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
    }
  
    // 上传成功的回调
    const handleSuccess = (res) => {
      if (res.code === '200') {
        imageUrl.value = res.data.url
        this.$message.success('上传成功!')
      } else {
        this.$message.error('上传失败，请重试!')
      }
    }
  
    return {
      imageUrl,
      beforeAvatarUpload,
      handleSuccess
    }
  }
}
</script>

<style scoped>
.avatar-uploader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px dashed #ccc;
  background-color: #f9fafc;
  cursor: pointer;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}
</style>

注释：

- `el-upload` 是 Element-plus 中的上传组件，`action` 属性指定上传接口地址，`show-file-list` 属性指定是否显示上传文件列表，`on-success` 属性指定上传成功的回调函数，`before-upload` 属性指定上传前的校验函数；
- `img` 标签用于展示上传成功后的图片，属性 `v-if="imageUrl"` 判断 `imageUrl` 是否存在，如果存在则显示图片，否则显示上传按钮；
- `i` 标签用于显示上传按钮，属性 `v-else` 表示如果 `imageUrl` 不存在，则显示按钮；
- `ref` 是 Vue3 中用于创建响应式数据的方法；
- `beforeAvatarUpload` 方法用于上传前的校验，判断文件类型和大小是否符合要求；
- `handleSuccess` 方法用于上传成功的回调，在回调中将上传成功的图片地址赋值给 `imageUrl`，并提示上传成功；
- `setup` 函数是 Vue3 中的新特性，用于组件的选项设置，返回一个对象，包含组件中需要用到的数据和方法；
- `return` 中的数据和方法，会被 Vue3 自动注入到组件的模板中使用；
- `style` 标签的 `scoped` 属性表示样式仅作用于当前组件中的元素，不会影响到其他组件的样式。