使用 javascript 将请求批量上传到 Google Cloud Storage

2022-01-25 00:00:00 google-cloud-storage batch-file upload javascript httprequest

我正在尝试使用 javascript 在批量请求中将多张图片上传到谷歌云存储.我正在使用 https://developers.google.com/storage/docs/json_api/v1/how-tos/batch#example 作为参考.

I'm trying to upload multiple images to google cloud storage in a batch request using javascript. I'm using https://developers.google.com/storage/docs/json_api/v1/how-tos/batch#example as reference.

我有一个输入文件，用户可以在其中选择多个文件，还有一个上传"btn 可以像这样上传到 GCS:

I have an input file where the user can select multiple files, and an 'upload' btn to upload to GCS like so:

<input type="file" name="fileName" id="fileInput" multiple="multiple" onchange="javascript: loadFiles()"/> 
<input type="button" name="upload-btn" id="upload" value="Upload"/>

当用户选择图像时，loadFiles"函数会创建批处理请求的正文".

When the user selects the images, the 'loadFiles' function creates the 'body' of the batch request.

var tok = <token>;
var boundary = "---======= foo_bar_baz12034245623562346 ===";
var consolidated_request = '';

function loadFiles()
{
        var input = $('fileInput');
        for (var i = 0; i < input.files.length; i++) 
        {
            var f = input.files[i];

            var reader = new FileReader();
            reader.readAsBinaryString(f);

            reader.onload = function(e){

                var fbinary = e.target.result;
                var fsize = f.size;

                var url = 'https://www.googleapis.com/upload/storage/v1beta2/b/<mybucket>/o?';
                url += 'uploadType=media&name='+f.name+ ' HTTP/1.1';

                var req = boundary + 
                '
Content-Type: application/http'+
                '
Content-Transfer-Encoding: binary'+
                '

POST ' + url +
                '
Content-Type: image/jpeg'+
                '
Content-Length: '+ f.size +
                '
Authorization: '+tok+
                '

'+ fbinary + '
';

                consolidated_request += req;
            };

        }
}

当用户点击上传时:

$('upload').onclick = function(e){

    var xhr = new XMLHttpRequest();
    xhr.open("POST", 'https://www.googleapis.com/batch', true);
    xhr.setRequestHeader("Authorization", tok);
    xhr.setRequestHeader("Content-Type", "multipart/mixed;boundary=" + boundary);
    xhr.send(consolidated_request);
 };

这是生成的 POST 示例(使用 firebug):

Here is a sample of the POST generated (using firebug):

标题:

Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Authorization   Bearer ya29.AHES6ZQgu6gFurD6y7Bo2Mao1RNCFwyqNZcwvgDZ82RXIbQ4
Content-Length  159866
Content-Type    multipart/mixed; charset=UTF-8;boundary=---======= foo_bar_baz12034245623562346 ===
Host    www.googleapis.com

主体:

 --======= foo_bar_baz12034245623562346 === 
Content-Type: application/http 
Content-Transfer-Encoding: binary 

POST https://www.googleapis.com/upload/storage/v1beta2/b/<mybucket>/o?uploadType=media&name=myimage.jpg HTTP/1.1 
Content-Type: image/jpeg 
Content-Length: 69436 
Authorization: Bearer ya29.AHES6ZQgu6gFurD6y7Bo2Mao1RNCFwyqNZcwvgDZ82RXIbQ4 

ÿØÿà�JFIF���d�d��ÿì�Ducky�����<��ÿî�Adobe�dÀ���ÿÛ�� 
...

问题是没有响应，因为我收到 400 bad request msg.这个请求有什么问题?

The problem is that there is no response because I get 400 bad request msg. What is wrong with that request?

推荐答案

你正在发送 POST 请求 -

You are sending POST request as -

POST https://www.googleapis.com/upload/storage/v1beta2/b/<mybucket>/o?uploadType=media&name=myimage.jpg HTTP/1.1

如 使用 POST 请求上传对象中所述-

要上传媒体，您需要使用特殊的 URI.支持媒体上传的 POST 方法有两个 URI 端点:

To upload media, you use a special URI. POST methods support media uploads have two URI endpoints:

  1. /upload URI，用于媒体.上传端点的格式是带有 /upload" 前缀的标准资源 URI.传输媒体数据本身时使用此 URI.示例:POST/upload/storage/v1beta2/b/myBucket/o.
  2. 标准资源 URI，用于元数据.如果资源包含任何数据字段，则这些字段用于存储描述上传文件的元数据.您可以在创建或更新元数据值时使用此 URI.示例:POST/storage/v1beta2/b/myBucket/o.
  1. The /upload URI, for the media. The format of the upload endpoint is the standard resource URI with an "/upload" prefix. Use this URI when transferring the media data itself. Example: POST /upload/storage/v1beta2/b/myBucket/o.
  2. The standard resource URI, for the metadata. If the resource contains any data fields, those fields are used to store metadata describing the uploaded file. You can use this URI when creating or updating metadata values. Example: POST /storage/v1beta2/b/myBucket/o.

所以你需要发送 POST 请求为 -

So you need to send POST request as -

POST/upload/storage/v1beta2/b/myBucket/o?uploadType=media&name=myimage.jpg HTTP/1.1

尝试通过在 url 中省略前缀 https://www.googleapis.com 来发送 POST 请求.

Try sending POST request by omitting prefix https://www.googleapis.com from url.

谢谢

尼拉姆·夏尔马

相关文章