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

Question

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

• 我已使用gsutil在我的存储桶上设置了 CORS 参数
• 浏览器向 Django 后端发送 ajax 请求以获取签名的 url
• Django 后端向GCS发出请求以创建签名 URL
• 签名的 URL 将发送回浏览器。
• 我尝试使用ajax中的签名网址将视频文件（内容类型=“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
    },
  });
}

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

一般的

请求网址： 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-Sign edHeaders=主机&x -goog-signature=076e32c738ea28ea3c1a3900d3f0b10e096120649a62911a5b165668045793006bef4b87c372306393db7adb5b35f6bb07e092e87a8ccf6fb7edfc98a74f7cc0558c520ba74b5dc3c1563426edc6f63a5db43c0a78298747fd5b6fbe7650e79ddf75b0cb05b3fb2690f34a5d1fc0e2bdaafa9b2ec6d4c452a23676e45acc0a9205a3fc79dceaf7958590353ac503c597574e53b514b4e44deb8e226f07a3272876760c55edefccb4ef5f0e45555b8f679260bcf1a15421035a1367001b5ace1a28b4d977ce08b29b51a796cc0faca4b4b84296a44876f3a0e7fa1c01667ad40363df2920967a69bc98c388c2713f1fecfcb4cf43d1f9ca36909ac8983eee3212
Request Method: PUT
Status Code: 200
Remote Address: [2a00:1450:4007:80c::2010]:443
Referrer Policy: no-referrer-when-downgrade

响应头

访问控制允许来源： *
访问控制公开标头： *、内容长度、内容类型、日期、服务器、传输编码、X-GUploader-UploadID、X-Google-Trace
alt-svc：快速=“：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 -散列： md5=1B2M2Y8AsgTpgAmY7PhCfg==
x-goog-meta Generation： 1
x-goog-stored-content-encoding：身份
x-goog-stored-content-length： 0
x-guploader-uploadid： AEnB2UpD_E6yxot73qDMfKu6kM34PPiK7kEM4VytfmZfY6q70dJxBz Ws_3y8Lkimwg_ztFTK0Vuoz-V0G_wZlKqah1cax9kJrQ

请求标头

：权威： test-dev-flowker.storage.googleapis.com
：方法： PUT
：路径： /media/uploads/FR/flowker_e6938cf0/2020/3/full_9140a387-0595-4ea7-9fdd-f5d525e57515.mp4 ?X-Goog-算法=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=180 0&X-谷歌- SignedHeaders=host&x-goog-signature=076e32c738ea28ea3c1a3900d3f0b10e096120649a62911a5b165668045793006bef4b87c372306393db7adb5b35f6bb07e092e87a8ccf6fb7edfc98a74f7cc0558c520ba74b5dc3c1563426edc6f63a5db43c0a78298747fd5b6fbe7650e79ddf75b0cb05b3fb2690f34a5d1fc0e2bdaafa9b2ec6d4c452a23676e45acc0a9205a3fc79dceaf7958590353ac503c597574e53b514b4e44deb8e226f07a3272e0d9f60c55edefccb4ef5f0e45555b8f679260bcf1a15421035a1367001b5ace1a28b4d977ce08b29b51a796cc0faca4b4b84296a44876f3a0e7fa1c01667ad40363df2920967a69bc98c388c2713f1fecfcb4cf43d1f9ca36909ac8983eea437
:scheme: https
accept: application/xml, text/xml, / ; q=0.01
接受编码： gzip、deflate、br
接受语言： fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7
内容长度： 0
来源： http://本地主机：8000
引用： 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，如 Gecko）Chrome/80.0.3987.132 Mobile Safari/537.36
x-客户端数据： CKW1yQEIkLbJAQiktskBCKmdygEIt6rKAQjLrsoBCNCvygEIvLDKAQiXtcoBCJu1ygEI7bXKAQiOusoB COu7ygEI​​r73KAQ==

查询字符串参数

X-Goog-算法： GOOG4-RSA-SHA256
X-Goog-凭证： dev-storage@sublime-covid-264412.iam.gserviceaccount.com/20200317/auto/storage/goog4_request
X-Goog-日期： 20200317T105745Z
X-Goog -Expires: 1800
X-Goog-SignedHeaders: host
x-goog-signature: 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;
    },

});

}