<input type="file" id="upload" /> <button id="test" onclick="upload()">上传</button> var file = $('#upload')[0].files[0]; 修改为vue3中的ts格式,不使用jq
时间: 2023-12-05 09:24:39 浏览: 34
在Vue 3中,可以使用`ref`来获取DOM元素,然后通过`value`属性来获取文件信息。以下是一个示例:
```vue
<template>
<div>
<input type="file" ref="upload" @change="handleFileChange" />
<button @click="uploadFile">上传</button>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const upload = ref(null);
const handleFileChange = () => {
const file = upload.value?.files[0];
console.log(file);
};
const uploadFile = () => {
const file = upload.value?.files[0];
// 发送文件到服务器
};
return {
upload,
handleFileChange,
uploadFile,
};
},
});
</script>
```
在上面的例子中,`ref`函数被用来创建一个响应式的引用,该引用指向了文件上传的input元素。`handleFileChange`方法被绑定到了`change`事件上,当文件选择发生变化时,该方法会被调用,并且从`upload`引用中获取文件信息。`uploadFile`方法被绑定到了上传按钮的`click`事件上,当该按钮被点击时,该方法会从`upload`引用中获取文件信息,并将其发送到服务器。