TDesign Upload组件选择文件后on-change不触发怎么办？

英瑞 Dev 提问于 2026-01-30 22:17:26 阅读 66

组件

在用TDesign的Upload组件做文件上传时，选完文件后on-change事件一直没反应。已经检查过事件名写的是on-change，也确认了TS文档示例，但就是不执行回调函数，控制台也没报错，搞不懂哪里出问题了。

代码这样写的：


<template>
  <t-upload
    action="https://example.com/upload"
    :max="3"
    on-change="handleFiles"
  >
    <t-button>选择文件</t-button>
  </t-upload>
</template>

试过把事件写成@change和v-on:change都不行，函数里打个console.log完全没触发。难道是组件版本问题吗？我用的是最新版2.50.0…

我来解答赞 5 收藏

反馈

2 条解答

W″振莉 Lv1

改成这样：

action="https://example.com/upload"
:max="3"
@change="handleFiles"
>

选择文件

handleFiles函数要接收参数，打印出来看结构是否正确，事件名必须用@绑定，不能用on-change或v-on:change。最新版TDesign Vue的Upload组件change事件参数是{ file, files, trigger, e }。

2026-02-03 02:01

闲人雨妍 Lv1

这问题其实是Vue事件绑定的写法有点问题。在Vue模板里，JS函数名不能用字符串形式写死，得改成@change这种简写或者v-on:change的形式。

但更重要的一个坑是，TDesign的on-change事件传的是一个对象参数，不是直接的文件列表。你得确保你的回调函数能正确接收这个参数。

试试这样改：

<template>

  <t-upload

    action="https://example.com/upload"

    :max="3"

    @change="handleFiles"

  >

    <t-button>选择文件</t-button>

  </t-upload>

</template>



<script>

export default {

  methods: {

    handleFiles(info) {

      console.log('文件信息:', info);

      if (info.fileList.length > 0) {

        console.log('选中的文件:', info.fileList);

      }

    }

  }

}

</script>

另外提醒一下，TDesign的Upload组件对文件类型和大小有限制，如果文件不符合要求，on-change也可能不触发。可以在控制台打印下完整的info对象看看具体情况。

最后确认下Vue版本和TDesign版本是否匹配，虽然你说用了最新版，但之前确实有类似bug，升级下可能更好。

2026-01-31 16:45