Facebook Graph API使用Javascript发布图片

Question

I'm using the Facebook Javascript SDK in my react app and I want to make a post with multiple photos. I know that that means I have to first post the pictures unpublished and then use the returned ids to make the post.

However, I'm having trouble finding good documentation and running into issues figuring out how to allow a user select and post a local picture (not from a url). The code is a bit difficult to put all here, but here are the steps I'm taking and the errors I'm getting:

1. Get file the user selected using a file input.

2. Encode the picture as a blob and put that and the access token into FormData to use in the api request.

    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. Do a post request

    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) ); 

The error when I run it this way is that it doesn't seem to recognize the access token, but when I remove the access token from pictureData in step 2, and change the api encodedRequest part to this:

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

I get the error "(#324) Requires upload file" . I tried adding fileUpload: true, to the SDK init code but that also didn't seem to do anything. Posting simple text only statuses and reading from feed is all working fine.

Sorry for the long post, but I'd be really grateful if anyone has any insight! Thanks.

Answer 1

Is it the extra colon you have after access_token in your first pictureData.append() call?

pictureData.append('access_token:', this.state.FBaccessToken); versus pictureData.append('access_token', this.state.FBaccessToken);

Edit: Below is output from postman to post images referencing a file on my laptop

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);
});