vue3中，el-upload上传图片的大小限制

在 Vue3 中使用 `el-upload` 组件上传图片时，可以使用 `before-upload` 属性来设置图片大小的限制。

具体做法是在 `before-upload` 方法中获取上传的文件信息，然后判断文件大小是否符合要求。如果文件大小符合要求，返回 `true`，否则返回 `false`，取消上传操作。

以下是一个示例代码：

<template>
  <el-upload
    action="/api/upload"
    :before-upload="beforeUpload"
    :file-list="fileList"
    :limit="3"
    :on-exceed="handleExceed"
    multiple
    list-type="picture-card"
    :auto-upload="false"
  >
    <i class="el-icon-plus"></i>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
        return false
      }
      return true
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 ${this.limit} 张图片`)
    }
  }
}
</script>

在上述代码中，我们使用 `before-upload` 方法判断上传的图片格式和大小是否符合要求。如果不符合要求，将会弹出错误提示，上传操作也会被取消。同时，我们还使用 `:limit` 属性来限制最多上传的图片数量，使用 `:on-exceed` 属性来处理超出数量限制的情况。