Vimeo API：使用HTTP PUT和blueimp的jQuery文件上传进行流式上传 [英] Vimeo API : streaming upload using HTTP PUT and blueimp's jQuery fileupload

问题描述

我试图在网站上实现上传模块，以便我们的用户将视频上传到我们的Vimeo帐户。我正在使用blueimp的jQuery文件上传和Vimeo的新API。
https://github.com/blueimp/jQuery-File-Upload / wiki / Options
https：//developer.vimeo .com / api / upload＃http-put-uploading
我认为它已经接近工作了，但是我必须错过一些细节。
根据Vimeo的API，我需要：
1.生成一个上传工单，工作正常
2.然后我把upload_link_secure传递给jquery文件上传，开始上传。这就是PUT请求的请求标题：

$ p $ 请求方法：PUT
状态码：200 OK
接受：* / *
接受编码：gzip，deflate，sdch
接受语言：fr-FR，fr; q = 0.8，en-US; q = 0.6，en; q = 0.4
连接：保持活动
Content-Length：43418955
Content-Type：multipart / form-data; border = ---- WebKitFormBoundarye8sGy57JH6ACoOfJ


这就是我如何调用jQuery文件上传：

  $（'＃file'）。fileupload（{
 url：upload_link_secure，
 type：'PUT'
}）; 
  

我也尝试强制将Content-Type标题转换为video / mp4，但不能

我也通过绑定jquery fileupload的提交事件来检查文件的大小，并且我还得到了比在头文件中发送的字节数少的字节数， 43418764在这个例子中，这是好吗？
$ b $ ol $ start

通过在upload_link_secure上发送PUT请求来验证上传，一些响应头I获得：


lockquote

状态码：308恢复不完整

范围：bytes = 0-3948544

状态码：308恢复未完成

范围：bytes = 0-38682624 b
$ b

状态代码：308恢复不完整

范围：bytes = 0-43401216

4. 确保所有字节都成为Vimeo，然后通过发送DELETE请求完成上传在complete_uri
   我得到th是验证上传时的最后一个标题：
   

范围：bytes = 0-43418955

它似乎与第一个请求中的Content-Length发送相匹配，所以我执行一个DELETE请求，这是我得到的响应：

{body：{error：您的视频文件无效。要么你上传了无效的文件格式，要么你的上传不完整。 }，status：400，headers：{Date：Mon，2014年10月6日17，Server：Apache，Vary ：Accept，Vimeo-Client-Id，Accept-Encoding，Cache-Control：no-cache，max-age = 315360000，Expires：Thu，20 Oct Oct 17，Content- ：184，X-Cnection：close，Content-Type：application / vnd.vimeo.error + json，Via：1.1 dca1-10}}

我一定犯了一个非常愚蠢的错误，但是我不是很熟悉所有这些HTTP请求和响应，有没有人知道我做错了什么？

谢谢！

感谢Dashron， （

 url： upload_link_secure，
 type：'PUT'，
 multipart：false 
}）; 
  

之后，我得到了这个HTTP错误：

  XMLH ttpRequest无法加载https://1511632921.cloud.vimeo.com/upload？[...]。访问控制允许标题不允许请求标题字段内容处置。 
  

可能有一个干净的解决方法，但是我没有找到它，注释了在jquery.fileupload.js中设置Content-Disposition标题的行。
$ b $ pre $ // if（！multipart || options。 blob ||！this._isInstanceOf（'File'，file））{
// options.headers ['Content-Disposition'] ='attachment; filename ='+
// encodeURI（file.name）+'';

$ / code>


（参见 edit3 ）

现在工作正常！ ：）

[edit2] 我被要求提供更完整的代码，是一个包含我的Symfony应用程序相关的小枝模板的Gist。我希望这很清楚，它可以帮助。代码可能可以改善很多，但我想这是一个好起点。 https://gist.github.com/paulgv/13ff6d194bc0d662de7b

[edit3] 我也意识到，我从来没有更新我的代码与更清洁的问题，我已经与 Content-Disposition 标题（见上面划掉的文字）。感谢 blueimp 的帮助，我发现您可以简单地删除此标题 fileuploadsend 回调：

  .bind（'fileuploadsend'，function（e ，data）{
 data.headers = {}; 
}）
  

解决方案

