批量上传请求，谷歌云存储使用JavaScript [英] Batch upload requests to Google Cloud Storage using javascript

问题描述

我想上传多张图片到谷歌云存储中使用JavaScript批请求。我使用<一个href=\"https://developers.google.com/storage/docs/json_api/v1/how-tos/batch#example\">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 + 
                '\r\nContent-Type: application/http'+
                '\r\nContent-Transfer-Encoding: binary'+
                '\r\n\nPOST ' + url +
                '\r\nContent-Type: image/jpeg'+
                '\r\nContent-Length: '+ f.size +
                '\r\nAuthorization: '+tok+
                '\r\n\n'+ fbinary + '\n';

                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的示例（使用萤火虫）：

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错误的请求味精。什么是错的请求？

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请求 上传对象说明 -

As stated in upload objects with POST request -

要上传的媒体，你使用一个特殊的URI。 POST方法支持媒体上载有两个URI端点：

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

1. 的/上传URI ，对于媒体。上传端点的格式，是标准的资源URI与 preFIX。传输媒体数据本身时，使用该URI。例如： POST /上传/存储/ v1beta2 / B / myBucket / O


2. 标准资源URI ，为元数据。如果资源包含任何数据字段，这些字段被用来存储元数据描述上传的文件。创建或更新元数据值时，可以使用这个URI。示例：POST /存储/ 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

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

尝试通过 https://www.googleapis.com 从URL省略preFIX发送POST请求。

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

感谢

尼拉姆夏尔马

这篇关于批量上传请求，谷歌云存储使用JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！