Vimeo API文件上传不断返回308响应

时间:2016-04-28 12:11:20

标签: jquery ajax vimeo

我已经在这个问题上坚持了一个多星期了,并且已经联系了Vimeo的支持但却无处可去。已阅读此处的所有帖子有类似的问题,但仍无法修复。最接近的类似帖子是Vimeo API : streaming upload using HTTP PUT and blueimp's jQuery fileupload

..但我没有使用jQuery fileupload插件,因此该选项不适用(我使用jQuery.ajax

无论如何,我尝试使用HTTP PUT方法上传视频(https://developer.vimeo.com/api/upload/videos#resumable-http-put-uploads

我已按照步骤1生成了上传票证,然后按照步骤2向upload_link_secure发送了PUT请求。这是请求..

Request URL:https://1511923893.cloud.vimeo.com/upload?ticket_id=9b867d91d7e7f83bb31f0690b6331ac0&video_file_id=522193134&signature=89c47a9b3bfc4a0ece830b75d1845e86&v6=1

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Connection:keep-alive
Content-Length:10498886
Content-Type:video/mp4
Host:1511923893.cloud.vimeo.com
Origin:http://www.talentgapp.local
Referer:http://www.talentgapp.local/
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.87 Safari/537.36

回应..

Request URL:https://1511923893.cloud.vimeo.com/upload?ticket_id=9b867d91d7e7f83bb31f0690b6331ac0&video_file_id=522193134&signature=89c47a9b3bfc4a0ece830b75d1845e86&v6=1
Request Method:PUT
Status Code:200 OK
Remote Address:54.78.176.185:443

响应标头

Access-Control-Allow-Headers:Content-Type, Content-Range,  X-Requested-With
Access-Control-Allow-Methods:POST, PUT, GET, OPTIONS
Access-Control-Allow-Origin:*
Access-Control-Expose-Headers:Range
Connection:close
Content-Length:0
Content-Type:text/plain
Date:Thu, 28 Apr 2016 11:39:53 GMT
Server:Vimeo/1.0
Timing-Allow-Origin:*
X-Backend-Server:kopiluwak
X-Requested-With:XMLHttpRequest

到目前为止一直很好 - 视频甚至出现在我的Vimeo帐户中(但是在#34;上传"状态并且永远不会完成)

因此,按照Vimeo文档的建议,然后我尝试在步骤3中验证上传(提供与以前相同的请求参数,文件数据除外,并添加{{1}标题:

请求:

Content-Range: bytes */*

响应......

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Connection:keep-alive
Content-Length:0
Content-Range:bytes */*
Content-Type:video/mp4
Host:1511923893.cloud.vimeo.com
Origin:http://www.talentgapp.local
Referer:http://www.talentgapp.local/
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.87 Safari/537.36

回复标题..

Request URL:https://1511923893.cloud.vimeo.com/upload?ticket_id=9b867d91d7e7f83bb31f0690b6331ac0&video_file_id=522193134&signature=89c47a9b3bfc4a0ece830b75d1845e86&v6=1
Request Method:PUT
Status Code:308 Resume Incomplete
Remote Address:54.78.176.185:443

正如您所看到的,我在308回复中收到了Access-Control-Allow-Headers:Content-Type, Content-Range, X-Requested-With Access-Control-Allow-Methods:POST, PUT, GET, OPTIONS Access-Control-Allow-Origin:* Access-Control-Expose-Headers:Range Connection:close Content-Length:0 Content-Type:text/plain Date:Thu, 28 Apr 2016 11:39:53 GMT Range:bytes=0-10498886 Server:Vimeo/1.0 Timing-Allow-Origin:* X-Backend-Server:kopiluwak X-Requested-With:XMLHttpRequest 。我多次重复此请求,但Range:bytes=0-10498886标题始终为Range,我从未收到200回复​​以确认上传已完成。

因此,如果我执行步骤4中所述的bytes=0-10498886请求,则会获得DELETE

有人有什么想法吗?

2 个答案:

答案 0 :(得分:2)

最后我现在有了这个工作。

感谢@razethestray带领我朝着正确的方向前进。

事实证明,在通过XHR发送之前,无需将文件附加到FormData对象。

只需按原样发送文件,它就可以正常工作..

e.g。

$.ajax({
            url : uploadUri,
            method : 'PUT',
            contentType : false,
            crossDomain : true,
            headers : {
                'Content-Type' : file.type,
                'Content-Range': "bytes " + 0 + "-" + (file.size) + "/" + file.size
            },
            processData : false,
            data : files[0]  // Not a FormData object
        })
        .done(function(){
            // complete upload
        })

另外,我了解到验证请求永远不会返回状态200 - 这正是Vimeo的文档误导我相信的。

验证请求将始终返回308并带有Range:bytes=0-10498886标头,其第一部分永远不会超过零。这是第二部分(10498886),您应该检查它是否与原始文件的大小相匹配。如果是,则完成上传。如果您在文件上传时执行验证请求,您会注意到范围的第二部分将递增,直到文件完全上传。

希望这有助于其他人。

答案 1 :(得分:1)

我也遇到了这个问题,但至少为我的用例设法解决了这个问题。

您没有说明您发送数据的格式,但在我的情况下,我发送的是FormData对象。我把它更改为发送一个原始字节数组,它开始工作。

以前(不工作):

function getVideoFormData($fileUpload) {
    var formData = new FormData();
    formData.append($fileUpload.files[0].name, $fileUpload.files[0]);
    return formData;
}

$.ajax({
    type: "PUT",
    /*Other relevant options...*/
    data: getVideoFormData($"#my-video-id");
});

现在(工作):

function getVideoFormData($fileUpload) {    
    var promise = $.Deferred();

    var reader = new FileReader();
    reader.onload = function () {
        var bytes = this.result;
        promise.resolve(bytes); 
    };
    reader.readAsArrayBuffer($fileUpload.files[0]);

    return promise;
}

getVideoFormData($"#my-video-id").done(function(bytes){
    $.ajax({
        type: "PUT",
        /*Other relevant options...*/
        data: bytes;
    });
});

请注意,readAsArrayBuffer不会立即返回数组缓冲区。而是将结果加载到reader.onload处理程序中。由于这不是同步发生的,我不得不添加jQuery Deferred object

我尝试使用reader.readAsBinaryString,但这与FormData方法的结果相同。 reader.readAsArrayBuffer方法现在适用于我,但是在Chrome / FF / IE11中。

请注意,验证步骤的结果仍为308,但视频已正确上传,DELETE步骤现在返回200.