使用javascript将请求批量上传到Google云端存储

Question

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

我有一个输入文件,用户可以选择多个文件,并上传'上传'btn上传到GCS,如下所示:

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

当用户选择图像时,'loadFiles'功能创建批量请求的"主体".

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示例(使用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个错误的请求消息.这个请求有什么问题？

Answer 1

您发送的 POST 请求为 -

\n\n

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

\n\n

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

\n\n

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

\n\n

\n
1. /upload URI，用于媒体。上传端点的格式是带有\xe2\x80\x9c/upload\xe2\x80\x9d前缀的标准资源 URI。传输媒体数据本身时使用此 URI。例子：POST /upload/storage/v1beta2/b/myBucket/o。
\n
2. 元数据的标准资源 URI 。如果资源包含任何数据字段，这些字段将用于存储描述上传文件的元数据。您可以在创建或更新元数据值时使用此 URI。示例：POST /storage/v1beta2/b/myBucket/o。
\n

\n\n

因此，您需要将 POST 请求发送为 -

\n\n

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

\n\n

尝试通过省略https://www.googleapis.comurl 中的前缀来发送 POST 请求。

\n\n

谢谢

\n\n

尼拉姆·夏尔马

\n