How Can I Get The Signature Image From This Signature Pad With Vuejs + Laravel

Hi I have this signtaure pad with Vuejs:

Signature pad code

I am trying to send this data into a controller to store it, but when I do this:

const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
console.log(isEmpty);
console.log(data);

let formData = new FormData();
formData.append('signtaure', this.$refs.signaturePad.saveSignature());

axios.post('/api/employee/update/27141399-8?api_token='+App.apiToken, formData, config)
.then(function (response) {
 currentObj.success = response.data.success;
})

If I check the console.log() it displays this:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABioAAAJxCAYAAADcoOoFAAAAAXNSR0IArs4c6QAAIABJREFUeF7s3c+LrUmaF/AYN25GqkXGndbIbEQYSxQUV+WAi9lIzT8g1S5ddbkQXAhVsxSErlq7qGpcupgqcCHCYNfGhQhjLcQfMM604CC6GAsFR8Fp+eL7jNGnT96b92bmiXif83khOXnvPXki4vNEZla93xMRPzNcBAgQIECAAAECBAgQIECAAAECBAgQIECAAIFFAj+zqF3NEiBAgAABAgQIECBAgAABAgQIECBAgAABAgSGoMIkIECAAAECBAgQIECAAAECBAgQIECAAAECBJYJCCqW0WuYAAECBAgQIECAAAECBAgQIECAAAECBAgQEFSYAwQIECBAgAABAgQIECBAgAABAgQIECBAgMAyAUHFMnoNEyBAgAABAgQIECBAgAABAgQIECBAgAABAoIKc4AAAQIECBAgQIA

I check the laravel controller to get the file like this:

  $request->signature;

And it is empty.. a blank value so I wonder how can I send the base_64 image with vuejs to the controller because how I am doing it does not work

You append the signature to the formdata object like this:

formData.append('signtaure', this.$refs.signaturePad.saveSignature());

In the laravel controller you're checking for the signature property on the request object.

Notice the typo you've made within the append function? signtaure != signature.

@julianstark999 also made a comment about this, but I think you misinterpreted his comment, so I'm explaining it again :)