【问题标题】:Uploading an image to Google Cloud storage from webpage从网页上传图片到谷歌云存储
【发布时间】:2016-04-12 23:25:11
【问题描述】:

我正在使用 Google 提供的文档here 尝试将图片从网页上传到 Google Cloud 存储。我认为存储已正确设置,并且我认为我得到了正确的值。

使用时,图像被识别,但由于某种原因它没有上传。我不确定是代码还是环境是如何设置的。此外,不会报告任何错误消息。我知道图像正在通过事件进入函数。

JavaScript 是...

        /**
         * Google Cloud Storage API request to insert an object into
         * your Google Cloud Storage bucket.
         */
        function insertObject(event) {
            try {
                //var MyFile = document.getElementById("take-picture").files;
                var fileData = event.target.files[0];
                //var fileData = document.getElementById("take-picture").files;
            } 
            catch(e) {
                //'Insert Object' selected from the API Commands select list
                //Display insert object button and then exit function
                //filePicker.style.display = 'block';
                return;
            }
          var boundary = '-------314159265358979323846';
          var delimiter = "\r\n--" + boundary + "\r\n";
          var close_delim = "\r\n--" + boundary + "--";

            var reader = new FileReader();
            reader.readAsBinaryString(fileData);
            reader.onload = function(e) {
                var contentType = fileData.type || 'application/octet-stream';
                var metadata = {
                    'name': fileData.name,
                    'mimeType': contentType
                };

                var base64Data = btoa(reader.result);
                var multipartRequestBody =
                  delimiter +
                  'Content-Type: application/json\r\n\r\n' +
                  JSON.stringify(metadata) +
                  delimiter +
                  'Content-Type: ' + contentType + '\r\n' +
                  'Content-Transfer-Encoding: base64\r\n' +
                  '\r\n' +
                  base64Data +
                  close_delim;

                //Note: gapi.client.storage.objects.insert() can only insert
                //small objects (under 64k) so to support larger file sizes
                //we're using the generic HTTP request method gapi.client.request()
                var request = gapi.client.request({
                    'path': '/upload/storage/' + API_VERSION + '/b/' + BUCKET + '/o',
                    'method': 'POST',
                    'params': {'uploadType': 'multipart'},
                    'headers': {
                        'Content-Type': 'multipart/mixed; boundary="' + boundary + '"'
                    },
                    'body': multipartRequestBody});
                //Remove the current API result entry in the main-content div
                //listChildren = document.getElementById('main-content').childNodes;
                //if (listChildren.length > 1) {
                //    listChildren[1].parentNode.removeChild(listChildren[1]);
                //} 

                //look at http://stackoverflow.com/questions/30317797/uploading-additional-metadata-as-part-of-file-upload-request-to-google-cloud-sto

                try{
                    //Execute the insert object request
                    executeRequest(request, 'insertObject');
                    //Store the name of the inserted object 
                    object = fileData.name;         
                }
                catch(e) {
                    alert('An error has occurred: ' + e.message);
                }
            }
        }

【问题讨论】:

  • 您是在client.request(...) 的结果上调用.then() 还是.catch()? AFAIK,如果您不这样做,GAPI 客户端将不会实际执行请求。

标签: javascript google-app-engine google-cloud-storage


【解决方案1】:

不太清楚问题出在哪里。

但在我的工作代码中,我正在使用

var metadata = {
    'title': fileData.fileName || fileData.name,
    'parents': [{
    "kind": "drive#fileLink",
            "id": folderId
    }],
    'mimeType': contentType
};

因此您的代码可能会缺少文件夹的 ID

API 请求:

var request = gapi.client.request({
        'path': '/upload/drive/v2/files',
        'method': 'POST',
        'params': {'uploadType': 'multipart'},
        'headers': {
          'Content-Type': 'multipart/mixed; boundary="' + boundary + '"'
        },
        'body': multipartRequestBody
});

财政年度。

【讨论】:

  • 'path': '/upload/storage/' + API_VERSION + '/b/' + BUCKET + '/o',包含有关我的文件夹的变量,即 API_VERSION 和 BUCKET。我认为这些是正确的(我知道存储桶是正确的,并且存储桶中已经有一个图像似乎具有我现在正在使用的 API_version v1_Internal - 没有尝试过 v2,但可能会试一试)。目前我认为这与公共 API 访问有关。
猜你喜欢
  • 2015-03-01
  • 2022-10-30
  • 1970-01-01
  • 1970-01-01
  • 2023-03-26
  • 2018-10-02
  • 2020-11-15
  • 2021-06-09
  • 1970-01-01
相关资源
最近更新 更多