Facebook Graph API - 使用 JavaScript 上传照片 [英] Facebook Graph API - upload photo using JavaScript

问题描述

是否可以使用 javascript 使用 Facebook Graph API 上传文件，我觉得我很接近.我正在使用以下 JavaScript

Is it possible to upload a file using the Facebook Graph API using javascript, I feel like I'm close. I'm using the following 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!');
        }
    }); 
}

运行时我收到以下错误...

Upon running this I receive the following error...

"OAuthException" - "(#324) Requires upload file"

当我尝试研究这种方法时，我只能找到一种可以解决此问题的 php 方法

When I try and research this method all I can find out about is a php method that apears to solve this

$facebook->setFileUploadSupport(true);

但是，我使用的是 JavaScript，看起来这种方法可能与 Facebook Graph 权限有关，但我已经设置了权限 user_photos 和 publish_stream，我认为这是我执行此操作所需的唯一权限.

However, I am using JavaScript, it looks like this method might be to do with Facebook Graph permissions, but I already have set the permissions user_photos and publish_stream, which I believed are the only ones I should need to perform this operation.

我在 stackoverflow 上看到了几个与此相关的未解答的问题，希望我能对自己进行足够的解释.谢谢各位.

I have seen a couple of unanswered questions regarding this on stackoverflow, hopefully I can explained myself enough. Thanks guys.

推荐答案

这个答案(现在)在很大程度上无关紧要.如果您的图片在网络上，只需根据 API(并参见其他答案中的示例).如果您想直接将图像内容发布到 facebook，您可能需要阅读此答案以获取理解.另请参阅 HTML5 的 Canvas.toDataUrl().

this answer is (now) largely irrelevant. If your image is on the web, just specify the url param as per the API (and see examples in other answers). If you would like to POST the image content to facebook directly, you may want to read this answer to gain understanding. Also see HTML5's Canvas.toDataUrl().

API 说:要发布照片，请发出 POST请求将照片文件附件作为 multipart/form-data."

The API says: "To publish a photo, issue a POST request with the photo file attachment as multipart/form-data."

FB 期望要上传的图像字节在 HTTP 请求的正文中，但它们不在那里.或者以另一种方式看待它 - 您在 FB.api() 调用中的哪个位置提供图像本身的实际内容?

FB is expecting that the bytes of the image to be uploaded are in the body of the HTTP request, but they're not there. Or to look at it another way - where in the FB.api() call are you supplying the actual contents of the image itself?

FB.api() API 的文档不足，并且不提供包含正文的 HTTP POST 示例.如果没有这样的例子，人们可能会推断它不支持这一点.

The FB.api() API is poorly documented, and doesn't supply an example of an HTTP POST which includes a body. One might infer from the absence of such an example that it doesn't support this.

这可能没问题 - FB.api() 在幕后使用了一种叫做 XmlHttpRequest 的东西，确实 支持包括一个主体......在你最喜欢的 JavaScript 中查找它参考.

That's probably OK - FB.api() is using something called XmlHttpRequest under the covers which does support including a body ... look it up in your favourite JavaScript reference.

但是，您仍然需要解决 2 个子问题:

However, you'll still have 2 sub-problems to solve:

1. 如何将图像字节(以及请求的其余部分)准备为 multipart/form-data;和
2. 获取图像本身的字节

(顺便说一句，对消息正文进行编码的需要可能是 PHP setFileUploadSupport(true) 方法的用途 - 告诉 facebook 对象将消息正文编码为 multipart/form-发送前的数据)

(incidentally, the need to encode the message body is probably what the PHP setFileUploadSupport(true) method is for - tell the facebook object to encode the message body as multipart/form-data before sending)

不幸的是，子问题2"可能会咬你 - 没有办法(我上次看)从浏览器提供的 Image 对象中提取图像的字节.

Unfortunately, sub-problem '2' may bite you - there is no way (last time I looked) to extract the bytes of an image from the browser-supplied Image object.

如果要上传的图像可以通过 URL 访问，您可以使用 XmlHttpRequest 获取字节.还不错.

If the image to be uploaded is accessible via a URL, you could fetch the bytes with XmlHttpRequest. Not too bad.

如果图像来自用户的桌面，您可能的方法是向用户提供:

If the image is coming from the user's desktop, your probable recourse is to offer the user a:

 <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 引用了文件上传小部件的名称)

(notice that source references the name given to the file-upload widget)

... 并希望 FB 预期以这种方式接收数据(先尝试使用静态 HTML 表单，然后再在 JS 中动态编码).人们可能会推断出它实际上会，因为他们没有提供其他方法来做到这一点.

... and hope that FB anticipated receiving the data in this manner (try it with a static HTML form first, before coding it up dynamically in JS). One might infer that in fact it would, since they don't offer another means of doing it.

这篇关于Facebook Graph API - 使用 JavaScript 上传照片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！