在vue3中使用input标签上传Excel格式的文件到服务器，请给一个案例

好的，以下是一个简单的案例，供您参考：

在 Vue3 中，我们可以使用 `ref` 函数来创建一个响应式的变量，然后在模板中绑定 `input` 标签的 `ref` 属性和 `@change` 事件，接着在事件处理函数中获取上传的文件，使用 `FormData` 对象将文件数据和其他表单数据一起发送到服务器。

代码如下：

<template>
  <div>
    <input type="file" ref="fileInput" @change="onFileChange"/>
    <button @click="uploadExcel">上传Excel</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const fileInput = ref(null)
    const formData = new FormData()

    const onFileChange = (event) => {
      const file = event.target.files[0]
      formData.append('file', file)
    }

    const uploadExcel = () => {
      // 添加其他表单数据
      formData.append('username', '张三')
      formData.append('age', 18)

      // 发送文件数据和其他表单数据到服务器
      fetch('/api/upload', {
        method: 'POST',
        body: formData
      }).then(response => {
        console.log(response)
      })
    }

    return {
      fileInput,
      onFileChange,
      uploadExcel
    }
  }
}
</script>

在上面的代码中，我们使用 `ref` 函数创建了一个名为 `fileInput` 的响应式变量，然后在模板中绑定了 `input` 标签的 `ref` 属性和 `@change` 事件，当用户选择文件后，`onFileChange` 函数会被调用，将文件数据保存在 `formData` 对象中。

最后，在 `uploadExcel` 函数中，我们使用 `fetch` 函数发送 `POST` 请求到服务器，将 `formData` 对象作为请求体，同时添加其他需要上传的表单数据。服务器端可以通过解析请求体中的数据，获取上传的文件和其他表单数据。

需要注意的是，上述代码只是一个简单的示例，实际的文件上传过程中还需要考虑文件大小限制、文件类型限制、上传进度显示等问题。