Ajax를 사용하여 base64 이미지 업로드

Ajax를 사용하여 base64 이미지 업로드

고객이 사용자에게 사진을 선택하고 자르기 및 크기 조정을 한 다음 표시할 수 있도록 제공하고 있습니다(으)로).<img>DOM 요소).
사진이 정상이면 사용자가 서버에 업로드하여 저장할 수 있습니다.

아약스의 요청으로 업로드를 하고 싶습니다.

저는 인터넷에서 클라이언트 PC에서 검색한 원본 이미지를 업로드하는 수많은 예를 발견했습니다.예를 들어:

$( '#my-form' )
  .submit( function( e ) {
    $.ajax( {
      url: 'http://host.com/action/',
      type: 'POST',
      data: new FormData( this ),
      processData: false,
      contentType: false
    } );
    e.preventDefault();
  } );

양식 입력을 통해 검색한 사진을 업로드하면 제대로 작동합니다.

저의 경우 수정된 사진을 업로드하고 싶습니다(저장된 사진).<img>요소)를 입력해야 합니다.
이 사진은 base64 사진으로 저장됩니다(참고:이미지를 생성하기 위해 croppie.js 라이브러리를 사용했습니다.

나는 아약스와 함께 이 사진을 업로드하는 방법을 모릅니다.

일반 매개 변수로 업로드하려고 했지만 서버 측에서 img가 빈 문자열입니다.

var url = 'http://host.com/action/';
var data = {};
data.img = $('img#generated-image').attr('src');

$.ajax({url: url, type: "POST", data: data})
  .done(function(e){
    // Do something
  });
// RESULTS in a empty data.img on the server side.

"img" 매개 변수를 검색할 때 서버에 빈 문자열이 있는 것이 문제입니다.이미지가 너무 커서 서버에 전달할 수 없을 수도 있고 이해할 수 없는 다른 문제가 있을 수도 있습니다.

그래서 양식을 사용하지 않고 Ajax 요청을 사용하여 base64 이미지를 서버로 전송하는 방법이 무엇인지 궁금합니다.

도와주셔서 고마워요.

편집

xml인 것 같습니다.HTTP POST 매개 변수 크기 문제입니다.이미지의 문자열 표현의 문자 수를 줄이려고 노력했고 서버는 이제 이미지를 검색할 수 있습니다.

EDIT2

post_max_size는 php.ini 파일에서 8M으로 설정된 반면 사진 크기는 24K에 불과합니다.그래서 문제는 거기에 있지 않습니다.
저는 Symfony2 프레임워크와 함께 PHP를 사용하고 있습니다.
Symfony2의 제한일 수도 있습니다.

Base64 이미지를 Blob으로 변환하여 다음과 같은 formData 객체로 Ajax 요청을 통해 전송할 수 있도록 결정하였습니다.업로드 대역폭(base64는 이진법에 비해 33% 더 많은 비트를 차지함)을 절약하고 base64 매개 변수가 전송되지 않는 이유를 찾을 수 없었습니다(확실히 어딘가의 크기 제한 때문입니다).

베이스64ToBlob 기능은 다른 질문에 대한 이 답변을 기반으로 합니다.

function base64ToBlob(base64, mime) 
{
    mime = mime || '';
    var sliceSize = 1024;
    var byteChars = window.atob(base64);
    var byteArrays = [];

    for (var offset = 0, len = byteChars.length; offset < len; offset += sliceSize) {
        var slice = byteChars.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    return new Blob(byteArrays, {type: mime});
}

내 JS 코드:

var url = "url/action";                
var image = $('#image-id').attr('src');
var base64ImageContent = image.replace(/^data:image\/(png|jpg);base64,/, "");
var blob = base64ToBlob(base64ImageContent, 'image/png');                
var formData = new FormData();
formData.append('picture', blob);

$.ajax({
    url: url, 
    type: "POST", 
    cache: false,
    contentType: false,
    processData: false,
    data: formData})
        .done(function(e){
            alert('done!');
        });

Symfony2에서 이미지를 검색할 수 있는 이유는 다음과 같습니다.

$picture = $request->files->get('picture');

Nitseg의 대답은 잘 작동합니다.또한 만약 당신이 ajax 호출에 auth 토큰을 사용해야 한다면 아래의 행을 추가하고 싶습니다.다시 한 번, 니체그의 대답을 먼저 자세히 살펴보십시오.

var formData = new FormData();
var token = "<YOUR-TOKEN-HERE>";
formData.append("uploadfile", mediaBlob);        

jQuery.ajax({
    url: url,
    type: "POST",
    cache: false,
    contentType: false,
    processData: false,
    data: formData,
    beforeSend: function (xhr){ 
        xhr.setRequestHeader("Authorization", "Bearer " + token); 
    }
})
.done((e) => {
    // It is done.
})
.fail((e) => {
    // Report that there is a problem!
}); 

언급URL : https://stackoverflow.com/questions/34779799/upload-base64-image-with-ajax