Блог

Я хочу загрузить какой-то файл, но не могу получить доступ с помощью v-model

Ошибка VueCompilerError: v-модель нельзя использовать при вводе файлов, так как они доступны только для чтения. Вместо этого используйте v-on:измените прослушиватель.

Итак, я изменил код v-model на v-on:change «нравится» ниже, но я не знаю, как это сделать

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

Я прочитал большой список примеров, но ни один из них не сработал.

Мои данные (Idk, если это правильно):

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

Основной пример может выглядеть так

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

Версия JavaScript

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

    doSomethingWithTheFile(files[0]);
  },
}

 

Версия машинописного текста может выглядеть следующим образом

 interface HTMLInputEvent extends Event {
  target: HTMLInputElement amp; 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])
  },
},
 

Как ты uploadFile выглядишь?

Проще всего может быть объявить, что он непосредственно принимает список файлов:

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

И назовем это так:

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