Javascript 将base64图像转换为多部分/表单数据并使用jQuery发送

我有一个用javascript编码的base64 jpg，我想把它发布到一个需要多部分/表单数据的服务器上

特别是pivotal tracker 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'); }
});

$.ajax({
网址：'http://www.pivotaltracker.com/services/v3/projects/158325/stories',
键入：“POST”，
contentType:“应用程序/xml”，
数据类型：“xml”，
发送前：函数（xhr）{
setRequestHeader（“X-TrackerToken”，“X-TrackerToken”）
},
数据：“特色火力鱼雷”，
成功：函数（）{alert（'PUT completed'）；}
});

但我很难理解如何使用base64编码的jpg并将其发送，就像我上传了一个表单中的文件一样

---

有什么想法吗？

非常直截了当。我和您一样使用JQuery进行了尝试，但没有成功。因此，我继续构建自己的XHR实现，它将向服务器发送一个自定义的多部分主体

1） 初始化XHR 2） 一起构建多部分主体 3） 发送它

这就是神奇的发生。您为传输构建自己的“主体”，并将图像数据作为一个名为的普通变量放入主体中：

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，则$\u POST中有一个新变量，其中包含base64编码字符串。这将防止浏览器将字符串拆分为72个字符/行，并去掉+和其他特殊字符

---

希望能有所帮助。

您只需将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);
}

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