使用 ajax 通过签名的 url 将文件上传到谷歌云存储

Question

我尝试使用签名的 url 将文件上传到我的 Google Cloud Storage。

• 我已经使用 gsutil 在我的存储桶上设置了 CORS 参数
• 浏览器向 Django 后端发送 ajax 请求以获取签名的 url
• Django 后端向 GCS 发出请求以创建签名的 url
• 签名的 url 被发送回浏览器。
• 我尝试在 ajax 中使用此签名 URL 将视频文件 (Content Type="video/mp4") 上传到 GCS
• GCS 的请求返回状态码 200
• 最后但同样重要的是，在我的存储桶中创建了一个空文件...

如何防止上传空文件？
我没有在 GCS 文档中看到，也没有在 stackoverflow 上看到有什么问题

function ajaxSendToStorage(url, file, row){
  $.ajax({
    method: 'PUT',
    dataType: "xml",
    contentType: file.type,
    crossDomain: true,
    data: file,
    url: url,
    beforeSend: function (request){
        request.setRequestHeader("Content-Type", 'multipart/formdata; charset=UTF-8');
    },
    success: function(data) {
        storageLoadComplete(row)
    },
    complete: function() {
        // do something when complete
    },
  });
}

...这是我在控制台日志中得到的：

一般

请求 URL： https://test-dev-flowker.storage.googleapis.com/media/uploads/FR/flowker_e6938cf0/2020/3/full_9140a387-0595-4ea7-9fdd-f5d525e57515.mp4?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=dev-storage%40brilliant-tower-264412.iam.gserviceaccount.com%2F20200317%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20200317T105745Z&X-Goog-Expires=1800&X-Goog-SignedHeaders=host&x-goog-signature=076e32c738ea28ea3c1a3900d3f0b10e096120649a62911a5b165668045793006bef4b87c372306393db7adb5b35f6bb07e092e87a8ccf6fb7edfc98a74f7cc0558c520ba74b5dc3c1563426edc6f63a5db43c0a78298747fd5b6fbe7650e79ddf75b0cb05b3fb2690f34a5d1fc0e2bdaafa9b2ec6d4c452a23676e45acc0a9205a3fc79dceaf7958590353ac503c597574e53b514b4e44deb8e226f07a3272876760c55edefccb4ef5f0e45555b8f679260bcf1a15421035a1367001b5ace1a28b4d977ce08b29b51a796cc0faca4b4b84296a44876f3a0e7fa1c01667ad40363df2920967a69bc98c388c2713f1fecfcb4cf43d1f9ca36909ac8983eee3212
请求方法： PUT
状态码： 200
远程地址： [2a00:1450:4007:80c::2010]:443
推荐人策略： no-referrer-when-downgrade

响应标头

access-control-allow-origin： *
access-control-expose-headers： *、内容长度、内容类型、日期、服务器, 传输编码, X-GUploader-UploadID, X-Google-Trace
alt-svc: quic=":443";马=2592000； v="46,43",h3-Q050=":443"; ma=2592000,h3-Q049=":443"; ma=2592000,h3-Q048=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000
内容长度： 0
内容类型： text/html; charset=UTF-8
日期： 2020 年 3 月 17 日星期二 10:57:46 GMT
etag： "d41d8cd98f00b204e9800998ecf8427e"
服务器： UploadServer
状态： 200
x-goog-generation： 1584442666113578
x -goog-hash： crc32c=AAAAAA==
x-goog-hash： md5=1B2M2Y8AsgTpgAmY7PhCfg==
x-goog-metageneration： 1
x-goog-stored-content-encoding: 身份
x-goog-stored-content-length: 0
x-guploader-uploadid： AEnB2UpD_E6yxot73qDMfKu6kM34PPiK7kEM4VytfmZfY6q70dJxBzWs_3y8Lkimwg_ztFTK0Vuoz-V0G_wZlKqah1cax9kJrQ

请求标头

