<input type="file" id="upload" /> <button id="test" onclick="upload()">上传</button> var file = $('#upload')[0].files[0]; 修改为vue3中的ts格式,不使用jq
时间: 2023-12-05 08:28:02 浏览: 26
在Vue3中使用TypeScript并且不使用jQuery,可以通过以下代码来实现上传文件功能:
首先,在template中添加一个文件输入框和一个上传按钮:
```html
<template>
<div>
<input type="file" ref="fileInput" @change="handleFileUpload" />
<button @click="uploadFile">上传</button>
</div>
</template>
```
然后,在script中定义两个方法:handleFileUpload和uploadFile。handleFileUpload用于获取上传的文件信息,并将其保存到data中的file变量中。uploadFile用于将文件上传到服务器。
```typescript
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const file = ref(null);
const handleFileUpload = (e: Event) => {
const files = (e.target as HTMLInputElement).files;
if (files?.length) {
file.value = files[0];
}
};
const uploadFile = () => {
if (file.value) {
const formData = new FormData();
formData.append('file', file.value);
// 发送文件上传请求
// ...
}
};
return {
file,
handleFileUpload,
uploadFile,
};
},
});
</script>
```
在handleFileUpload方法中,通过获取事件对象的target属性,来获取文件输入框中选择的文件。如果文件存在,则将其保存到data中的file变量中。
在uploadFile方法中,首先判断是否存在文件。如果有文件,则创建一个FormData对象,并将文件添加到其中。最后,发送文件上传请求即可。
需要注意的是,在发送请求之前,需要根据实际情况设置请求头、请求方法、请求地址等参数。