servicio_social_front/components/responsable/cartaTermino.vue

<template>
  <div class="container">
    <h3 class="title is-4 mt-6">
      Carta de termino (en formato .PDF. No se aceptan fotos).
    </h3>

    <b-field>
      <b-upload
        v-model="file"
        drag-drop
        type="is-black"
        expanded
        accept="application/pdf"
      >
        <section class="section">
          <div class="content has-text-centered">
            <p>
              <b-icon icon="upload" size="is-large"></b-icon>
            </p>
            <p>
              {{
                file.name || "Arrastra aquí tu archivo o da click para buscar"
              }}
            </p>
            <p>Tamaño máximo para el archivo: 20MB</p>
          </div>
        </section>
      </b-upload>
    </b-field>

    <b-field class="centro">
      <b-button
        :disabled="file == ''"
        class="border-info my-5 is-medium"
        type="is-info"
        @click="Enviar()"
      >
        Enviar
      </b-button>
    </b-field>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      isFullPage: true,
      file: [],
      idServicio: "",
    };
  },
  methods: {
    validarTamaño() {
      const TamMax = 20000000;
      const archivo = this.file;
      console.log(archivo);
      if (archivo.size > TamMax) {
        this.toast();
        this.file = "";
      }
    },
    toast() {
      this.$buefy.toast.open({
        message: "El archivo excede el tamaño permitido",
        type: "is-danger",
      });
    },
    Enviar() {
      const loadingComponent = this.$buefy.loading.open({
        container: this.isFullPage ? null : this.$refs.element.$el,
      });
      const data = { idServicio: this.idServicio };
      const formData = new FormData();
      formData.append("data", JSON.stringify(data));
      formData.append("cartaTermino", this.file);
      console.log(formData);
      axios
        .put(`${process.env.api}/servicio/carta_termino`, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          console.log(res.data);

          loadingComponent.close();
          this.$buefy.dialog.alert({
            title: "Success",
            message: "Se enviaron los datos correctamente",
            type: "is-success",
            hasIcon: true,
            icon: "checkbox-marked-circle",
            iconPack: "mdi",
            ariaRole: "alertdialog",
            ariaModal: true,
          });
        })
        .catch((error) => {
          loadingComponent.close();
          this.$buefy.dialog.alert({
            title: "Error",
            message: error.response.data.message,
            type: "is-danger",
            hasIcon: true,
            icon: "alert-circle",
            iconPack: "mdi",
            ariaRole: "alertdialog",
            ariaModal: true,
          });
        })
        .finally(() => {
          this.$router.push("/responsable");
        });
    },
    getIdLocal() {
      this.idServicio = localStorage.getItem("idServicio");
    },
  },
  watch: {
    file: function(newFile, oldFile) {
      this.validarTamaño();
    },
  },
  created() {
    this.getIdLocal();
  },
};
</script>

<style>
.centro {
  text-align: center;
}
</style>