:authority: test-dev-flowker.storage.googleapis.com
:method: PUT
:path: /media/uploads/FR/flowker_e6938cf0/2020/3/full_9140a387-0595-4ea7-9fdd-f5d525e57515.mp4?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=dev-storage%40brilliant-tower- 264412.iam.gserviceaccount.com％2F20200317％2Fauto％2Fstorage％2Fgoog4_request＆X-goog-日期= 20200317T105745Z＆X-goog-过期= 1800＆X-goog-SignedHeaders =宿主的x goog签名= 076e32c738ea28ea3c1a3900d3f0b10e096120649a62911a5b165668045793006bef4b87c372306393db7adb5b35f6bb07e092e87a8ccf6fb7edfc98a74f7cc0558c520ba74b5dc3c1563426edc6f63a5db43c0a78298747fd5b6fbe7650e79ddf75b0cb05b3fb2690f34a5d1fc0e2bdaafa9b2ec6d4c452a23676e45acc0a9205a3fc79dceaf7958590353ac503c597574e53b514b4e44deb8e226f07a3272e0d9f60c55edefccb4ef5f0e45555b8f679260bcf1a15421035a1367001b5ace1a28b4d977ce08b29b51a796cc0faca4b4b84296a44876f3a0e7fa1c01667ad40363df2920967a69bc98c388c2713f1fecfcb4cf43d1f9ca36909ac8983eea437结果的：方案： https
接受： 应用程序/xml、文本/xml、/； q=0.01
accept-encoding: gzip, deflate, br
accept-language: fr-FR,fr;q=0.9,en-US; q=0.8,en;q=0.7
content-length: 0
origin: http://localhost:8000
referer: http://localhost:8000/fr/
sec-fetch-dest: 空
sec-fetch-mode: cors
sec-fetch-site: 跨站点
用户代理： Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132移动版 Safari/537.36
x-client-data: CKW1yQEIkLbJAQiktskBCKmdygEIt6rKAQjLrsoBCNCvygEIvLDKAQiXtcoBCJu1ygEI7bXKAQiOusoBCOu7ygEI​​r73KAQ==

查询字符串参数

X-Goog-算法： GOOG4-RSA-SHA256
X-Goog-Credential： dev-storage@sublime-covid-264412.iam.gserviceaccount .com/20200317/auto/storage/goog4_request
X-Goog-日期： 20200317T105745Z
X-Goog-到期： 1800
X-goog-SignedHeaders：强>主机结果的的x goog签名：强> 076e32c738ea28ea3c1a3900d3f0b10e096120649a62911a5b165668045793006bef4b87c372306393db7adb5b35f6bb07e092e87a8ccf6fb7edfc98a74f7cc0558c520ba74b5dc3c1563426edc6f63a5db43c0a78298747fd5b6fbe7650e79ddf75b0cb05b3fb2690f34a5d1fc0e2bdaafa9b2ec6d4c452a23676e45acc0a9205a3fc79dceaf7958590353ac503c597574e53b514b4e44deb8e226f07a3272e0d9f60c55edefccb4ef5f0e45555b8f679260bcf1a15421035a1367001b5ace1a28b4d977ce08b29b51a796cc0faca4b4b84296a44876f3a0e7fa1c01667ad40363df2920967a69bc98c388c2713f1fecfcb4cf43d1f9ca36909ac8983eea437结果

Answer 1

好的。我解决了。我没有正确绑定文件，我正在发送一个空对象。它现在可以工作了，但是当我收到“非法调用错误”时，我不得不添加一行。
我必须添加processData: false,，它现在运行良好。

这里是代码；如果有帮助的话……

function ajaxSendToStorage(url, uuid, row){
var file = getFileById(uuid);
$.ajax({
    method: "PUT",
    contentType: file.type,
    processData: false,
    dataType: "xml",
    crossDomain: true,
    data: file,
    url: url,
    beforeSend: function (request){
        request.setRequestHeader("Content-Type", 'multipart/formdata; charset=UTF-8');
    },
    success: function(data) {
        storageLoadComplete(row)
    },
    complete: function() {
        var a = 1;
    },

});

}