Usando HTML/JS simple, es posible ver los objetos de archivo JavaScript de archivos seleccionados para un elemento de entrada como este:
<input type="file" id="input" multiple onchange="handleFiles(this.files)"> Sin embargo, al convertirlo a la forma 'Vue', no parece funcionar según lo previsto y simplemente devuelve undefined en lugar de devolver una matriz de objetos de archivo.
Así es como se ve en mi plantilla de Vue:
<input type="file" id="file" class="custom-file-input" v-on:change="previewFiles(this.files)" multiple> Donde la función previewFiles es simplemente la siguiente (ubicada en métodos):
methods: { previewFiles: function(files) { console.log(files) } }¿Hay una forma alternativa/correcta de hacer esto? Gracias
Otra solución:
<input type="file" @change="previewFiles" multiple> methods: { previewFiles(event) { console.log(event.target.files); } }Prueba esto.
<input type="file" id="file" ref="myFiles" class="custom-file-input" @change="previewFiles" multiple>y en sus opciones de componentes:
data() { return { files: [], } }, methods: { previewFiles() { this.files = this.$refs.myFiles.files } }Para todos los usuarios de TS:
<template> <input ref="upload" type="file" name="file-upload" multiple="" accept="image/jpeg, image/png" @change="onUploadFiles"> </template> import { Component, Prop, Vue } from 'vue-property-decorator'; @Component({ components: {} }) export default class MediaEdit extends Vue { private onUploadFiles(event: InputEvent): void { const files: ReadonlyArray<File> = [...(this.upload.files ? this.upload.files : [])]; files.forEach((file) => { console.log(`File: ${file.name}`); }); } /** Upload element */ private get upload(): HTMLInputElement { return this.$refs.upload as HTMLInputElement; } }