使用 gcs Upload Signed URL 的图像上传问题 |反应JS

Question

使用它来生成 GCS 上传签名 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 存储控制台和 download/preview 文件格式 Link URL
中预览文件时 PDF 没问题。但是 PNG 以某种方式损坏了，而不是 opening/previewing。我正在使用 Chrome '81.0.4044.138'

当我使用文本编辑器进一步预览 PNG 文件时，它在文件顶部包含一些 header 内容。 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 中添加了这些 header 字符串，不允许打开 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='

如果有人能帮助解决这个问题，那将会很有帮助。

Answer 1

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

cURL 之所以有效，是因为您直接发送的是文件而不是 FormData。

要解决此问题，请直接将文件传递给 ajax，如下所述：

const file = this.state.selectedFile;

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

使用 gcs Upload Signed URL 的图像上传问题 |反应JS

Image Upload Issue using gcs Upload Signed URL | React JS

javascript

xmlhttprequest

google-cloud-storage

gsutil

reactjs