使用签名 URL 和 dropzone (Vuejs) 上传到 Google 云存储答案

【问题标题】：Uploading to Google cloud storage using Signed URL and dropzone ( Vuejs )使用签名 URL 和 dropzone (Vuejs) 上传到 Google 云存储
【发布时间】：2019-04-18 21:28:27
【问题描述】：

我可以使用以下表单提交直接上传到谷歌云存储（在使用 Nodejs 获得签名 URL 之后）

<form action="https://<%=fields.bucket%>.storage.googleapis.com" method="post" enctype="multipart/form-data">
    <input type="hidden" name="key" value="<%=fields.key%>">
    <input type="hidden" name="bucket" value="<%=fields.bucket%>">
    <input type="hidden" name="GoogleAccessId" value="<%=fields.GoogleAccessId%>">
    <input type="hidden" name="policy" value="<%=fields.policy%>">
    <input type="hidden" name="signature" value="<%=fields.signature%>">
    <input type="hidden" name="Content-Type" value="<%=fields['Content-Type']%>">

    <input name="file" type="file">
    <input type="submit" onclick="myFunction(event)" value="Upload">
</form>

但是当使用以下方法使用 dropzone 时，我收到 400 错误。我成功获得了我的签名 URL，并且没有任何问题。问题在于 axios post 方法。

 uploadOptions: {
    url: "/",
    uploadMultiple: false,
    method: "PUT",
    parallelUploads: 1,
    headers: {
              "Content-Type": "multipart/form-data"
            },
    autoProcessQueue: false,
    autoDiscover: false,
    acceptedFiles: "image/*",
    maxFilesize: 5,
    maxFiles: 10,
    clickable: "#upload",
    addRemoveLinks: true,
    preventDuplicates: true,
    dictDuplicateFile: "Duplicate Files Cannot Be Uploaded",
    previewsContainer: ".dropzone-previews",
    dictDefaultMessage: "",
    thumbnailWidth: 200,
     accept: function(file, done) {
      var self = this;


      var FileSize = file.size;
      console.log(" In accept");

      k1Object.$axios
        .$get("my-board?operation=fileUpload&name=" + file.name)
        .then(function(gcmData) {
          let postData = gcmData[1];
          let actionURL =
            "https://" + postData.bucket + ".storage.googleapis.com";
          file.uploadURL = actionURL;
          k1Object.k1FormData = gcmData[1];
                    done();
          setTimeout(function() {
          self.processFile(file);
          }, 0)
        });


    }, 
     init: function() {
      var self = this;
      this.on("processing", function(file) {
        self.options.url = file.uploadURL;
        console.log("processing");
      });
      this.on("sending", function(file, xhr, formData) {
        console.log(k1Object.k1FormData.key)
        formData.append("key", k1Object.k1FormData.key);
        formData.append("bucket", k1Object.k1FormData.bucket);
        formData.append("GoogleAccessId", k1Object.k1FormData.GoogleAccessId);
        formData.append("policy", k1Object.k1FormData.policy);
        formData.append("signature", k1Object.k1FormData.signature);
        formData.append("Content-Type", k1Object.k1FormData["Content-Type"]);

         var _send = xhr.send;
        xhr.send = function() {
          _send.call(xhr, file);
        }; 
      });
    } 
  }

400 错误

<?xml version='1.0' encoding='UTF-8'?><Error><Code>MissingSecurityHeader</Code><Message>Your request was missing a required header.</Message><Details>Authorization</Details></Error>

我不确定它期待什么字段，我什至为我的存储桶设置了 CORS 规则。谢谢。

【问题讨论】：

嗨 Bujji，在这种情况下，GCM 代表什么是谷歌云消息传递？您还可以在最小的可重现 sn-p 中显示您正在使用的代码吗？谢谢！
谢谢@FrankNatividad。很抱歉不知道为什么要写 GCM，它是 GCS（谷歌云存储）。我在上面发布我的 axios 代码
感谢@MatrixTai 的评论。我正在使用 XML API 和 PKCS12 格式文件。我在某处读到 JSON API 不支持 signedURL 。如果我错了，请纠正我
@MatrixTai 现在看文档我完全糊涂了。看起来我必须使用 JWT token 遵循不同的方法。但不确定如何继续.. 我们是否有任何完整的示例客户端（在我的情况下是使用我的网站的用户）通过 Nodejs 请求 JWT 令牌以上传文件并使用它将文件上传到 GCS ..？跨度>
您正在使用 XML API Bujji，我想澄清一下。 Bujji 你说得对，JSON API 不支持签名 URL。审查代码。谢谢！

标签： vue.js google-cloud-storage axios dropzone.js vue-dropzone

【解决方案1】：

这篇文章帮助我解决了我的问题。基本上问题在于我的文件输入是表单的第一个子项，而不是最后。请参阅下面的 stackoverflow 链接以获取完整答案。

https://stackoverflow.com/a/17524079/274715.

我仍然不确定为什么将文件移到末尾对我有帮助。

【讨论】：