将base64图像转换为multipart/form-data并使用jQuery发送

我有一个base64编码jpg在javascript中，我想发布到期望多部分/表单数据的服务器。将base64图像转换为multipart/form-data并使用jQuery发送

具体来说，该枢跟踪器API，它有一个例子卷曲调用像这样：

curl -H "X-TrackerToken: TOKEN" -X POST -F [email protected]/path/to/file \ 
http://www.pivotaltracker.com/services/v3/projects/PROJECT_ID/stories/STORY_ID/attachments

我有基本的XML只要求他们的API做工精细，采用阿贾克斯像这样：

$.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并发送它，就好像我上传了一个表单中的文件。

任何想法？

来源

2010-12-08 latentflip

相当直接。我用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，你的包含base64编码字符串的$ _POST中有一个新变量。这将防止浏览器将字符串分成72个字符/行，并删除+和其他特殊字符。

希望有所帮助。

来源

2011-07-21 21:22:32 flyandi

所有你需要做的是BASE64数据转换成团块，并通过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'));

来源

2017-11-28 16:14:50

将base64图像转换为multipart/form-data并使用jQuery发送

回答

相关问题