【区分vue2和vue3下的element UI ¶Upload 上传组件，分别详细介绍属性，事件，方法如何使用，并举例】

在 Vue 2 中，我们通常使用 Element UI 的 el-upload 组件来实现文件上传功能。然而，在 Vue 3 中，由于 Element UI 没有官方支持 Vue 3 的版本，我们通常会使用 Element Plus（Element UI 的 Vue 3 版本）的 el-upload 组件，尽管两者的使用方式大致相同，但也有一些差异。

Vue 2 + Element UI

el-upload 组件

属性 (Attributes):

• action: 必需的 URL，上传的地址
• headers: 设置上传的请求头部
• on-success: 文件上传成功时的钩子
• on-error: 文件上传失败时的钩子
• before-upload: 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传
• auto-upload: 是否在选取文件后立即进行上传
• multiple: 是否支持多文件上传
• limit: 允许上传文件的个数限制
• on-exceed: 文件超出个数限制时的钩子
• file-list: 已经上传的文件列表，默认根据 v-model 生成
• drag: 是否启用拖拽上传
• ...: 其他通用属性

  事件 (Events):

  • change: 文件状态改变时的钩子，更新文件列表
  • success: 文件上传成功时的回调
  • error: 文件上传失败时的回调
  • progress: 文件上传时的进度事件
  • remove: 文件列表移除文件时的回调
  • ...: 其他通用事件

    方法 (Methods):

    • Element UI 的 el-upload 组件通常不提供直接调用的方法，而是通过属性和事件来控制其行为。

      示例:

        
          选取文件
          上传到服务器
          只能上传jpg/png文件，且不超过500kb
        
      
      
      export default {
        data() {
          return {
            fileList: [],
          };
        },
        methods: {
          handleSuccess(response, file, fileList) {
            this.fileList = fileList;
            // 处理上传成功的逻辑
          },
          beforeUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024  
      Vue 3 + Element Plus
       
      在 Vue 3 中使用 Element Plus 的 el-upload 组件与 Vue 2 + Element UI 非常相似，但请注意 API 可能会有一些变化或新增功能。你应该查阅 Element Plus 的官方文档以获取最新的信息。
       
      示例:
       
      在 Vue 3 中使用 Element Plus 的 el-upload 组件的示例代码与 Vue 2 类似，但你需要使用 Composition API 来定义响应式的数据和方法。