Aquí he escrito el código vue.js para carga múltiple con un solo campo de entrada.
Y esto funciona exactamente bien. Pero el problema es que mientras cargamos el archivo, muestra la cantidad de archivos cargados, pero en su lugar, quiero mostrar el nombre del archivo que estamos cargando.
Así que podemos hacer esto por favor hágamelo saber.
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <template id="asad"> <div class="container"> <div> <h2>Multiple Files</h2> <hr/> <label>Files <input type="file" multiple @change="handleFileUploads( $event )"/> </label> <br> <button v-on:click="submitFiles()">Submit</button> </div> </div> </template> </body> <script> var app = new Vue({ el: '#asad', data(){ return { files: [] } }, methods: { handleFileUpload( event ){ this.files = event.target.files; }, submitFile(){ let formData = new FormData(); for( var i = 0; i < this.files.length; i++ ){ let file = this.files[i]; formData.append('files[' + i + ']', file); } axios.post( '/multiple-files', formData, { headers: { 'Content-Type': 'multipart/form-data' } } ).then(function(){ console.log('SUCCESS!!'); }) .catch(function(){ console.log('FAILURE!!'); }); } } }) </script> </html>Puedes probar con la propiedad calculada:
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="asad"> <template > <div class="container"> <div> <h2>Multiple Files</h2> <hr/> <label>Files <input type="file" multiple @change="handleFileUploads( $event )"/> <ul v-if="files.length"> <li v-for="(name, i) in filesNames" :key="i">{{ name }}</li> </ul> </label> <br> <button v-on:click="submitFiles()">Submit</button> </div> </div> </template> </div> </body> <script> var app = new Vue({ el: '#asad', data(){ return { files: [] } }, computed: { filesNames() { const fn = [] for (let i = 0; i < this.files.length; ++i) { fn.push(this.files.item(i).name) } return fn } }, methods: { handleFileUploads( event ){ this.files = event.target.files; }, submitFile(){ let formData = new FormData(); for( var i = 0; i < this.files.length; i++ ){ let file = this.files[i]; formData.append('files[' + i + ']', file); } axios.post( '/multiple-files', formData, {headers: {'Content-Type': 'multipart/form-data'}} ).then(function(){ console.log('SUCCESS!!'); }) .catch(function(){ console.log('FAILURE!!'); }); } } }) </script> </html>