将 base64 图像转换为 multipart/form-data 并使用 jQuery 发送 [英] Converting base64 image to multipart/form-data and sending with jQuery

问题描述

我在 javascript 中有一个 base64 编码的 jpg，我想将其发布到需要 multipart/form-data 的服务器.

I have a base64 encoded jpg in javascript which I would like to post to a server which is expecting multipart/form-data.

具体来说，对于关键的跟踪器 API，它有一个像这样的 curl 调用示例:

Specifically, to the pivotal tracker API, which has an example curl call like so:

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

我只有基本的 XML 调用他们的 API 工作正常，使用 .ajax 像这样:

I have basic XML only calls to their API working fine, using .ajax like 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'); }
});

但我对如何获取我的 base64 编码的 jpg 并发送它感到难堪，就像我以表单上传了文件一样.

but I am stumped on how to take my base64 encoded jpg and send it as if I had uploaded a file in a form.

有什么想法吗?

推荐答案

您需要做的就是将 base64 数据转换为 blob 并通过 FormData 发送

All you need to do is convert base64 data to blob and send it via 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'));

这篇关于将 base64 图像转换为 multipart/form-data 并使用 jQuery 发送的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！