“Nuxt Input Image Base64” Kode Jawaban

Nuxt Input Image Base64

<template>
  <div class="container">
    <span class="float-end p-2">
          <nuxt-link :to="`../`" class="btn btn-danger btn-sm " accesskey="b">Orqaga</nuxt-link>
        </span>
    <form method="post" class="form-control mt-4" @submit="submitFiles">
      <div class="mb-3">
        <label for="files" class="form-label">Rasmni tanglang</label>
        <input type="file" id="files" ref="files" v-on:change="handleFilesUpload($event)" class="form-control" accept="image/*" autofocus required/>
      </div>
      <div class="mb-3 text-center">
        <img v-if="url" :src="url" class="img-thumbnail w-25"/>
      </div>
      <div class="form-floating mb-3">
        <input type="number" class="form-control" id="rating" v-model="rating" placeholder="Sana" autocomplete="off" required>
        <label for="rating">Testga berilgan ball</label>
      </div>
      <div class="form-floating mb-3">
        <input type="number" class="form-control" id="time" v-model="time" placeholder="Sana" autocomplete="off" required>
        <label for="time">Test yechish uchun berilgan vaqt (soniyada)</label>
      </div>
      <div class="row ms-1" role="group">
        <button class="btn btn-primary col-8 p-2" type="submit">
          Saqlash
        </button>
        <nuxt-link :to="`/admin/question/`" class="btn btn-secondary col-3 p-2 ms-2">
          Orqaga
        </nuxt-link>
      </div>
    </form>
  </div>
</template>
<script>
// import Swal from 'sweetalert2'
export default {
  middleware: 'isAdmin',
  data() {
    return {
      files       : '',
      success     : false,
      name        : '',
      url         : '',
      answers     : {
        answer1: '',
        answer2: '',
        answer3: '',
        answer4: ''
      },
      money       : '',
      rating      : '',
      status      : '',
      status_id   : '',
      time        : '',
      base64_image: '',
    }
  },
  mounted() {
    this.getStatus()
  },
  methods: {
    async getStatus() {
      const data   = await this.$axios.$get(`user/getStatus`);
      this.status  = data.data
      this.success = true
    },
    submitFiles(e) {
      e.preventDefault();
      let formData = new FormData();
      let file     = this.files[0];
      formData.append('files', file);
      formData.append('name', this.name);
      formData.append('answers', JSON.stringify(this.answers));
      formData.append('money', this.money);
      formData.append('rating', this.rating);
      formData.append('time', this.time);
      formData.append('status_id', this.status_id);
      this.$axios.post('admin/question/imageQuestionCreate',
        formData,
        {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then((res) => {
        this.$router.push(`/admin/question/view/${res.data.data.id}`)
      }).catch((error) => {
        console.log(error)
        console.log('FAILURE!!');
      })
    },
    handleFilesUpload(e) {
      this.files       = this.$refs.files.files;
      const reader     = new FileReader(),
            file       = this.files[0];
      let rawImg;
      reader.onloadend = () => {
        rawImg            = reader.result;
        this.base64_image = rawImg;
        this.url          = rawImg;
      }
      reader.readAsDataURL(file);
    },

  }
}
</script>