base64 image zu multipart/form-data konvertieren und mit jQuery senden

Question

Ich habe ein base64-kodiertes jpg in Javascript, das ich gerne auf einen Server schreiben würde, der multipart/form-data erwartet.

Speziell auf den Schwenk Tracker API, die ein Beispiel hat curl wie so nennen:

curl -H "X-TrackerToken: TOKEN" -X POST -F Filedata=@/path/to/file \ 
http://www.pivotaltracker.com/services/v3/projects/PROJECT_ID/stories/STORY_ID/attachments 

Ich habe nur grundlegende XML, um ihre API-Aufrufe arbeiteten gut, mit Schnipseln wie so:

$.ajax({ 
    url: 'http://www.pivotaltracker.com/services/v3/projects/158325/stories', 
    type: 'POST', 
    contentType: 'application/xml', 
    dataType: 'xml', 
    beforeSend: function(xhr) { 
    xhr.setRequestHeader("X-TrackerToken", "<KEY>") 
    }, 
    data: '<story><story_type>feature</story_type><name>Fire torpedoes</name></story>', 
    success: function() { alert('PUT completed'); } 
}); 

aber ich bin ratlos, wie ich meine Base64-kodierten jpg und senden Sie es, als ob ich eine Datei in einem Formular hochgeladen hatte.

Irgendwelche Ideen?

Answer 1

Ziemlich geradlinig. Ich habe es mit JQuery wie du versucht, aber ich konnte es nicht erreichen. Also habe ich meine eigene XHR-Implementierung erstellt, die einen benutzerdefinierten Multipart-Body an den Server sendet.

1) Initialisieren Sie XHR 2) Erstellen Sie das mehrteiliger Körper zusammen 3) senden es

var xhr = new XMLHttpRequest(); 
... 
xhr.open("POST", url, true); 

var boundary = '------multipartformboundary' + (new Date).getTime(), 
dashdash = '--', 
crlf = '\r\n', 

Dies waren die Magie passiert. Sie bauen Sie Ihre eigenen „Körper“ für die Übertragung und die Bild Daten setzen als normale Variable mit Namen in den Körper:

content = dashdash+boundary+crlf+'Content-Disposition: form-data; name="NAMEOFVARIABLEINPHP";"'+crlf+crlf+VARIABLEWITHBASE64IMAGE+crlf+dashdash+boundary+dashdash+crlf; 

Dann senden Sie es einfach aus:

xhr.setRequestHeader("Content-type", "multipart/form-data; boundary="+boundary); 
xhr.setRequestHeader("Content-length", content.length); 
xhr.setRequestHeader("Connection", "close"); 
// execute 
xhr.send(content); 

Wenn Wenn Sie PHP verwenden, haben Sie eine neue Variable in Ihrem $ _POST, die die base64-codierte Zeichenfolge enthält. Dadurch wird verhindert, dass der Browser die Zeichenfolge in 72 Zeichen/Zeile aufteilt und die + und andere Sonderzeichen entfernt.

Hoffnung, das hilft.

Answer 2

Alles, was Sie tun müssen, ist base64 Daten Blob konvertieren und über Formdata

function b64toBlob(b64Data, contentType, sliceSize) { 
      contentType = contentType || ''; 
      sliceSize = sliceSize || 512; 

      var byteCharacters = atob(b64Data); 
      var byteArrays = []; 

      for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { 
       var slice = byteCharacters.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); 
      } 

      var blob = new Blob(byteArrays, {type: contentType}); 
      return blob; 
} 


function imagetoblob(ImgId){ 
    var ImageURL = document.getElementById(ImgId).getAttribute('src'); 
    // Split the base64 string in data and contentType 
    var block = ImageURL.split(";"); 
    // Get the content type of the image 
    var contentType = block[0].split(":")[1];// In this case "image/gif" 
    // get the real base64 content of the file 
    var realData = block[1].split(",")[1];// In this case "R0lGODlhPQBEAPeoAJosM...." 

    // Convert it to a blob to upload 
    return b64toBlob(realData, contentType); 
} 

In Ihrer Formulardaten senden

formData.append("image", imagetoblob('cropped_image'));