使用blueimp / jQuery-File-Upload

时间:2016-12-09 05:39:24

标签: facebook-graph-api jquery-file-upload blueimp

我今天整天绞尽脑汁试图让这篇文章发挥作用。基本上我使用的是blueimp JQuery-File-Upload代码,我有一个带有样式输入按钮的页面,用于从文件系统中选择一个文件 - 图像或视频。

<span class="button fileinput-button">
<i class="fa fa-plus" aria-hidden = "true"></i>
Add Photo or Video
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]" />
</span>

我还在页面中编入了一张表格,其中包含图片或视频的Facebook帖子所需的数据。

 <form id = "fb-form" enctype="multipart/form-data" method="post" name="fileinfo">
<!---->
<input type="hidden" name="access_token" value="<AN ACCESS TOKEN>">
<input type="hidden" name="title" value="My fabulous title" />
<input type="hidden" name="description" value="I made this movie with my own hands" />
<input type="hidden" name="name" value="My Challenge Movie" />
<input type="hidden" name="scope" value="publish_stream" />
<input type="hidden" name="app_id" value="<APP_ID>" />
<input type="hidden" name="debug" value="all" />
</form>

我自定义的javascript在片段

中显示
$('#fileupload').fileupload({
url: url,
acceptFileTypes: /(\.|\/)(mp3|ogg|mp4|mov|flv|gif|jpe?g|png)$/i,
dataType          : 'json',
autoUpload        : false,
singleFileUploads : true,
multipart         : true,
type             : 'POST',
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
previewMaxWidth: 425,
previewMaxHeight: 600

}).on('fileuploadadd', function (e, data) {

$("#files").empty(); // to remove the canvas when a new pic is selected
$('progress').attr('value', 0);
$scope.$apply(function (response) {
$scope.image_chosen = true;
});

if(data.originalFiles[0]) {
if(data.originalFiles[0]) {
$('#fileupload').fileupload(
'option',
{
url: 'https://graph-video.facebook.com/v2.8/140954354354343/videos',
formData: $('#fb-form').serializeArray()
}
);
}
}

data.context = $('<div/>').appendTo('#files');
data.context.addClass('fix-position');

var file = data.files[0], index = 0;

var node = $('<p/>').append(uploadButton.clone(true).data(data));
node.appendTo(data.context);

})

基本上我正在寻找图片a:

{
"error": {
  "message": "An access token is required to request this resource.",
  "type": "OAuthException",
  "code": 104,
  "fbtrace_id": "GdH43Db1ziy"

}    }

和视频:

{
"error": {
    "message": "There was a problem uploading your video file. Please    try again.",
    "type": "OAuthException",
    "code": 381,
    "error_subcode": 1363021,
    "is_transient": false,
    "error_user_title": "Video Upload Problem",
    "error_user_msg": "There was a problem uploading your video. Please   try again.",
    "fbtrace_id": "EnIrs+2K2uN"
},
"__debug__": {}
}

但访问令牌已通过API资源管理器验证...

我尝试仅使用HTML表单元素进行上传,并在没有JS的情况下从页面提交并且它有效 - 所以我有点认为它与JS XHR请求有关...

有没有人有任何经验或想法?

0 个答案:

没有答案