Subir varios archivos con Vue.js. En este artículo aprenderemos a subir archivos al servidor web usando Vue. Por lo tanto, en lugar de agregar varios elementos de archivo, puede utilizar un único elemento de archivo para permitir al usuario cargar más de un archivo.
Uso del objeto FormData para pasar los archivos seleccionados a PHP para su carga.
En este tutorial, muestro cómo puede cargar varios archivos usando Vue.js y PHP.
- Descargar & incluir
- Implementar HTML
- PHP para subir archivos
- Script Vue
- Salida en el navegador
- Conclusión
Descargar e Incluir recursos
Para poder usar VUE tenemos que descargar la librería desde el repositorio oficial donde nos brindan el paquete Axios desde GitHub. o también se puede usar CDN para no consumir los recursos de nuestros servidores usando la siguiente URL
https://unpkg.com/axios/dist/axios.min.js
Si elegimos en descargar el paquete y usarlo desde nuestros servidores tenemos que declararlo de la siguiente forma o usando CDN. Veamos el ejemplo completo.
<script src="vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Subir varios archivos con Vue.js
A continuación, detallaremos los archivos y script necesarios para el correcto funcionamiento del ejemplo propuesto.
Implementar HTML5
Primeramente, necesitaremos una capa con el identificador llamado «myapp» (<div id=’myapp’>). Sin embargo, en el <div > cree un elemento de archivo (input type=»file») y un botón para procesar la petición.
Agregue el atributo ref en el elemento (input file) que se utiliza para acceder a los archivos en Vue.
Declare el atributo @click='uploadFile()' que desencadenara el evento en el botón HTML.
Además, usando listas desordenadas mostraremos los nombres de archivo cargados en las etiquetas <ul> <li>.
Código formulario de subida
<div id="myapp">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="uploadfiles" ref="uploadfiles" multiple required />
<label class="custom-file-label" for="uploadfiles">Elija varias archivos para cargar</label>
</div>
</div>
</div>
<div class="col-md-2">
<button type="button" @click="uploadFile()" name="upload" class="btn btn-primary">Cargar Archivos</button>
</div>
</div>
<hr>
<!-- Mostrando los archivos cargados -->
<div v-if="filenames.length" >
<ul >
<li v-for= "(filename,index) in filenames"> {{ filename }} </li>
</ul>
</div>
</div>
PHP para subir archivos
Necesitaremos un archivo PHP y lo llamaremos ajaxfile.php y una carpeta «uploads» para almacenar los archivos cargados vía VUE.
Crear la variable $files_arr para almacenar los nombres de archivo cargados mediante array.
Asigne el número total de archivos a $countfiles variable y asigne la ubicación de carga a $upload_location variable.
Bucle en los archivos.
Inicialice $valid_ext con extensiones de archivo de carga válidas. Si existe una extensión de archivo en la matriz $valid_ext, asigne un nuevo nombre de archivo a $newfilename y la ruta de acceso del archivo a $path variable.
- Si el archivo se carga correctamente, inicialice
$files_arrArray con $newfilename. - Devuelva
$files_arrArray en formato JSON.
Código completado PHP
<?php
// Para almacenar la ruta de los archivos cargados
$files_arr = array();
if(isset($_FILES['files']['name'])){
// Contar archivos totales
$countfiles = count($_FILES['files']['name']);
// Subir directorio
$upload_location = "uploads/";
// Ciclo todos los archivos
for($index = 0;$index < $countfiles;$index++){
if(isset($_FILES['files']['name'][$index]) && $_FILES['files']['name'][$index] != ''){
// Nombre del archivo
$filename = $_FILES['files']['name'][$index];
// Obtener la extensión del archivo
$ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
// Validar extensiones permitidas
$valid_ext = array("png","jpeg","jpg","pdf","txt","doc","docx");
// Revisar extension
if(in_array($ext, $valid_ext)){
// Ruta de archivo
$newfilename = time()."_".$filename;
$path = $upload_location.$newfilename;
// Subir archivos
if(move_uploaded_file($_FILES['files']['tmp_name'][$index],$path)){
$files_arr[] = $newfilename;
}
}
}
}
}
echo json_encode($files_arr);
die;
?>
Script Vue
- Inicialice Vue en la división usando el identificador
#myapp(id=»myapp «). - Agregue la variable de datos filename para almacenar correctamente los nombres de archivo cargados correctamente.
- Defina el método
uploadFile()que se llama al hacer clic en el botón de carga. - Cree el objeto FormData. Bucle en los archivos seleccionados y anexar al objeto
formData.
formData.append("files[]", files[index]);
Envíe una solicitud AJAX a ‘ajaxfile.php‘, pase el objeto formData como datos.
En la devolución de llamada correcta, asigne response.data a los nombres de archivo y el número de alertas de los archivos cargados.
Código completo
<script>
var app = new Vue({
el: "#myapp",
data: {
file: "",
filenames: []
},
methods: {
uploadFile: function(){
var el = this;
let formData = new FormData();
// Leer archivos seleccionados
var files = this.$refs.uploadfiles.files;
var totalfiles = this.$refs.uploadfiles.files.length;
for (var index = 0; index < totalfiles; index++) {
formData.append("files[]", files[index]);
}
axios.post("ajaxfile.php", formData,
{
headers: {
"Content-Type": "multipart/form-data"
}
})
.then(function (response) {
el.filenames = response.data;
alert(el.filenames.length + " los archivos se han subido.");
})
.catch(function (error) {
console.log(error);
});
}
}
})
</script>
Salida en el navegador
Nos mostrara un formulario HTML5 usando el framework Bootstrap para la interfaz gráfica. Por lo tanto, al procesar el formulario, nos mostrara una lista con un archivo o varios archivos subidos al servidor web.
Conclusión
La implementación de Vue es muy sencilla como han podido apreciar en este tutorial para subir archivos o imágenes según su necesidad de uso.
Si desea pasar datos adicionales con la instancia de archivo, anexe el valor en el objeto FormData.
formData.append("username", "admin");
En PHP lea el valor pasado con el método POST.
En este ejemplo, agregamos la validación de la extensión de archivo usando PHP. Por lo tanto, mientras implementa en su proyecto, agregue o actualice la validación de archivos de acuerdo con sus requisitos.
// Validar extensiones permitidas
$valid_ext = array("png","jpeg","jpg","pdf","txt","doc","docx");
Si este tutorial te resultó útil, no olvides compartirlo en las redes sociales o amigos.
