I am using your library image crop library. so every thing was fine i was able to crop image. when there was case of image upload i was stuck since it crop an image in based64 format and when i tried to upload image my file forma didn`t match. so what shall i do to upload and image.
Below is my javascript code to upload an image to server,
import {axiosWithOutAuth} from '../../../utils/axios-common'
export default {
data () {
return {
croppa: {}
}
I am using your library image crop library. so every thing was fine i was able to crop image. when there was case of image upload i was stuck since it crop an image in based64 format and when i tried to upload image my file forma didn`t match. so what shall i do to upload and image.
<b-modal ok-title="Select" @ok="generateImage" :id="'listOfImage'" title="Upload Profile Image" class="modal-primary" size="sm">
Below is my javascript code to upload an image to server, import {axiosWithOutAuth} from '../../../utils/axios-common' export default { data () { return { croppa: {} }
generateImage: function () { let url = this.cropImage.generateDataUrl() if (!this.cropImage.hasImage()) { alert('no image') return } const formData = new FormData() formData.append('image', url) formData.append('bus', this.id) axiosWithOutAuth({ method: 'post', url: '/buses/gallery/upload/', data: formData, headers: { 'Authorization': 'JWT ' + localStorage.getItem('user-token'), 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW' } }).then(response => { alert('sucessfully uploaded') this.$router.go(this.$router.currentRoute) }).catch(function (error) { console.log(error) }) }