javascript - sending base64 image to server through ajax - Stack Overflow

admin管理员组

文章数量:1431760

I have build a image cropper tool from there i wanted to store that base64 image to server. I have sent it through Ajax. Image got stored in jpg format.But the problem is it's got corrupted. Can anyone suggest me what could be the solution?

Here is my ajax call :

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
$.ajax({
    method: 'post',
    url: 'updateProfilePicture',
    cache: false,
    contentType: "application/json; charset=utf-8",
    data: {'image': encodeURIComponent(profileImageUrl)},
    success: function (data) {
        alert(data);
    },
    error: function (jqXHR, textStatus, errorThrown) {

    }
});

Here is the controller for converting base64 to normal image and stored to server:

public function updateProfile(Request $request)
{
    $base64img = str_replace('data:image/jpeg;base64,', '', $request->Input(['image']));
    $data = base64_decode($base64img);
    $file = public_path() . '/users/' .'123123123.jpg';
    file_put_contents($file, $data);
    return \Response::json($data);
}     

I have build a image cropper tool from there i wanted to store that base64 image to server. I have sent it through Ajax. Image got stored in jpg format.But the problem is it's got corrupted. Can anyone suggest me what could be the solution?

Here is my ajax call :

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
$.ajax({
    method: 'post',
    url: 'updateProfilePicture',
    cache: false,
    contentType: "application/json; charset=utf-8",
    data: {'image': encodeURIComponent(profileImageUrl)},
    success: function (data) {
        alert(data);
    },
    error: function (jqXHR, textStatus, errorThrown) {

    }
});

Here is the controller for converting base64 to normal image and stored to server:

public function updateProfile(Request $request)
{
    $base64img = str_replace('data:image/jpeg;base64,', '', $request->Input(['image']));
    $data = base64_decode($base64img);
    $file = public_path() . '/users/' .'123123123.jpg';
    file_put_contents($file, $data);
    return \Response::json($data);
}     

• javascript
• php
• ajax
• laravel
• base64

Share Improve this question Follow edited Sep 19, 2017 at 9:25 genesst 1,42711 gold badge1313 silver badges4242 bronze badges asked Sep 19, 2017 at 8:51 HolaHola 2,23388 gold badges4444 silver badges9191 bronze badges 9

• What does "corrupted" mean? – BenRoob Commented Sep 19, 2017 at 8:53
• when i click on the image it says we can't open this file. – Hola Commented Sep 19, 2017 at 8:55
• Why are you using different content types in client and server? – jrook Commented Sep 19, 2017 at 8:55
• 1 Are you sure you have base64 encoded the image, I dont see anything that suggests that you have – RiggsFolly Commented Sep 19, 2017 at 8:55
• 2 I am pretty sure you dont need to encodeURIComponent() a base64encoded string. Base64 encoded should be ok to travel over the wire without fiddling with it. Thats what it was invented for – RiggsFolly Commented Sep 19, 2017 at 8:57

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 3

You aren't sending JSON so don't claim you are sending JSON. Remove this.

contentType: "application/json; charset=utf-8",

---

You are passing an object to data:

data: {'image': encodeURIComponent(profileImageUrl)}

When you pass an object, jQuery will encode it as form URL encoded data.

By running your code through encodeURIComponent you cause the data to be double encoded.

Don't do that.

data: {'image': profileImageUrl }

本文标签： javascriptsending base64 image to server through ajaxStack Overflow