JavaScript Facebook API POST multipart/form-data

Question

在過去的幾天裏，我已經完全沉迷於這個問題。如果有人能指引我正確的方向，我會很感激！我一直想弄清楚如何通過臉譜圖API發佈圖片。

我有一個圖像從Facebook下載，通過他們的圖形API正確顯示在畫布元素中。我正在通過在其上繪製文本來修改此元素，然後想要將其上傳至Facebook。我上傳時卡住了。

這裏是我看這是有幫助的鏈接，但我仍然堅持：

Facebook Graph API - upload photo using JavaScript 討論使用的multipart/form-data的上傳使用POST請求到Facebook。

https://gist.github.com/andyburke/1498758 創建多部分表單數據併發送請求到Facebook發佈圖像的代碼。

這是我使用的嘗試和張貼圖片至Facebook

if (XMLHttpRequest.prototype.sendAsBinary === undefined) { 
    XMLHttpRequest.prototype.sendAsBinary = function(string) { 
     var bytes = Array.prototype.map.call(string, function(c) { 
      return c.charCodeAt(0) & 0xff; 
     }); 
     //this.send(new Uint8Array(bytes).buffer); //depreciated warning 
     this.send(new Uint8Array(bytes)); 
    }; 
} 

// This function takes an array of bytes that are the actual contents of the image file. 
// In other words, if you were to look at the contents of imageData as characters, they'd 
// look like the contents of a PNG or GIF or what have you. For instance, you might use 
// pnglib.js to generate a PNG and then upload it to Facebook, all from the client. 
// 
// Arguments: 
// authToken - the user's auth token, usually from something like authResponse.accessToken 
// filename - the filename you'd like the uploaded file to have 
// mimeType - the mime type of the file, eg: image/png 
// imageData - an array of bytes containing the image file contents 
// message - an optional message you'd like associated with the image 

function PostImageToFacebook(authToken, filename, mimeType, imageData, message) 
{ 
    console.log("filename " + filename); 
    console.log("mimeType " + mimeType); 
    console.log("imageData " + imageData); 
    console.log("message " + message); 

    // this is the multipart/form-data boundary we'll use 
    var boundary = '----ThisIsTheBoundary1234567890'; 

    // let's encode our image file, which is contained in the var 
    var formData = '--' + boundary + '\r\n' 
    formData += 'Content-Disposition: form-data; name="source"; filename="' + filename + '"\r\n'; 
    formData += 'Content-Type: ' + mimeType + '\r\n\r\n'; 
    for (var i = 0; i < imageData.length; ++i) 
    { 
     formData += String.fromCharCode(imageData[ i ] & 0xff); 
    } 
    formData += '\r\n'; 
    formData += '--' + boundary + '\r\n'; 
    formData += 'Content-Disposition: form-data; name="message"\r\n\r\n'; 
    formData += message + '\r\n' 
    formData += '--' + boundary + '--\r\n'; 

    var xhr = new XMLHttpRequest(); 
    xhr.open('POST', 'https://graph.facebook.com/me/photos?access_token=' + authToken, true); 
    xhr.onload = xhr.onerror = function() { 
     console.log(xhr.responseText); 
    }; 
    xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary); 
    xhr.sendAsBinary(formData); 
    console.log(formData); 
} 

到PostImageToFacebook函數調用具有以下錯誤的結果代碼：

{ 
    "error": { 
     "type": "Exception", 
     "message": "Your photos couldn't be uploaded. Photos should be less than 4 MB and saved as JPG, PNG, GIF or TIFF files.", 
     "code": 1366046 
} 

我登錄formData我粘貼的輸出如下：

------ThisIsTheBoundary1234567890
Content-Disposition: form-data; name="source"; filename="MemeImage.png"
Content-Type: image/png

------ThisIsTheBoundary1234567890
Content-Disposition: form-data; name="message"

Posting a meme image
------ThisIsTheBoundary1234567890--

Answer 1

嘗試替換

for (var i = 0; i < imageData.length; ++i) 
{ 
    formData += String.fromCharCode(imageData[ i ] & 0xff); 
} 

與

formData += imageData;