[英]Facebook Graph API - upload photo using JavaScript
是否可以使用javascript使用Facebook Graph API上传文件,我觉得我很接近。 我正在使用以下JavaScript
var params = {};
params['message'] = 'PicRolled';
params['source'] = '@'+path;
params['access_token'] = access_token;
params['upload file'] = true;
function saveImage() {
FB.api('/me/photos', 'post', params, function(response) {
if (!response || response.error) {
alert(response);
} else {
alert('Published to stream - you might want to delete it now!');
}
});
}
运行此操作后,我收到以下错误...
"OAuthException" - "(#324) Requires upload file"
当我尝试研究这种方法时,我能找到的是一种解决这个问题的php方法
$facebook->setFileUploadSupport(true);
但是,我使用JavaScript,看起来这种方法可能与Facebook Graph权限有关,但我已经设置了权限user_photos和publish_stream,我认为这是我应该执行此操作的唯一权限。
我已经在stackoverflow上看到了几个关于这个的未解答的问题,希望我能够解释自己。 多谢你们。
是的,这是可能的,我找到2个解决方案如何做到这一点,它们彼此非常相似,你只需要将url参数定义到外部图像网址
第一个使用Javascript SDk:
var imgURL="http://farm4.staticflickr.com/3332/3451193407_b7f047f4b4_o.jpg";//change with your external photo url
FB.api('/album_id/photos', 'post', {
message:'photo description',
url:imgURL
}, function(response){
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
和SECOND一个使用jQuery Post请求和FormData:
var postMSG="Your message";
var url='https://graph.facebook.com/albumID/photos?access_token='+accessToken+"&message="+postMSG;
var imgURL="http://farm4.staticflickr.com/3332/3451193407_b7f047f4b4_o.jpg";//change with your external photo url
var formData = new FormData();
formData.append("url",imgURL);
$.ajax({
url: url,
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert("POST SUCCESSFUL");
}
});
编辑:这个答案(现在)基本上无关紧要。 如果您的图像在Web上,只需根据API指定
url
参数(并参阅其他答案中的示例)。 如果您想直接将图像内容发布到Facebook,您可能需要阅读此答案以获得理解。 另请参阅HTML5的Canvas.toDataUrl()
。
API 说 :“要发布照片, 请将照片文件附件作为multipart / form-data发出POST请求。”
FB期望要上传的图像的字节位于HTTP请求的正文中,但它们不在那里。 或者以另一种方式看待它 - 在FB.api()调用中你在哪里提供图像本身的实际内容?
FB.api() API文档很少,并没有提供包含正文的HTTP POST示例。 人们可能会因缺乏这样的例子而推断它不支持这一点。
这可能没问题 - FB.api()在封面下使用了一个名为XmlHttpRequest
东西, 它支持包括一个正文...在你最喜欢的JavaScript参考中查找它。
但是,您仍然需要解决2个子问题:
(顺便说一下,编码消息体的需要可能是PHP setFileUploadSupport(true)方法的用法 - 告诉facebook
对象在发送之前将消息体编码为multipart/form-data
)
不幸的是,子问题'2'可能会咬你 - 我没办法(上次看)从浏览器提供的Image对象中提取图像的字节。
如果要通过URL访问要上载的图像,则可以使用XmlHttpRequest获取字节。 还不错。
如果图像来自用户的桌面,您可能的追索权是为用户提供:
<form enctype="multipart/form-data">
<input type="filename" name="myfile.jpg" />
<input type="hidden" name="source" value="@myfile.jpg"/>
<input type="hidden" name="message" value="My Message"/>
<input type="hidden" name="access_token" value="..."/>
</form>
(请注意, source
引用了为文件上传小部件指定的名称)
...并希望FB期望以这种方式接收数据(首先尝试使用静态HTML表单,然后在JS中动态编码)。 有人可能会推断,事实上它会,因为他们没有提供另一种方法。
我使用@ВладимирДворник代码进行了一些修改,我有同样的问题,并且使用此代码它运行得非常好:
var imgURL = //your external photo url
FB.api('/photos', 'post', {
message: 'photo description',
access_token: your accesstoken
url: imgURL
}, function (response) {
if (!response || response.error) {
alert('Error occured:' + response);
} else {
alert('Post ID: ' + response.id);
}
});
可以使用Ajax将照片上传到Facebook个人资料,如下所示。
$.ajax({
type: "POST",
url: "https://graph.facebook.com/me/photos",
data: {
message: "Your Msg Goes Here",
url: "http://www.knoje.com/images/photo.jpg[Replace with yours]",
access_token: token,
format: "json"
},
success: function(data){
alert("POST SUCCESSFUL"); }
});
所以这是使用GRAPH API将照片发布到Facebook个人资料的最佳方式,这是一个简单的方法。
在许多答案中,我已经看到图像网址是源,图片或图像等,但这不起作用。
使用源,图片或图像会导致(#324)需要上传文件错误。
避免324错误的最佳方法。
只有@Thiago的回答是回答通过javascript 上传数据的问题。 我发现Facebook JS API没有涵盖这种情况。
我也在酿造和测试我的个人解决方案。
var conversions = {
stringToBinaryArray: function(string) {
return Array.prototype.map.call(string, function(c) {
return c.charCodeAt(0) & 0xff;
});
},
base64ToString: function(b64String) {
return atob(b64String);
}
};
var DEFAULT_CALL_OPTS = {
url: 'https://graph.facebook.com/me/photos',
type: 'POST',
cache: false,
success: function(response) {
console.log(response);
},
error: function() {
console.error(arguments);
},
// we compose the data manually, thus
processData: false,
/**
* Override the default send method to send the data in binary form
*/
xhr: function() {
var xhr = $.ajaxSettings.xhr();
xhr.send = function(string) {
var bytes = conversions.stringToBinaryArray(string);
XMLHttpRequest.prototype.send.call(this, new Uint8Array(bytes).buffer);
};
return xhr;
}
};
/**
* It composes the multipart POST data, according to HTTP standards
*/
var composeMultipartData = function(fields, boundary) {
var data = '';
$.each(fields, function(key, value) {
data += '--' + boundary + '\r\n';
if (value.dataString) { // file upload
data += 'Content-Disposition: form-data; name=\'' + key + '\'; ' +
'filename=\'' + value.name + '\'\r\n';
data += 'Content-Type: ' + value.type + '\r\n\r\n';
data += value.dataString + '\r\n';
} else {
data += 'Content-Disposition: form-data; name=\'' + key + '\';' +
'\r\n\r\n';
data += value + '\r\n';
}
});
data += '--' + boundary + '--';
return data;
};
/**
* It sets the multipart form data & contentType
*/
var setupData = function(callObj, opts) {
// custom separator for the data
var boundary = 'Awesome field separator ' + Math.random();
// set the data
callObj.data = composeMultipartData(opts.fb, boundary);
// .. and content type
callObj.contentType = 'multipart/form-data; boundary=' + boundary;
};
// the "public" method to be used
var postImage = function(opts) {
// create the callObject by combining the defaults with the received ones
var callObj = $.extend({}, DEFAULT_CALL_OPTS, opts.call);
// append the access token to the url
callObj.url += '?access_token=' + opts.fb.accessToken;
// set the data to be sent in the post (callObj.data = *Magic*)
setupData(callObj, opts);
// POST the whole thing to the defined FB url
$.ajax(callObj);
};
postImage({
fb: { // data to be sent to FB
caption: caption,
/* place any other API params you wish to send. Ex: place / tags etc.*/
accessToken: 'ACCESS_TOKEN',
file: {
name: 'your-file-name.jpg',
type: 'image/jpeg', // or png
dataString: image // the string containing the binary data
}
},
call: { // options of the $.ajax call
url: 'https://graph.facebook.com/me/photos', // or replace *me* with albumid
success: successCallbackFunction,
error: errorCallbackFunction
}
});
var getImageToBeSentToFacebook = function() {
// get the reference to the canvas
var canvas = $('.some-canvas')[0];
// extract its contents as a jpeg image
var data = canvas.toDataURL('image/jpeg');
// strip the base64 "header"
data = data.replace(/^data:image\/(png|jpe?g);base64,/, '');
// convert the base64 string to string containing the binary data
return conversions.base64ToString(data);
}
input[type=file]
加载binaryString的信息 jQuery.ajax
, jQuery.extend
, jQuery.each
是的,你可以像这里一样将数据发布到iframe,或者你可以使用jQuery文件上传 。 问题是你无法从iframe获得响应,使用插件可以使用页面句柄。
示例:使用jQuery File Upload上传视频
<form id="fileupload" action="https://graph-video.facebook.com/me/photos" method="POST" enctype="multipart/form-data">
<input type="hidden" name="acess_token" value="user_acess_token">
<input type="text" name="title">
<input type="text" name="description">
<input type="file" name="file"> <!-- name must be file -->
</form>
<script type="text/javascript">
$('#fileupload').fileupload({
dataType: 'json',
forceIframeTransport: true, //force use iframe or will no work
autoUpload : true,
//facebook book response will be send as param
//you can use this page to save video (Graph Api) object on database
redirect : 'http://pathToYourServer?%s'
});
</script>
要使用Javascript从本地计算机上传文件,请尝试HelloJS
<form onsubmit="upload();">
<input type="file" name="file"/>
<button type="submit">Submit</button>
</form>
<script>
function upload(){
hello.api("facebook:/me/photos", 'post', document.getElementById('form'), function(r){
alert(r&&!r.error?'Success':'Failed');
});
}
</script>
https://stackoverflow.com/a/16439233/68210包含一个解决方案,如果您需要上传照片数据本身并且没有网址,则该解决方案有效。
这仍然有效。 我使用它如下:
var formdata= new FormData();
if (postAs === 'page'){
postTo = pageId; //post to page using pageID
}
formdata.append("access_token", accessToken); //append page access token if to post as page, uAuth|paAuth
formdata.append("message", photoDescription);
formdata.append("url", 'http://images/image.png');
try {
$.ajax({
url: 'https://graph.facebook.com/'+ postTo +'/photos',
type: "POST",
data: formdata,
processData: false,
contentType: false,
cache: false,
error: function (shr, status, data) {
console.log("error " + data + " Status " + shr.status);
},
complete: function () {
console.log("Successfully uploaded photo to Facebook");
}
});
} catch (e) {
console.log(e);
}
我不得不问,如果你有人知道这是否可行,或者与使用PHP api for Facebook相比具有很大的安全风险。
这有效:
function x(authToken, filename, mimeType, imageData, message) {
// this is the multipart/form-data boundary we'll use
var boundary = '----ThisIsTheBoundary1234567890';
// let's encode our image file, which is contained in the var
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';
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://graph.facebook.com/me/photos?access_token=' + authToken, true);
xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary);
// Solving problem with sendAsBinary for chrome
try {
if (typeof XMLHttpRequest.prototype.sendAsBinary == 'undefined') {
XMLHttpRequest.prototype.sendAsBinary = function(text) {
var data = new ArrayBuffer(text.length);
var ui8a = new Uint8Array(data, 0);
for (var i = 0; i < text.length; i++) ui8a[i] = (text.charCodeAt(i) & 0xff);
this.send(ui8a);
}
}
} catch (e) {}
xhr.sendAsBinary(formData);
};
我似乎有类似的问题,但上面的解决方案不起作用。
我正在使用Arrabi建议的解决方案(只使用url属性)发布图像没有任何问题。 我的图像大约每个2-3 MB。
当我将我的应用程序迁移到另一台服务器(在帖子中更改我的图像的绝对URL)时,该方法为大约100k大小的图像提供了324错误。
我认为这是由于我的一些Apache设置,但当我为lighttpd更改apache时,问题仍然存在。
来自Facebook的连接实际显示在我的(apache)日志中:
69.171.234.7 - - [08 / Jun / 2012:11:35:54 +0200]“GET /images/cards/1337701633_518192458.png HTTP / 1.1”200 2676608“ - ”“facebookplatform / 1.0(+ http://开发人员) .facebook.com)”
69.171.228.246 - - [08 / Jun / 2012:11:42:59 +0200]“GET /images/test5.jpg HTTP / 1.1”200 457402“ - ”“facebookplatform / 1.0(+ http://developers.facebook .COM)”
69.171.228.246 - - [08 / Jun / 2012:11:43:17 +0200]“GET /images/test4.jpg HTTP / 1.1”200 312069“ - ”“facebookplatform / 1.0(+ http://developers.facebook .COM)”
69.171.228.249 - - [08 / Jun / 2012:11:43:49 +0200]“GET /images/test2.png HTTP / 1.1”200 99538“ - ”“facebookplatform / 1.0(+ http://developers.facebook .COM)”
69.171.228.244 - - [08 / Jun / 2012:11:42:31 +0200]“GET /images/test6.png HTTP / 1.1”200 727722“ - ”“facebookplatform / 1.0(+ http://developers.facebook .COM)”
只有test2.png成功了。
我使用以下内容来共享照片(来自Phaser框架的一些BitmapData)。 它似乎工作......
// Turn data URI to a blob ready for upload.
dataURItoBlob(dataURI:string): Blob {
var byteString = atob(dataURI.split(',')[1]);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], { type: 'image/jpeg' });
}
// Share the given bitmapData as a photo on Facebook
sharePhoto(accessToken: string, photo: BitmapData, message: string): void {
// Create form data, set up access_token, source and message
var fd = new FormData();
fd.append("access_token", accessToken);
fd.append("source", this.dataURItoBlob(photo.canvas.toDataURL("image/jpeg")));
fd.append("message", message);
var request = new XMLHttpRequest();
var thisPtr = this;
request.onreadystatechange = function () {
if (request.readyState == XMLHttpRequest.DONE) {
var json = JSON.parse(request.responseText);
if (json.hasOwnProperty("error")) {
var error = json["error"];
if (error.hasOwnProperty("type")) {
var errorType = error["type"];
if (errorType === "OAuthException") {
console.log("Need to request more permissions!");
}
}
}
} else if (request.readyState == XMLHttpRequest.HEADERS_RECEIVED) {
} else if (request.readyState == XMLHttpRequest.LOADING) {
} else if (request.readyState == XMLHttpRequest.OPENED) {
} else if (request.readyState == XMLHttpRequest.UNSENT) {
}
}
request.open("POST", "https://graph.facebook.com/me/photos", true);
request.send(fd);
}
如果有人还在寻找如何直接从画布上传到Facebook照片 ,这对我有用:
function postImageToFacebook(token, imageData, message, successCallback, errorCallback) {
var fd = new FormData();
fd.append("access_token", token);
fd.append("source", imageData);
fd.append("caption", message);
$.ajax({
url: "https://graph.facebook.com/me/photos?access_token=" + token,
type: "POST",
data: fd,
processData: false,
contentType: false,
cache: false,
success: function (data) {
successCallback(data);
},
error: function (shr, status, data) {
errorCallback(data);
},
complete: function (data) {
console.log('Completed');
}
});
}
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], {type: 'image/jpeg'});
}
使用它
// *IMPORTANT*
var FBLoginScope = 'publish_actions'; // or sth like 'user_photos,publish_actions' if you also use other scopes.
var caption = "Hello Facebook!";
var successCallback = ...;
var errorCallback = ...;
var data = $('#your_canvas_id')[0].toDataURL("image/jpeg");
try {
imageData = dataURItoBlob(data);
} catch (e) {
console.log(e);
}
FB.getLoginStatus(function (response) {
if (response.status === "connected") {
postImageToFacebook(response.authResponse.accessToken, imageData, caption, successCallback, errorCallback);
} else if (response.status === "not_authorized") {
FB.login(function (response) {
postImageToFacebook(response.authResponse.accessToken, imageData, caption, successCallback, errorCallback);
}, {scope: FBLoginScope});
} else {
FB.login(function (response) {
postImageToFacebook(response.authResponse.accessToken, imageData, caption, successCallback, errorCallback);
}, {scope: FBLoginScope});
}
});
修改自: http : //gorigins.com/posting-a-canvas-image-to-facebook-and-twitter/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.