HTML

js html input type image base64 example

 <input type="file" id="files" ref="files" v-on:change="handleFilesUpload($event)" class="form-control" accept="image/*" autofocus required/>


<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: ''
    }
  },
  mounted() {
    this.getStatus()
  },
  methods: {
    async getStatus() {
      const data = await this.$axios.$get(`auth/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('auth/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 file = e.target.files[0];
      this.url = URL.createObjectURL(file);
    }
  }
}
</script>