Nuxt upload-handler does not work about vue-avatar-cropper HOT 9 CLOSED

Check your installed version of vue-avatar-cropper. upload-headers was replaced by request-options in release 4.0.0.

from vue-avatar-cropper.

Hi,
thanks for the quick answer.

Unhandled promise rejection TypeError: Failed to construct 'Request': Request with GET/HEAD method cannot have body.

:request-options="headers"

    headers: {
              'X-Requested-With': 'XMLHttpRequest',
              'X-CSRF-TOKEN': token,
          },

I don't need the request header if i could use my own upload funktion like the documention tells:

:upload-handler="cropperHandler"

      cropperHandler(cropper) {

 
        var imgdat = cropper.getCroppedCanvas().toDataURL(this.cropperOutputMime);
        var file = this.dataURLtoFile(imgdat, "test.png");
        let formData = new FormData();
        formData.append("photo", file);

        axios({
          method: "POST",
          url: "/product/testupload/",
          headers: {
            "Content-Type": "multipart/form-data",
            to: "token"
          },
          data: formData
        });
      },

but this also does not work

from vue-avatar-cropper.

Hi,
thanks for the quick answer.

Unhandled promise rejection TypeError: Failed to construct 'Request': Request with GET/HEAD method cannot have body.

:request-options="headers"

    headers: {
              'X-Requested-With': 'XMLHttpRequest',
              'X-CSRF-TOKEN': token,
          },

Read the updated README.md to know how to use the request-options prop. The way you tried above is not how it is meant to be used. Replaced does not mean it was just renamed.

from vue-avatar-cropper.

sending the header works now, thanks alot!

last question how to set a custom upload-handler
:upload-handler="cropperHandler"

      cropperHandler(cropper) {

 
        var imgdat = cropper.getCroppedCanvas().toDataURL(this.cropperOutputMime);
        var file = this.dataURLtoFile(imgdat, "test.png");
        let formData = new FormData();
        formData.append("photo", file);

        axios({
          method: "POST",
          url: "/product/testupload/",
          headers: {
            "Content-Type": "multipart/form-data",
            to: "token"
          },
          data: formData
        });
      },

from vue-avatar-cropper.

sending the header works now, thanks alot!

last question how to set a custom upload-handler
:upload-handler="cropperHandler"

      cropperHandler(cropper) {

 
        var imgdat = cropper.getCroppedCanvas().toDataURL(this.cropperOutputMime);
        var file = this.dataURLtoFile(imgdat, "test.png");
        let formData = new FormData();
        formData.append("photo", file);

        axios({
          method: "POST",
          url: "/product/testupload/",
          headers: {
            "Content-Type": "multipart/form-data",
            to: "token"
          },
          data: formData
        });
      },

The way you did it seems to be the right way, can you provide a traceback or something which could help me determine what happened?

from vue-avatar-cropper.

what do you mean with traceback? i am using nuxt 2x, vue bootstrap and avatar cropper 4.0.3.

 ```

<avatar-cropper
v-model="trigger"
:upload-handler="cropperHandler"
:upload-url="uploadUrl"
@uploading="handleUploading"
@uploaded="handleUploaded"
@completed="handleCompleted"
@error="handleError" />

methods: {
cropperHandler(cropper) {
console.log(cropper)
}
}

the custom function does not dispatch. 

from vue-avatar-cropper.

okay....i found the problem....:upload-url="uploadUrl"
it seems that if the url is set the method won't dispatch

from vue-avatar-cropper.

what do you mean with traceback? i am using nuxt 2x, vue bootstrap and avatar cropper 4.0.3.

<avatar-cropper
v-model="trigger"
:upload-handler="cropperHandler"
:upload-url="uploadUrl"
@uploading="handleUploading"
@uploaded="handleUploaded"
@completed="handleCompleted"
@error="handleError" />

methods: {
cropperHandler(cropper) {
console.log(cropper)
}
}

the custom function does not dispatch.

When you get an error in the console, it also has a traceback attached to it. The traceback is the path the code took that caused the error. Open your developer console in your browser and go to the Console tab and tell me if you got any errors and which ones.

from vue-avatar-cropper.

no erros in the console that was the problem. it was setted the upload url!

thank alot for your help!

from vue-avatar-cropper.