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

CodePudding user response：

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