vue 怎么给el-upload file-list添加事件

### 回答1：
在Vue中给el-upload的file-list添加事件可以通过以下步骤实现：

1. 首先，找到el-upload组件的使用代码，在其中找到file-list部分。
2. 在file-list元素上添加一个自定义属性，用来表示事件触发的方法，例如：:on-click="handleClick"。
3. 在Vue实例中定义一个名为handleClick的方法（或者自定义的方法名），该方法将作为事件的处理函数。
4. 在该方法中，可以通过event对象获取到触发事件的相关信息，如文件名、文件大小等。
5. 可以根据需要，在handleClick方法中编写具体的业务逻辑，例如弹出一个提示框、执行一些操作等。
6. 最后，在Vue实例中通过methods选项将handleClick方法添加到Vue实例的方法列表中。

完整的代码示例如下：

<template>
  <el-upload
    action=""
    :on-click="handleClick"
  >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log('文件名：', event.file.name);
      console.log('文件大小：', event.file.size);
      // 在这里编写具体的业务逻辑
    }
  }
}
</script>

通过以上步骤，就可以在Vue中给el-upload的file-list添加事件，并在事件处理函数中进行相应的操作。

### 回答2：
在Vue中给el-upload的file-list添加事件，可以通过使用插槽来实现。

首先，确保已经引入了Element-UI库和Vue。

然后，在Vue的模板中，可以这样定义一个el-upload组件：

<template>
  <div>
    <el-upload
      action="/upload"
      :file-list="fileList"
      :before-upload="beforeUpload"
    >
      <el-button slot="trigger">点击上传</el-button>
      <el-progress slot="default" :percentage="uploadPercentage"></el-progress>
    </el-upload>
  </div>
</template>

在通过`:file-list`绑定了一个名为`fileList`的数组，该数组用于存储上传的文件列表数据。同时，通过`:before-upload`属性绑定了一个名为`beforeUpload`的方法，用于在上传文件前执行一些操作。

接下来，需要在Vue的`data`中定义`fileList`和`uploadPercentage`变量，并在`methods`中定义`beforeUpload`方法：

<script>
export default {
  data() {
    return {
      fileList: [],
      uploadPercentage: 0
    };
  },
  methods: {
    beforeUpload(file) {
      // 在这里可以对上传的文件进行一些处理，比如判断文件的类型、大小等
      console.log('before upload:', file);

      // 添加事件
      file.on('progress', this.onProgress);
    },
    onProgress(event, file, fileList) {
      // 上传进度回调，可以在这里更新进度条等操作
      console.log('upload progress:', event.percent + '%', file, fileList);

      this.uploadPercentage = event.percent;
    }
  }
};
</script>

在`beforeUpload`方法中，可以对上传的文件进行一些处理，比如验证文件类型、大小等。同时，可以通过`file.on('progress', this.onProgress)`添加一个`progress`事件监听器，当文件上传进度发生变化时，将触发`onProgress`方法。

在`onProgress`方法中，可以对上传进度进行一些操作，比如更新进度条等。

通过以上步骤，就可以给el-upload的file-list添加事件，实现文件上传的监听和处理。

### 回答3：
在Vue中给el-upload的file-list添加事件，可以通过自定义组件来实现。以下是一个简单的实现方式：

1. 首先，在Vue组件中引入el-upload组件和el-upload的样式文件。

<template>
  <el-upload
    class="upload-component"
    action="/upload"
    :on-success="handleUploadSuccess"
    :file-list="fileList"
  >
    <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
  </el-upload>
</template>

<script>
import { ElUpload, ElButton } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

export default {
  components: {
    ElUpload,
    ElButton
  },
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleUploadSuccess(response, file, fileList) {
      // 处理上传后的逻辑，可以在此处添加与file-list相关的事件
      console.log(response);
      console.log(file);
      console.log(fileList);
    }
  }
};
</script>

2. 在模板中引入el-upload和el-button组件，并使用el-upload组件来上传文件。在el-upload上添加了一个handleUploadSuccess方法，用于处理上传成功后的逻辑。

3. 在handleUploadSuccess方法内部，可以获取到上传成功后的响应、上传的文件和当前file-list，可以在此处添加与file-list相关的事件。例如，可以根据响应的内容，动态更新file-list或执行其他操作。

这样，就可以通过自定义组件的方式，在Vue中给el-upload的file-list添加事件。