Angularjs 使用签名URL将图像上传到google云存储的方式

我正在尝试创建一个meanjs框架应用程序，用户可以将图像文件上传到谷歌云存储上的一个私有存储桶

我希望采用这样的方法，即节点js服务器向客户端网页提供身份验证信息，以便客户端网页可以直接将图像发送到GCS，而无需使用签名URL通过我的节点js web服务器

在谷歌上搜索，我发现了一个类似的例子

我尝试了示例应用程序，它的工作原理与广告一样-我可以使用我的凭据密钥文件写入我在私人回购中创建的bucket。-太好了

唯一的问题是，在这个示例应用程序中，作者使用ejs文件作为前端，在和ejs文件中使用某种多部分表单数据。我想让所有的前端都有角度，但我不知道怎么做

下面是github站点中的前端表单片段，我知道它是有效的，我想在angular中重新实现它（不确定如何实现）：

这里也是：

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_();
    };

当我点击upload me（上传我）按钮时，一个文件以正确的名称存储在我的存储桶中，因此我知道我的密钥很好，cors也很好，但我在google开发者控制台上看到，文件大小只有13字节，我无法查看图像文件。如果我点击链接，它只会显示“[对象文件]”

我想我没有正确格式化我在谷歌上发布的表单。可能是fField元素不正确

正如我所说，githib示例应用程序运行良好，但我对angular/javascript了解不够，无法理解如何在angular控制器中转换形式ejs以发送js中的等价物

---

有什么建议吗？非常感谢。

你能让它工作吗？我对此也很感兴趣。

 <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>

$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_();
    };