zhanziyang / vue-croppa

A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.
https://zhanziyang.github.io/vue-croppa/
ISC License
967 stars 128 forks source link

image crop issue #130

Open rubencool opened 6 years ago

rubencool commented 6 years ago

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">


</b-modal>

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) }) }

zhanziyang commented 6 years ago

You need to use generateBlob instead of generateDataUrl. Just like what you did in #129 this issue.