vue3点击按钮导入文件，文件名添加到输入框中

你可以使用`<input>`标签和`<label>`标签来实现这个功能。首先，你需要在Vue3组件中定义一个data属性来存储文件名，然后使用`<label>`标签来创建一个文件选择框，将其绑定到一个方法中，该方法将更新data属性的值。接着，你需要使用`<button>`标签来创建一个按钮，将其绑定到另一个方法中，该方法将触发点击事件并更新data属性的值。最后，你可以使用`v-model`将data属性的值绑定到`<input>`标签上，以显示文件名。

以下是实现的代码示例：

<template>
  <div>
    <label for="file">选择文件：</label>
    <input type="file" id="file" ref="fileInput" style="display:none" @change="updateFileName">
    <input type="text" v-model="fileName">
    <button @click="selectFile">选择文件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileName: ''
    }
  },
  methods: {
    selectFile() {
      this.$refs.fileInput.click()
    },
    updateFileName(event) {
      this.fileName = event.target.files[0].name
    }
  }
}
</script>

在上面的代码中，`<label>`标签的`for`属性与`<input>`标签的`id`属性相同，以便将它们关联起来。`@change`指令将`updateFileName`方法绑定到文件选择框的`change`事件上，在该方法中，我们更新data属性的值。`<button>`标签的`@click`指令将`selectFile`方法绑定到按钮的`click`事件上，在该方法中，我们使用`this.$refs`获取到文件选择框的引用并模拟点击事件。最后，我们使用`v-model`指令将`fileName`绑定到`<input>`标签上，以显示文件名。