本文链接：https://blog.csdn.net/zzzzzzzzjy/article/details/137085048

本文详细解读了Vue2中el-upload组件的属性和方法，包括ref的使用、上传限制、手动触发上传、文件移除及自动上传的控制，帮助开发者更好地理解和运用这一组件。

摘要由CSDN通过智能技术生成

1.干货-直接贴代码（分析代码）

   <el-upload
        ref="upload"
        :data="uploadParams"
        style="width: 251px"
        :limit="1"
        accept=".xlsx, .xls"
        multiple
        :action="upload.url"
        :on-success="handleFileSuccess"
        :on-change="BeforeUpload"
        :on-remove="handleRemove"
        :auto-upload="false"
        :file-list="fileList"
        drag

      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip text-center">
          <span>仅允许导入xls、xlsx格式文件。</span>
        </div>
      </el-upload>

当分析 <el-upload> 组件中的属性时，以下是每个属性的作用：

ref="upload": 为上传组件设置一个引用，以便在代码中可以通过引用来访问上传组件的实例。

:data="uploadParams": 用于设置上传请求的额外参数，uploadParams 是一个对象，包含了上传请求所需的额外参数。

style="width: 251px": 用于设置上传组件的宽度为 251 像素。

:limit="1": 限制用户一次只能上传一个文件。

accept=".xlsx, .xls": 规定了用户只能选择上传以 .xlsx 或 .xls 结尾的文件。

multiple: 允许用户选择多个文件进行上传。

:action="upload.url": 设置上传的地址，upload.url 是一个变量，包含了上传文件的地址。

:on-success="handleFileSuccess": 当文件上传成功时触发的回调函数，handleFileSuccess 是一个方法，用于处理文件上传成功的逻辑。

:on-change="BeforeUpload": 当文件选择发生改变时触发的回调函数，BeforeUpload 是一个方法，用于处理文件选择改变的逻辑。

:on-remove="handleRemove": 当文件移除时触发的回调函数，handleRemove 是一个方法，用于处理文件移除的逻辑。

:auto-upload="false": 设置为 false 时，用户需要手动触发上传动作；设置为 true 时，用户选择文件后会自动触发上传动作。

:file-list="fileList": 用于设置已上传文件列表，fileList 是一个数组，包含了已上传的文件列表信息。

drag: 允许用户通过拖拽文件来上传。

这些属性和事件用于配置和控制 <el-upload> 组件的行为，以及处理文件上传过程中的各种情况。

2. 拆解部分代码含义作用（详细的在文章上面）

1. ref="upload"

ref是什么？ref是一个特殊的属性，用于给元素或组件注册引用信息，通过在组件上使用ref属性，可以在父组件中访问子组件的实例或DOM元素，通过this.$refs来访问子组件的属性和方法。绑定upload，这样就可以通过这个变量来访问组件的实例，缺点：过度使用ref可能会导致代码耦合度过高，不利于组件的复用和维护。因此，在使用ref时需要谨慎考虑是否有更好的组件通信方式。
在elm组件库里面的upload：

this.$refs.upload.submit(): 这个方法用于手动触发文件上传，当调用这个方法时，upload组件会立即开始上传文件。
this.$refs.upload.clearFiles(): 这个方法用于清空已选择的文件，当调用这个方法时，upload组件会清空当前已选择的文件列表。

2. :`limit和`:on-exceed

3. `accept=“”和:on-change`

`你定义了只能接受什么文件格式结尾的话，`如果用户尝试上传不符合这些规定的文件，浏览器会在文件选择对话框中过滤掉这些文件，因此用户将无法选择或上传不符合规定的文件。所以当我尝试将png导入的时候，浏览器和页面是没有反应的，以至于我在：on-change绑定了方法BeforeUpload也没有生效，也就是浏览器过滤掉了非accept内的文件格式的文件，所以on-change检测不到文件状态改变。所以想要提示框和阻止其他文件格式的文件上传，用on-changge更为合适。

on-change绑定的方法：不是我规定的文件格式就阻止文件上传，并且提示错误信息

    BeforeUpload(file) {  
    const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';  
    const isXLS = file.type === 'application/vnd.ms-excel';  
    const fileExtension = file.name.split('.').pop().toLowerCase();  
  
    if (!isXLSX && !isXLS && (fileExtension !== 'xlsx' && fileExtension !== 'xls')) {  
      this.$message.error('仅允许导入xls、xlsx格式文件。');  
      return false; // 阻止文件上传  
    }  
    // 如果有其他文件检查逻辑，可以在这里添加  
    return true; // 允许文件上传  
  },

3. `:on-success="handleFileSuccess"`

成功回调提示，失败回调提示，清空upload

    // 文件上传成功处理
    handleFileSuccess (response, file, fileList) {
      if (response.code == 200) {
        this.$message({
          type: 'success',
          message: response.msg
        })
        this.bmdialogVisibleImport = false
      } else if (response.code == 500) {
        this.$message({
          type: 'error',
          message: response.msg
        })
      }
      this.$refs.upload.clearFiles()
    },

4.:on-remove="handleRemove"，和:file-list="fileList"

file-list 属性是一个数组，用于展示已上传的文件列表。你可以将已经上传的文件列表绑定到这个属性上，这样用户就能看到已经上传的文件。
点击文件旁边的叉号（删除按钮）来移除文件，这通常会触发 on-remove 事件。你需要提供一个方法来处理这个事件，以从 fileList 数组中移除相应的文件。