Vimeo API：使用 HTTP PUT 和 blueimp 的 jQuery fileupload 进行流式上传

Posted 2023-02-24

【中文标题】Vimeo API：使用 HTTP PUT 和 blueimp 的 jQuery fileupload 进行流式上传

【英文标题】：Vimeo API : streaming upload using HTTP PUT and blueimp's jQuery fileupload

【发布时间】：2014-12-01 01:51:54

【问题描述】：

我正在尝试在网站上实现一个上传模块，该模块允许我们的用户将视频上传到我们的 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 请求的请求标头的样子：

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

这就是我调用 jQuery 文件上传的方式：

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

我也尝试将 Content-Type 标头强制为“video/mp4”，但最终没有任何区别。

我还通过绑定 jquery fileupload 的提交事件检查了文件的大小，并且我还得到了比标头中发送的字节数更低的字节数，在本示例中为 43418764，可以吗？

通过在 upload_link_secure 上发送 PUT 请求来验证上传，我得到了一些响应标头：

状态码：308 简历不完整

范围：字节=0-3948544

状态码：308 简历不完整

范围：字节=0-38682624

状态码：308 简历不完整

范围：字节=0-43401216

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

范围：字节=0-43418955

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

"body":"error":"您的视频文件无效。您上传的文件格式无效，或者您的上传不完整。请确保在将其标记为完成之前验证您的上传。" ,"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"

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

谢谢！

[edit] 非常感谢 Dashron，实际上我不得不将 jQuery fileupload 的 multipart 选项设置为 false ：

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

在那之后，我收到了这个 HTTP 错误：

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

可能有一个干净的解决方案，但我没有找到它，所以我只是评论了在 jquery.fileupload.js 中设置 Content-Disposition 标头的行

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

（参见edit3）

现在它工作正常！ :)

[edit2] 有人要求我提供更完整的代码示例，以说明我想出的使 PUT 上传工作的代码，所以这里是一个 Gist，其中包含来自我的 Symfony 应用程序的相关 Twig 模板。我希望它足够清楚并且可以提供帮助。代码可能可以改进很多，但我想这是一个不错的起点。 https://gist.github.com/paulgv/13ff6d194bc0d662de7b

[edit3] 我还意识到我从未更新我的代码，并针对Content-Disposition 标头的问题进行了更清晰的修复（请参阅上面划掉的文本）。感谢 blueimp 的帮助，我发现您可以在fileuploadsend 回调中简单地删除此标头：

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

【问题讨论】：

嘿@paulgv 我有同样的错误，并按照你提到的步骤。现在看来还好。除了文件上传后，我在我的帐户中看不到它 - 并且调用了 jquery 文件上传的错误回调。任何线索为什么？

嗨@callmekatootie，了解问题的最佳方法可能是在上传期间查看 Chrome 网络检查器中的网络选项卡，您应该能够看到哪个请求实际上中断了上传。跨度>

【参考方案1】：

PUT 上传不支持多部分表单编码。 PUT 上传的请求正文应仅包含文件的原始字节。

POST 上传支持多部分，但 POST 上传不支持可恢复上传或范围标头。