element plus upload标签的change事件获取文件

Element Plus 是一个基于 Vue 3 的组件库，其中包含了一个名为 Upload 的组件，该组件用于实现文件上传功能。Upload 组件的 `change` 事件是一个重要特性，它允许开发者在文件状态发生变化时执行回调函数，并且可以获取到当前文件的相关信息。

当你在使用 Element Plus 的 Upload 组件时，可以通过监听 `change` 事件来处理文件上传过程中的不同状态。`change` 事件会传递一个事件对象给回调函数，这个对象通常包含了以下几个属性：

- `file`: 当前被处理的文件信息对象。
- `fileList`: 包含所有待上传文件的列表。
- `event`: 触发该事件的原生 DOM 事件对象。

示例代码如下：

<template>
  <el-upload
    action="上传接口地址"
    :on-change="handleChange">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleChange(response, file, fileList) {
      // response 是后端返回的数据
      // file 是当前上传的文件
      // fileList 是文件列表
      console.log('当前文件信息：', file);
      // 此处可以根据业务需求进行相应的处理
    },
    submitUpload() {
      // 调用 Upload 组件的 upload 方法开始上传
      this.$refs.upload.submit();
    }
  }
};
</script>

在上面的代码中，`handleChange` 方法将会在文件状态发生变化时被调用，并且可以通过 `file` 参数获取当前文件的详细信息。这个方法常用于处理文件选择后的逻辑，比如验证文件类型、文件大小等。