將base64圖像轉換為多部分/表單數據並使用jQuery發送

Question

我在javascript中有一個base64編碼的jpg，我想發布到期望multipart / form-data的服務器。

具體來說，對於關鍵跟蹤器API，它具有一個示例curl調用，如下所示：

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

我只有使用.ajax才能對其API進行基本XML調用，就像這樣：

$.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'); }
});

但是我對如何獲取以base64編碼的jpg並發送它（就像我已經以表格形式上傳文件）感到困惑。

有任何想法嗎？

Answer 1

非常坦率的。 我像您一樣使用JQuery進行了嘗試，但無法完成。 因此，我繼續構建自己的XHR實現，該實現將自定義的多部分主體發送到服務器。

1）初始化您的XHR 2）一起構建多主體3）發送它

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

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

這是魔術發生的地方。 您為傳輸建立了自己的“主體”，並將圖像數據作為具有名稱的普通變量放入主體中：

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

然后發送：

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

如果使用PHP，則$ _POST中將包含一個新變量，其中包含base64編碼的字符串。 這樣可以防止瀏覽器將字符串分成72個字符/行，並去除+和其他特殊字符。

希望能有所幫助。

Answer 2

您需要做的就是將base64數據轉換為blob並通過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);
}

在表單數據中

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