使用gcs上载签名URL React JS的图像上载问题

Question

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

`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文件。

使用此卷曲请求,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%2f storage%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