Vue3 script setup中如何访问vue-filepond实例调用removeFiles

代码无法访问FilePond实例来自两个核心错误：

• ref类型标注错误：给ref标注的HTMLDivElement是原生DOM元素类型，而FilePond是封装后的Vue组件，不属于原生DOM类型，TS类型校验阶段就会提示访问异常。
• 访问层级错误：<script setup>语法下，通过ref拿到的组件引用直接就是暴露的FilePond实例，不需要额外多写一层.pond访问内部属性，多余的层级会导致拿不到目标方法。

模板部分不需要修改，只需要调整script部分的ref定义和方法调用逻辑即可，完整参考代码如下：

<template>
  <FilePond
    ref="pond"
    instant-upload="false"
    label-idle="Drop files here..."
    :allow-multiple="false"
    :credits="'false'"
    allow-revert="false"
    accepted-file-types=".java"
    @addfile="addFile"
    @error="onFilesError"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import vueFilePond from 'vue-filepond'
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
// 注意引入FilePond基础样式，否则组件样式会异常
import 'filepond/dist/filepond.min.css'

const FilePond = vueFilePond(FilePondPluginFileValidateType)
// 用组件实例类型作为ref的泛型，初始值设为null
const pond = ref<InstanceType<typeof FilePond> | null>(null)

// 清空文件的方法
const clearFiles = () => {
  if (!pond.value) return
  // 直接调用实例上的removeFiles方法即可
  pond.value.removeFiles()
}

// 原有业务逻辑保持不变
const addFile = () => {
  // 你的文件添加、上传逻辑
  // 上传完成后直接调用clearFiles()就能清空所有已选文件
}
const onFilesError = () => {
  // 你的错误处理逻辑
}
</script>

选项式API中this.$refs.pond.removeFiles()的写法本质也是直接拿组件实例调用方法，之前看到的带.pond层级的写法要么是旧版本兼容写法，要么是错误示例，在当前版本的vue-filepond + Vue3 <script setup>语法下不需要加这层。
如果需要在文件上传成功后自动清空，给FilePond组件绑定@process事件，在事件回调里直接调用clearFiles()即可。

内容的提问来源于stack exchange，提问作者chance-up choi