Facebook Graph API使用Javascript发布图片

Question

我在我的react应用程序中使用Facebook Javascript SDK，并且我想发表多张照片。 我知道那意味着我必须先发布未发布的图片，然后使用返回的ID进行发布。

但是，我在寻找好的文档时遇到了麻烦，并且在解决如何允许用户选择和发布本地图片（而不是从URL）中遇到麻烦。 将代码放在这里有点困难，但是这里是我要采取的步骤以及我遇到的错误：

1. 使用文件输入获取用户选择的文件。

2. 将图片编码为Blob，然后将其和访问令牌放入FormData中以在api请求中使用。

    var reader = new FileReader(); reader.onload = function(e) { var arrayBuffer = e.target.result; var blob = new Blob([arrayBuffer], { type: photo.type }); var pictureData = new FormData(); pictureData.append('access_token:', this.state.FBaccessToken); pictureData.append('source', blob); return pictureData; }.bind(this) return reader.readAsArrayBuffer(photo); 

3. 进行发布请求

    var encodedRequest = this.encodePhoto(photo); FB.api( "/me/photos?published=false", "POST", encodedRequest, function (response) { if (response && !response.error) { //once successfully gotten the photos add them to the array of photo ids temp.push({"media_fbid": response.id}); console.log(response); } else { alert(response.error.message); } }.bind(this) ); 

我以这种方式运行它时的错误是它似乎无法识别访问令牌，但是当我在步骤2中从pictureData中删除访问令牌并将api encodeRequest部分更改为此时：

{
    access_token: this.state.FBaccessToken,
    source: encodedRequest,
},

我收到错误“（＃324）需要上传文件” 。 我尝试将fileUpload: true,添加到SDK初始化代码中，但这似乎也无能为力。 发布简单的纯文本状态并从提要中读取一切正常。

抱歉，很长的帖子，但是如果有人有任何见解，我将不胜感激！ 谢谢。

Answer 1

它是您在第一个pictureData.append（）调用中的access_token之后的多余冒号吗？

pictureData.append（'access_token：'，this.state.FBaccessToken）; 与pictureData.append（'access_token'，this.state.FBaccessToken）;

编辑：以下是邮递员的输出，用于张贴引用笔记本电脑上文件的图像

var form = new FormData();
form.append("source", "/Users/patricklambe/images/test.jpg");
form.append("access_token", "PAGEACCESSTOKEN");
form.append("caption", "check this photo");

var settings = {
"async": true,
"crossDomain": true,
"url": "https://graph.facebook.com/v2.11/444873272561515/photos",
"method": "POST",
"headers": {
"cache-control": "no-cache",
"postman-token": "1d786fec-c9b1-2494-1b5c-8fd0e2ea5ade"
},
"processData": false,
"contentType": false,
"mimeType": "multipart/form-data",
"data": form
  }

 $.ajax(settings).done(function (response) {
  console.log(response);
});