有angular度的js方式上传图像到谷歌云存储使用签名的url

我试图创build一个meanjs框架的应用程序,用户可以上传图像文件到谷歌云存储上的私人存储桶。

我想采取由js服务器提供身份validation信息到客户端网页的方法,这样客户端网页就可以直接将图像发送到GCS,而不需要使用签名的URL通过我的节点和networking服务器。

谷歌search,我在这里find了一个类似的例子

https://github.com/sfarthin/nodejs-google-cloud-storage

我尝试了示例应用程序,它的工作原理如下:我可以使用我的凭据密钥文件写入我在我的私人回购中创build的存储桶。 – 完美。

唯一的问题是在这个示例应用程序中,作者使用ejs文件作为前端使用某种多部分表单数据和ejs文件。 我想要所有的前端angular度,但我不知道如何做到这一点。

这是从github网站的前端forms,我知道的作品,我想重新实现angular(不知道如何做到这一点)的片段:

<h4>Choose a file, click upload, then after the upload finishes you may view it by clicking the link below. A file will be uploaded with the key "<%=fields.key%>".</h4> <form action="https://<%=fields.bucket%>.storage.googleapis.com" method="post" enctype="multipart/form-data"> <input type="hidden" name="key" value="<%=fields.key%>"> <input type="hidden" name="bucket" value="<%=fields.bucket%>"> <input type="hidden" name="GoogleAccessId" value="<%=fields.GoogleAccessId%>"> <input type="hidden" name="policy" value="<%=fields.policy%>"> <input type="hidden" name="signature" value="<%=fields.signature%>"> <input type="hidden" name="Content-Type" value="<%=fields['Content-Type']%>"> <input name="file" type="file"> <input type="submit" value="Upload"> </form> <br /> <a href="https://<%=fields.bucket%>.storage.googleapis.com/<%=fields.key%>" target="_new">View https://<%=fields.bucket%>.storage.googleapis.com/<%=fields.key%></a> 

到目前为止,我创build了一个angular度客户端视图如下:

  <section data-ng-controller="inventoryPhotoMgrController" data-ng-init="findOne()"> <div class="page-header"> <h1 data-ng-bind="inventoryItem.itemTitle">{{inventoryItem.itemTitle}}</h1> <h2>Inventory Item Photos</h2> </div> <h4>Main Photo:</h4> <input type="file" file-model="myFile"/> <button ng-click="uploadFile()">upload me</button> 

这里是我的angular度控制器上的重要部分:

 $scope.uploadFile = function(){ var file = $scope.myFile; console.log('file is '+file.name); console.dir(file); var storageImageName=$scope.inventoryItem.itemNumber+'-'+file.name; console.log('storageImageName='+storageImageName); // get the key authorization data from node server $http.get('/inventoryStore/'+storageImageName) .success(function (response) { var fields= response; console.log('fields='); console.dir(fields); $scope.storePhoto(fields,file); }).error(function (response) { $scope.error = response.message; }); 

而且在这里:

 enter code $scope.storePhoto=function(fields,file){ var url='https://'+fields.bucket+'.storage.googleapis.com'; var form = document.createElement('form'); form.setAttribute('method', 'POST'); form.setAttribute('action', url); form.setAttribute('enctype', 'multipart/form-data'); form._submit_function_ = form.submit; var keyField = document.createElement('input'); keyField.setAttribute('type', 'hidden'); keyField.setAttribute('name', 'key'); keyField.setAttribute('value', fields.key); form.appendChild(keyField); var bucketField = document.createElement('input'); bucketField.setAttribute('type', 'hidden'); bucketField.setAttribute('name', 'bucket'); bucketField.setAttribute('value', fields.bucket); form.appendChild(bucketField); var gaidField = document.createElement('input'); gaidField.setAttribute('type', 'hidden'); gaidField.setAttribute('name', 'GoogleAccessId'); gaidField.setAttribute('value', fields.GoogleAccessId); form.appendChild(gaidField); var polField = document.createElement('input'); polField.setAttribute('type', 'hidden'); polField.setAttribute('name', 'policy'); polField.setAttribute('value', fields.policy); form.appendChild(polField); var sigField = document.createElement('input'); sigField.setAttribute('type', 'hidden'); sigField.setAttribute('name', 'signature'); sigField.setAttribute('value', fields.signature); form.appendChild(sigField); var ctField = document.createElement('input'); ctField.setAttribute('type', 'hidden'); ctField.setAttribute('name', 'Content-Type'); ctField.setAttribute('value', fields['Content-Type']); form.appendChild(ctField); var fField = document.createElement('input'); fField.setAttribute('name', 'file'); fField.setAttribute('value', file); form.appendChild(fField); form._submit_function_(); }; 

当我点击上传button,一个文件被存储在我的桶中,正确的名称,所以我知道我的密钥是好的,Cors是好的,但我看到在谷歌开发者控制台,大小只有13个字节,我不能查看图像文件。 如果我点击链接,它只是说'[对象文件]'

我想我没有正确格式化我的表单发送到谷歌。 也许fField元素是不正确的。

就像我说的,githib示例应用程序工作正常,但是我不太了解angular / javascript来理解如何将转换formsejs发送到angular度控制器中的js中的等价物。

有什么build议? 首先十分感谢。