Question

是否可以使用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上看到了几个关于这个的未解决的问题，希望我能够解释自己。谢谢你们。

Answer 1

是的，这是可能的，我找到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);
    }

});

和第二个使用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");
                    }
                });

Answer 2

编辑：这个答案（现在）基本上无关紧要。如果您的图片在网络上，请根据API指定url参数（并参阅其他答案中的示例）。如果您想直接将图像内容发布到Facebook，您可能需要阅读此答案以获得理解。另请参阅HTML5的Canvas.toDataUrl()。

API says：“要发布照片，请将照片文件附件作为multipart / form-data 发出POST请求。”

FB期望要上传的图像的字节位于HTTP请求的正文中，但它们不存在。或者以另一种方式看待它 - 在FB.api（）调用中你在哪里提供图像本身的实际内容？

FB.api() API文档记录很少，并未提供包含正文的HTTP POST示例。人们可能会因缺乏这样的例子而推断它不支持这一点。

那可能没问题 - FB.api（）正在使用一些名为XmlHttpRequest的内容，支持包括一个正文......在你最喜欢的JavaScript参考中查找。< / p>
但是，您仍然需要解决2个子问题：

如何准备图像字节（以及请求的其余部分）为multipart/form-data;和

获取图像本身的字节

（顺便说一句，编码消息体的需要可能就是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中动态编码）。有人可能会推断，事实上它会，因为他们没有提供另一种方法。

Answer 3

我使用@ВладимирДворник代码进行了一些修改，我遇到了同样的问题，并且使用了这段代码它运行得非常好：

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

        });

Answer 4

可以使用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错误的最佳方法。

Answer 5

是的，您可以将此数据发布到here之类的iframe，或者您可以使用jQuery File Upload。问题是你无法从iframe获得响应，使用插件可以使用页面句柄。

示例：使用jQuery文件上传

上传视频

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

Answer 6

使用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>

在http://adodson.com/hello.js/demos/upload.html

上有一个上传演示

Answer 7

https://stackoverflow.com/a/16439233/68210包含一个解决方案，如果您需要自己上传照片数据而且没有网址，则会有效。

Answer 8

这仍然有效。我正在使用它如下：

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

我不得不问，如果你有人知道这是否可行，或者与在Facebook上使用PHP api相比具有很大的安全风险。

Answer 9

这有效：

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

Answer 10

我似乎遇到了类似的问题，但上述解决方案无效。

我正在使用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： //developers.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成功。

Answer 11

我使用以下内容来共享照片（来自Phaser框架的一些BitmapData）。它似乎有用......

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace TransparentClickThrough
{       
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();            
    }

    private void ButtonOne_Click(object sender, RoutedEventArgs e)
    {
        MessageBox.Show("You clicked button 1!");
    }

    private void ButtonTwo_Click(object sender, RoutedEventArgs e)
    {
        MessageBox.Show("You clicked button 2!");
    }
}

Answer 12

如果有人还在寻找如何将直接从画布上传到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/

Facebook Graph API - 使用JavaScript上传照片

12 个答案:

但它比那个