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

Posted 2023-03-29

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

【英文标题】：upload file through signed url to google cloud storage with ajax

【发布时间】：2020-06-28 11:23:40

【问题描述】：

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

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

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

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-Tracealt-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 GMTetag： "d41d8cd98f00b204e9800998ecf8427e"服务器： UploadServer状态： 200x-goog-generation： 1584442666113578x -goog-hash： crc32c=AAAAAA==x-goog-hash： md5=1B2M2Y8AsgTpgAmY7PhCfg==x-goog-metageneration： 1x-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.01accept-encoding: gzip, deflate, braccept-language: fr-FR,fr;q=0.9,en-US; q=0.8,en;q=0.7content-length: 0origin: http://localhost:8000referer: http://localhost:8000/fr/sec-fetch-dest: 空sec-fetch-mode: corssec-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.36x-client-data: CKW1yQEIkLbJAQiktskBCKmdygEIt6rKAQjLrsoBCNCvygEIvLDKAQiXtcoBCJu1ygEI7bXKAQiOusoBCOu7ygEI​​r73KAQ==

查询字符串参数

X-Goog-算法： GOOG4-RSA-SHA256X-Goog-Credential： [e-mail] .com/20200317/auto/storage/goog4_requestX-Goog-日期： 20200317T105745ZX-Goog-到期： 1800 X-goog-SignedHeaders：强>主机结果的的x goog签名：强> 076e32c738ea28ea3c1a3900d3f0b10e096120649a62911a5b165668045793006bef4b87c372306393db7adb5b35f6bb07e092e87a8ccf6fb7edfc98a74f7cc0558c520ba74b5dc3c1563426edc6f63a5db43c0a78298747fd5b6fbe7650e79ddf75b0cb05b3fb2690f34a5d1fc0e2bdaafa9b2ec6d4c452a23676e45acc0a9205a3fc79dceaf7958590353ac503c597574e53b514b4e44deb8e226f07a3272e0d9f60c55edefccb4ef5f0e45555b8f679260bcf1a15421035a1367001b5ace1a28b4d977ce08b29b51a796cc0faca4b4b84296a44876f3a0e7fa1c01667ad40363df2920967a69bc98c388c2713f1fecfcb4cf43d1f9ca36909ac8983eea437结果

【参考方案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;
    ,

);

【讨论】：

它只是上传文件，但视频不流