使用 gcs 上传签名 URL 的图像上传问题 |反应 JS答案

【问题标题】：Image Upload Issue using gcs Upload Signed URL | React JS使用 gcs 上传签名 URL 的图像上传问题 |反应 JS
【发布时间】：2020-09-09 00:19:45
【问题描述】：

使用它来生成 GCS Upload 签名的 url v4 https://github.com/GoogleCloudPlatform/python-docs-samples/blob/master/storage/cloud-client/storage_generate_upload_signed_url_v4.py#L27

我已经使用上面提到的这个函数“generate_upload_signed_url_v4”生成了上传签名的url，我也尝试使用GSUTIL以及使用 gsutil signurl -m PUT service_account.json gs://<bucket>/file.png 我正在做一个演示，我需要将 PDF、PNG 上传到 GCS 存储桶。文件上传是文件。但是当我在 GCS 存储控制台中预览文件并下载/预览文件表单链接 URL
PDF很好。但是 PNG 不知何故损坏了，无法打开/预览。我正在使用 Chrome '81.0.4044.138'

当我使用文本编辑器进一步预览 PNG 文件时，它在文件顶部包含一些标题内容。 IE ------WebKitFormBoundarysZ3BDVaNOhqwENsp Content-Disposition: form-data; name="file"; filename="test.png" Content-Type: image/png 因此，如果我们从文件顶部删除它，文件将正常打开..

我创建了一个示例 React 项目，可以在这里访问

演示：https://github.com/qaisershehzad/upload-gcs

我正在使用此代码进行文件上传

` const url = "https://storage.googleapis.com//file.png.png?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gitlab-ci%.iam.gserviceaccount.com%2F20200521%2Fauto%2Fstorage %2Fgoog4_request&X-Goog-Date=20200521T175304Z&X-Goog-Expires=36000&X-Goog-SignedHeaders=content-type%3Bhost&X-Goog-Signature="

const data = new FormData()
data.append('file', this.state.selectedFile)

var xhr = new XMLHttpRequest();

xhr.open('PUT', url, true);
xhr.setRequestHeader("Content-type", "application/octet-stream");


xhr.onload = function (response) {
  console.log('on-load', response);
};

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {

    if (xhr.status === 200) {
      console.log("Status OK")

    } else {
      console.log("Status not 200")
    }
  }
};

xhr.onerror = function (response) {
  console.log("Response error", response)
};

xhr.upload.onprogress = function (evt) {
  // For uploads
  if (evt.lengthComputable) {
    var percentComplete = parseInt((evt.loaded / evt.total) * 100);
    console.log("progress", percentComplete)

  }
}
xhr.send(data);`

我也在 Android 上尝试过同样的事情并面临同样的问题。在顶部的 Png 中，添加了这些标题字符串，不允许打开 Png 文件。

使用此 CURL 请求可以正常上传 PNG。 curl -X PUT -H 'Content-Type: application/octet-stream' --upload-filen file.png 'https://storage.googleapis.com//file.png?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential= gitlab-ci%.iam.gserviceaccount.com%2F20200521%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20200521T175304Z&X-Goog-Expires=36000&X-Goog-SignedHeaders=content-type%3Bhost&X-Goog-Signature='

如果有人可以帮助解决此问题，将会很有帮助。

【问题讨论】：

如果你认为这个问题是在 GCS 端并且与你的特定 React JS 应用程序无关，你可以尝试在environment supported by App Engine 中重现它，如果可以的话，请创建一个Issue Tracker 对此进行进一步调查。
是的，在 android 中也发生了同样的事情。它将一些标题附加到图像文件中。但是使用 CURL (curl -X PUT) 它工作正常。所以无法理解发生了什么

标签： javascript reactjs xmlhttprequest google-cloud-storage gsutil

【解决方案1】：

实际上，您发送FormData 会导致问题，您会看到文件已上传，但当您检索文件时，其内容会有所不同，以防图像可能无法呈现图像。

cURL 之所以起作用，是因为你是直接发送文件而不是 FormData。

要解决这种情况，请直接将文件传递给 ajax，如下所述：

const file = this.state.selectedFile;

ajax.setRequestHeader('Content-Type', file.type);    
ajax.send(file); // direct file not FormData

【讨论】：