152 lines
4.7 KiB
Vue
152 lines
4.7 KiB
Vue
<template>
|
|
<b-container class="mt-5">
|
|
<div class="mb-5">
|
|
<h1 class="mb-4" style="text-align:left;">Agregar Imagen</h1>
|
|
<b-row>
|
|
<b-col class="p-0" cols="8">
|
|
<b-form-file
|
|
v-model="nuevaImagenBanner"
|
|
id="nuevaImagenBanner"
|
|
block
|
|
placeholder="Seleccione la imagen o arrastre aqui..."
|
|
accept=".png, .jpg"
|
|
></b-form-file>
|
|
</b-col>
|
|
<b-col>
|
|
<b-button block variant="success" @click="agregarImagen()">Agregar</b-button>
|
|
</b-col>
|
|
</b-row>
|
|
</div>
|
|
<h1 class="mb-4" style="text-align:left;">Eliminar Imagen</h1>
|
|
<div class=" row ">
|
|
<div class="d-flex flex-wrap" style="justify-content: space-between;">
|
|
<div v-bind:key="imagenBanner.id" v-for="imagenBanner in imagenesBanner" >
|
|
<b-card class="m-3" style="width: 28rem;">
|
|
<b-card-img :src="imagenBanner.img" alt="Image" ></b-card-img>
|
|
<b-card-footer><b-button variant="danger" @click="eliminarImagen(imagenBanner.nombreImagen)">Eliminar</b-button></b-card-footer>
|
|
</b-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</b-container>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
import config from "../config/config.js";
|
|
import Swal from 'sweetalert2'
|
|
export default {
|
|
name: "editarBanner",
|
|
data() {
|
|
return {
|
|
imagenesBanner: [],
|
|
nuevaImagenBanner: null,
|
|
};
|
|
},
|
|
methods:{
|
|
async eliminarImagen(nombreImagenBanner){
|
|
const swalWithBootstrapButtons = Swal.mixin({
|
|
customClass: {
|
|
confirmButton: 'btn btn-outline-success',
|
|
cancelButton: 'btn btn-outline-danger'
|
|
},
|
|
buttonsStyling: false
|
|
})
|
|
|
|
swalWithBootstrapButtons.fire({
|
|
title: '¿Estás seguro de que quieres eliminar la imagen?',
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonText: 'Si, eliminar',
|
|
cancelButtonText: 'No, cancelar',
|
|
reverseButtons: true
|
|
}).then(async (result) => {
|
|
if (result.isConfirmed) {
|
|
try{
|
|
await axios.post( `${config.api}/eliminarImagenCarrusel`,{nombre: nombreImagenBanner} );
|
|
await swalWithBootstrapButtons.fire(
|
|
'Eliminado!',
|
|
'Se ha eliminado la imagen con éxito.',
|
|
'success'
|
|
);
|
|
location.reload();
|
|
}
|
|
catch(error){
|
|
console.log(error);
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'La imagen no pudo ser eliminada',
|
|
text: 'algo salio mal, mensaje en consola',
|
|
});
|
|
}
|
|
}
|
|
|
|
})
|
|
},
|
|
async agregarImagen(){
|
|
try{
|
|
let formData = new FormData();
|
|
let imagenBanner = document.querySelector('#nuevaImagenBanner');
|
|
console.log('tamaño: ',imagenBanner.files.length);
|
|
if(imagenBanner.files.length === 0){
|
|
Swal.fire(
|
|
'¿Aún no has seleccionado la imagen?',
|
|
'',
|
|
'question'
|
|
);
|
|
return;
|
|
}
|
|
formData.append("imagen", imagenBanner.files[0]);
|
|
await axios.post( `${config.api}/agregarImagenCarrusel`, formData ,{ headers: {'Content-Type': 'multipart/form-data'}} );
|
|
await Swal.fire(
|
|
'Imagen agregada con éxito',
|
|
'',
|
|
'success'
|
|
);
|
|
location.reload();
|
|
}
|
|
catch(error){
|
|
console.log(error);
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'La imagen no pudo ser agregada',
|
|
text: 'Algo salio mal, mensaje en consola',
|
|
});
|
|
}
|
|
|
|
}
|
|
},
|
|
async created() {
|
|
try {
|
|
let path = `${config.api}/imagenCarrusel?nombre=`;
|
|
let nombres = await axios.get(`${config.api}/nombreCarrusel`);
|
|
nombres = nombres.data.data;
|
|
for (let i = 0; i < nombres.length; i++) {
|
|
let config = {
|
|
url: `${path}${nombres[i]}`,
|
|
method: "GET",
|
|
responseType: "blob"
|
|
};
|
|
await axios(config).then(response => {
|
|
let reader = new FileReader();
|
|
reader.readAsDataURL(response.data);
|
|
reader.onload = () => {
|
|
this.imagenesBanner.push({ id: i, img: reader.result, nombreImagen: nombres[i]});
|
|
};
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.log(`Ocurrio un error msj: ${error}`);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
.divMaster {
|
|
height: auto;
|
|
}
|
|
</style>
|