PUT上传不支持多部分表单编码。 PUT上传应该只有文件的原始字节的请求体。

$ b

Multipart支持POST上传，但POST上传不支持可恢复的上传或范围标题。

I'm trying to implement an upload module on a website which would allow our users to upload videos to our Vimeo account. I'm using blueimp's jQuery File upload and Vimeo's new API. https://github.com/blueimp/jQuery-File-Upload/wiki/Options https://developer.vimeo.com/api/upload#http-put-uploading I think it's close to be working but I must be missing some detail. According to Vimeo's API, I need to : 1. Generate an upload ticket, which works fine 2. I then pass the upload_link_secure to jquery file upload which starts uploading. This is what the requests headers for the PUT request look like :

Request Method:PUT
Status Code:200 OK
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
Connection:keep-alive
Content-Length:43418955
Content-Type:multipart/form-data; boundary=----WebKitFormBoundarye8sGy57JH6ACoOfJ

This is how I call jQuery file upload :

$('#file').fileupload({
url: upload_link_secure,
type: 'PUT'
});

I also tried forcing the Content-Type header to "video/mp4" but it doesn't make any difference in the end.

I also checked the size of the file by binding jquery fileupload's submit event and I also get a lower bytes count than what's sent in the headers, 43418764 in this example, is this okay ?

3. Verify the upload by sending PUT requests on upload_link_secure, some response headers I get :

Status Code:308 Resume Incomplete

Range:bytes=0-3948544

Status Code:308 Resume Incomplete

Range:bytes=0-38682624

Status Code:308 Resume Incomplete

Range:bytes=0-43401216

4. Make sure all the bytes made it to Vimeo, then complete the upload by sending a DELETE request on complete_uri I get this last header when verifying the upload :

Range:bytes=0-43418955

It seems to match the Content-Length send in the first request so I perform a DELETE request, and this is the reponse I get :

{"body":{"error":"Your video file is not valid. Either you have uploaded an invalid file format, or your upload is incomplete. Make sure you verify your upload before marking it as complete."},"status":400,"headers":{"Date":"Mon, 06 Oct 2014 17","Server":"Apache","Vary":"Accept,Vimeo-Client-Id,Accept-Encoding","Cache-Control":"no-cache, max-age=315360000","Expires":"Thu, 03 Oct 2024 17","Content-Length":"184","X-Cnection":"close","Content-Type":"application/vnd.vimeo.error+json","Via":"1.1 dca1-10"}}

I must have made a very dumb mistake but I'm not very familiar with all those HTTP requests and reponses, does anybody know what I did wrong ?

Thanks !

[edit] Thanks a lot Dashron, I actually had to set jQuery fileupload's multipart option to false :

$('#file').fileupload({
        url: upload_link_secure,
        type: 'PUT',
        multipart: false
    });

After that, I was getting this HTTP error :

XMLHttpRequest cannot load https://1511632921.cloud.vimeo.com/upload?[...]. Request header field Content-Disposition is not allowed by Access-Control-Allow-Headers. 

There might be a clean fix for that but I didn't find it so I simply commented the lines that set the Content-Disposition header in jquery.fileupload.js

// if (!multipart || options.blob || !this._isInstanceOf('File', file)) {
//     options.headers['Content-Disposition'] = 'attachment; filename="' +
//         encodeURI(file.name) + '"';
// }

(see edit3)

Now it works fine ! :)

[edit2] I was asked for a more complete example of the code I came up with to make that PUT upload work so here is a Gist containing the relevant Twig template from my Symfony application. I hope it's clear enough and that it can help. The code can probably be improved a lot but I guess it's an okay starting point. https://gist.github.com/paulgv/13ff6d194bc0d662de7b

[edit3] I also realize that I never updated my code with a cleaner fix for the issue I had with the Content-Disposition header (see crossed out text above). Thanks to blueimp's help, I found out that you can simply remove this header in fileuploadsend callback :

.bind('fileuploadsend', function (e, data) {
    data.headers = {};
})

解决方案

PUT uploads do not support multipart form encoding. PUT uploads should have a request body of only the raw bytes of the file.

Multipart is supported on POST uploads, but POST uploads do not support resumable uploads or range headers.

这篇关于Vimeo API：使用HTTP PUT和blueimp的jQuery文件上传进行流式上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！