<input type="file" id="upload" /> <button id="test" onclick="upload()">上传</button> var file = $('#upload')[0].files[0]; 修改为vue3中的ts格式，不使用jq

在Vue3中，可以使用ref来获取文件上传框和按钮元素，并且可以使用Typescript类型注释来声明变量类型。示例代码如下：

<template>
  <div>
    <input type="file" ref="upload" @change="onFileChange" />
    <button @click="uploadFile">上传</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const upload = ref<HTMLInputElement | null>(null);
    let file: File | null = null;

    const onFileChange = (event: Event) => {
      const target = event.target as HTMLInputElement;
      if (target.files) {
        file = target.files[0];
      }
    };

    const uploadFile = () => {
      if (file) {
        // 在这里编写上传文件的代码
      } else {
        console.error('请选择要上传的文件');
      }
    };

    return {
      upload,
      onFileChange,
      uploadFile,
    };
  },
});
</script>

这个例子中，我们使用了Vue3的组合式API，使用了`defineComponent`函数来定义组件。我们使用`ref`函数来获取文件上传框和按钮元素，并声明了它们的类型为`HTMLInputElement | null`。我们还声明了一个`file`变量来保存上传的文件，并将其类型声明为`File | null`。

在文件上传框的`change`事件中，我们使用类型断言将`event.target`转换为`HTMLInputElement`类型，并检查`target.files`是否存在。如果存在，则将第一个文件赋值给`file`变量。

在上传按钮的`click`事件中，我们检查`file`变量是否存在。如果存在，则可以在这里编写上传文件的代码。如果不存在，则打印错误信息。