VueJS3 + Typescript -从输入文件读取文件

Question

我想上传一些文件，但是我无法访问v-model

VueCompilerError: v-model不能用于文件输入，因为它们是只读的。请使用v-on:change侦听器。

因此，我已经将v-model更改为v-on:change，如下面的代码，但我不知道如何做到这一点

<input
type="file"
name="file"
v-on:change="uploadFile"
style="display: none; border: none"
/>

我读了一大堆例子，但没有一个成功。

My data(不知道是否正确):

data() {
return {
file: null as unknown as File,
};
},

Answer 1

您的uploadFile是什么样子的?

更简单的可能是声明它直接取文件列表:

async uploadFiles(fileList: Array<File>) {
for (const file of fileList) {
// do something with the file

这样命名:

v-on:change="uploadFiles($event.target.files)"

Answer 2

一个基本的例子如下

<input type="file" @change="onFileChange">

JavaScript版本

methods: {
onFileChange(e) {
let files = e.target.files || e.dataTransfer.files;
if (!files.length) 
return;
doSomethingWithTheFile(files[0]);
},
}

TypeScript版本可以像这样

interface HTMLInputEvent extends Event {
target: HTMLInputElement & EventTarget
}

methods: {
onFileChange(event: HTMLInputEvent | DragEvent) {
let files =
(event as HTMLInputEvent).target.files ||
(event as DragEvent).dataTransfer.files
if (!files.length) return
doSomethingWithTheFile(files[0])
},
},