javascript - VueJS3 + Typescript - Les fil fra filinnput

Jeg vil laste opp en fil, men jeg kan ikke få tilgang med v-model

VueCompilerError: v-model kan ikke brukes på filinntastinger siden de er skrivebeskyttet. Bruk en v-on:change-lytter i stedet.

Så, jeg har endret v-model til v-on:change som koden nedenfor, men jeg vet ikke hvordan jeg gjør dette

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

Jeg leste en stor liste med eksempler, men ingen fungerte.

Mine data (Vet ikke om det er riktig):

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

Svar #1

Et grunnleggende eksempel kan se slik ut

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

JavaScript-versjon

methods: {
  onFileChange(event) {
    let files = event.target.files || event.dataTransfer.files;
    if (!files.length) return;

    doSomethingWithTheFile(files[0]);
  },
}

TypeScript-versjonen kan se slik ut

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])
  },
},

Svar #2

Hvordan ser din uploadFile ut?

Det enkleste kan være å erklære det for å ta filene direkte:

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

Og kall det på denne måten:

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

Relaterte artikler