【问题标题】:Trying to upload files from a webpage to Google Cloud Storage尝试将网页中的文件上传到 Google Cloud Storage
【发布时间】:2016-01-13 09:48:03
【问题描述】:

我有一个网站(在 asp.net 中),我希望用户通过该网站将照片上传到 Google Cloud Storage 存储桶。如有必要,可以通过 Google 对进行上传的用户进行身份验证(但如果他们不这样做,我更愿意 - 该网站已被用户名/密码/验证码锁定)。

稍微不相关 - 存储桶中的照片必须对所有人可见,只要他们有链接(我们的一些客户的 IT 部门拒绝允许他们使用 Google 帐户,我们无法更改他们的想法)。我希望在上传照片时理想地返回链接。

我有以下 Javascript 代码,我认为应该可以使用(基本上取自 here):

<script type="text/javascript" src="https://apis.google.com/js/client:plusone.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="https://apis.google.com/js/client.js"></script>
    <script type="text/javascript">

var PROJECT = 'MY_PROJECT';
var clientId = 'MY_CLIENT_ID_ENDING_IN_apps.googleusercontent.com';
var apiKey = 'MY_API_KEY';
var scopes = 'https://www.googleapis.com/auth/devstorage.read_write';
//quick question - I've got a photo in the bucket already, and its
//URL points to a v1_internal folder. Would that mean that the API
//version is v1_internal?
var API_VERSION = 'v1';
var BUCKET = 'MY_BUCKET';
var object = "";
//question - when using a specific group, should this read group-blahblah
//or, for instance, owners-blahblah
//or even group-owners-blahblah?
var GROUP = 'group-MY_LONG_GROUP_ID';
//stuck on these next few ones
var ENTITY = 'group-Owners';
var ROLE = 'OWNER';
var ROLE_OBJECT = 'OWNER';

function insertObject(event) {
            try {
                var fileData = event.target.files[0];
            } 
            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);
                }
            }
        }

</script>

目前,我可以执行该功能。该文件最终在函数中(我已经能够在 fileData.name 上调用警报)。但是,它并没有最终进入存储桶,也没有出现错误消息。

这段代码看起来没问题,还是存储桶的设置方式有问题?我是否使用了正确的值(或者我的格式是否正确)?

【问题讨论】:

    标签: javascript asp.net google-app-engine amazon-s3 google-cloud-storage


    【解决方案1】:

    排序。对于那些尝试使用此代码并且像我一样没有费心阅读全部内容的人,Google 正在使用“授权”按钮。基本上,他们提供的示例代码使您能够或多或少地“附加”文件,然后是另一个执行实际上传的按钮。我自己没见过。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-12-23
      • 1970-01-01
      • 2019-06-04
      • 1970-01-01
      • 2018-10-31
      • 2021-03-19
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多