Quiero subir algún archivo, pero no puedo acceder con v-model
VueCompilerError: v-model no se puede usar en entradas de archivos ya que son de solo lectura. Utilice un oyente v-on:change en su lugar.
Entonces, cambié el v-model v a v-on:change código similar a continuación, pero no sé cómo hacerlo
<input type="file" name="file" v-on:change="uploadFile" style="display: none; border: none" />Leí una gran lista de ejemplos, pero ninguno funcionó.
Mis datos (no sé si es correcto) :
data() { return { file: null as unknown as File, }; },Un ejemplo básico podría verse así
<input type="file" @change="onFileChange">versión de JavaScript
methods: { onFileChange(e) { let files = e.target.files || e.dataTransfer.files; if (!files.length) return; doSomethingWithTheFile(files[0]); }, }La versión de TypeScript podría verse así
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]) }, },¿Cómo se ve tu uploadFile ?
Lo más simple puede ser declararlo para tomar directamente la lista de archivos:
async uploadFiles(fileList: Array<File>) { for (const file of fileList) { // do something with the fileY llámalo así:
v-on:change="uploadFiles($event.target.files)"