Nuxt Input Image Base64

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>

 

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here