[JQUERY] Ajax로 Base64 이미지 업로드

Ajax로 Base64 이미지 업로드

해결법

1. ---

   1.나는 마침내 Base64 이미지를 BLOB로 변환하기로 결정하여 다음과 같이 AJAX 요청을 통해 AJAX 요청을 통해 전송할 수 있습니다. 업로드 대역폭을 저장합니다 (Base64는 바이너리에 해당하는 것보다 33 % 더 많은 비트가 필요합니다).

   나는 마침내 Base64 이미지를 BLOB로 변환하기로 결정하여 다음과 같이 AJAX 요청을 통해 AJAX 요청을 통해 전송할 수 있습니다. 업로드 대역폭을 저장합니다 (Base64는 바이너리에 해당하는 것보다 33 % 더 많은 비트가 필요합니다).

   Base64ToBlob 함수는 다른 질문에 대한이 답변을 기반으로합니다.

   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');
   

2. ---

   2.Nitseg의 대답은 멋지게 작동합니다. 또한 AJAX 호출에서 AUTH 토큰을 사용해야하는 경우 다음 줄을 추가하고 싶었습니다. 다시 말하지만, 자세한 내용은 먼저 Nitseg의 답변을 살펴보십시오.

   Nitseg의 대답은 멋지게 작동합니다. 또한 AJAX 호출에서 AUTH 토큰을 사용해야하는 경우 다음 줄을 추가하고 싶었습니다. 다시 말하지만, 자세한 내용은 먼저 Nitseg의 답변을 살펴보십시오.

   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!
   }); 
   

from https://stackoverflow.com/questions/34779799/upload-base64-image-with-ajax by cc-by-sa and MIT license