使用 Facebooks javascript api 到 post multipart/form-data 编码图像

Question

根据 Facebook 关于用户照片边缘的 Graph 文档，可以使用 multipart/form-data 编码的二进制图像 post 来自 javascript 的照片。 https://developers.facebook.com/docs/graph-api/reference/v2.2/user/photos

/* make the API call */
FB.api(
    "/me/photos",
    "POST",
    {
        "source": "{image-data}"
    },
    function (response) {
      if (response && !response.error) {
        /* handle the result */
      }
    }
);

问题是网络上似乎没有任何示例文档说明它究竟应该如何工作。有一种方法可以通过 xhr 请求直接绕过 FB.api 和 post 到边缘。我已经让它工作了，但我真的很想知道如何使用 FB.api 命令来做到这一点。这是我的代码（FB 应用程序已正确注册，所有 javascript sdk 都包含在文件的其他位置）：

function postImageToFacebook(authToken) {
    //Capture the image from a canvas
    var filename = "samplepic.png",
    mimeType = "image/png",
    message = "test comment",
    data = canvas.toDataURL("image/png"),
    encodedPng = data.substring(data.indexOf(',') + 1, data.length),
    imageData = Base64Binary.decode(encodedPng);

    // build the multipart/form-data
    var boundary = '----ThisIsTheBoundary1234567890';
    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';



    //METHOD #1: send the data using xhr request
    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 );
    };
    //vvv This right here seems to be key, being able to add a header vvv
    xhr.setRequestHeader( "Content-Type", "multipart/form-data; boundary=" + boundary );
    xhr.sendAsBinary( formData );


    //METHOD #2: send the data using FB.api
    FB.api("/me/photos", "POST", {
        "source": formData
    }, function(response) {
        console.log(response)
    });

};

方法#1：可行。我已经多次使用它来成功分享图像。在 Chrome 中查看网络控制台时，您可以看到 content-type:multipart/form-data header 被设置为然后将所有数据放入 "Request Payload" 和 return 响应是一个成功的post ID。

方法#2：无效。来自 Facebook 的 return 错误是 (#324) Requires upload file。查看网络控制台，您可以看到 content-type:application/x-www-form-urlencoded header 已设置（这是我们不想要的）。表单被放置在表单数据下的 "source" post 参数下，这就是我假设它被 Facebook 拒绝的原因。

使 FB.api 在这里正常工作需要什么魔法？他们在文档中提供的唯一线索是 link W3 关于 multipart/form-data 的规范，我知道我的 formData 符合该规范，因为它在方法 #1 中与 xhr 一起使用。除了 facebook 文档中提到的内容之外，我找不到此 javascript 方法实际工作的任何示例。帮助？

Answer 1

我没有让它与官方 JS SDK（FB.api）一起使用，但这是它如何轻松处理文件输入：

const fileReader = new FileReader();
const file = document.getElementById('imageInput').files[0];

fileReader.onloadend = async () => {
    const photoData = new Blob([fileReader.result], {type: 'image/jpg'});
    const formData = new FormData();

    formData.append('access_token', pageAccessToken);
    formData.append('source', photoData);
    formData.append('message', 'some status message');

    let response = await fetch(`https://graph.facebook.com/${pageId}/photos`, {
        body: formData,
        method: 'post'
    });
    response = await response.json();
    console.log(response);
};
fileReader.readAsArrayBuffer(file);

不需要额外的插件，FileReader 和 fetch API 是本机 Javascript 功能。

如果输入是 canvas 对象的 Base64 字符串，您可以使用：Creating a Blob from a base64 string in JavaScript

更多信息：http://www.devils-heaven.com/facebook-javascript-sdk-photo-upload-with-formdata/

使用 Facebooks javascript api 到 post multipart/form-data 编码图像

Using Facebooks javascript api to post multipart/form-data encoded image

javascript

multipartform-data

facebook-graph-api