Vaadin upload组件如何监听文件添加事件？

可以实现，几乎所有主流UI框架的Upload组件都提供了文件添加相关的事件监听能力，以下是具体实现方案：

通用实现逻辑 #

• 大部分Upload组件会暴露on-change/change事件，该事件在文件添加、移除、上传状态变更时都会触发，可以通过判断文件状态识别添加操作
• 部分组件会单独暴露on-add/before-upload类的事件，专门在文件被选中加入列表前/后触发

常用场景代码示例 #

1. Element UI / Element Plus #

监听change事件，通过文件的ready状态判断为新添加文件：

<template>
  <el-upload
    action="/你的上传接口地址"
    @change="handleFileChange"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
import { ElNotification } from 'element-plus'

export default {
  methods: {
    handleFileChange(file, fileList) {
      // status为ready代表文件已成功加入上传队列
      if (file.status === 'ready') {
        ElNotification.success({
          title: '文件添加成功',
          message: `已添加文件：${file.name}`,
          duration: 3000
        })
      }
    }
  }
}
</script>

2. Ant Design Vue #

可监听change事件识别文件添加操作：

<template>
  <a-upload
    name="file"
    action="/你的上传接口地址"
    @change="handleChange"
  >
    <a-button> <upload-outlined></upload-outlined> 点击上传 </a-button>
  </a-upload>
</template>

<script>
import { notification } from 'ant-design-vue';

export default {
  methods: {
    handleChange(info) {
      // status为uploading代表文件刚进入上传队列
      if (info.file.status === 'uploading') {
        notification.success({
          message: '文件添加成功',
          description: `已成功添加文件 ${info.file.name}`,
          duration: 3,
        });
      }
    }
  }
}
</script>

3. 原生自定义Upload组件 #

如果是自行封装的上传组件，直接监听input[type=file]的change事件即可：

const uploadInput = document.querySelector('input[type="file"]')
uploadInput.addEventListener('change', (e) => {
  const files = e.target.files
  if (files.length > 0) {
    // 此处替换为你项目中的Notification组件调用即可
    alert(`已成功添加${files.length}个文件`)
  }
})

注意事项 #

• 如果配置了文件大小、格式校验规则，建议在校验通过后再弹出提示，避免不符合要求的文件被拦截时也弹出成功提示
• 部分组件的before-upload事件返回false会终止文件加入列表，不要在该钩子未通过校验时触发添加成功提示

内容的提问来源于stack exchange，提问作者Arek