使用Facebook javascript api发布多部分/表单数据编码图像

Question

根据Facebook在用户照片边缘上的图形文档，可以使用多部分/表单数据编码的二进制图像从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 */
      }
    }
);

问题是网络上似乎没有任何关于这项工作的示例文档。有一种方法可以绕过FB。api并通过xhr请求直接发布到边缘。我已经做到了，但我真的很想知道如何使用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中查看网络控制台时，您可以看到内容类型：多部分/form-data标头被设置，然后它将所有数据放入“请求有效载荷”中，返回响应是一个成功的后ID。

方法2：不起作用。Facebook返回的错误是（#324）需要上传文件。查看网络控制台，您可以看到设置了内容类型：application/x-www-form-urlencoded头（这是我们不想要的）。表单被放在表单数据下的“source”post参数下，这就是为什么我假设它会被Facebook拒绝。

制造FB需要什么魔法。api在这里工作正常吗？他们在文档中给出的唯一线索是W3关于多部分/表单数据规范的链接，我知道我的表单数据符合该规范，因为它在方法#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功能。

如果输入是画布对象的Base64字符串，则可以使用以下方法：在JavaScript中从Base64字符串创建Blob

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