Question

根据Facebook关于用户照片边缘的图表文档，可以使用multipart / form-data编码的二进制图像从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中观看网络控制台时，您可以看到设置了content-type:multipart/form-data标头，然后将所有数据放入＆＃34;请求有效负载＆＃34;并且返回响应是成功的帖子ID。

方法＃2 ：不起作用。 Facebook返回的错误是(#324) Requires upload file。查看网络控制台，您可以看到设置了content-type:application/x-www-form-urlencoded标头（这是我们不想想要的）。表格放在＆＃34;来源＆＃34;在表单数据下发布参数，这就是我假设它被Facebook拒绝的原因。

使FB.api正常工作所需的魔力是什么？他们在文档中提供的唯一线索是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功能。

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

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

使用Facebook javascript api发布multipart / form-data编码图像

1 个答案: