如何使用AngularFire将文件上传到Firebase存储？

我看过并阅读了一堆视频和教程，但我得到了403错误。如何使用AngularFire将文件上传到Firebase存储？

我采用了棱角分明1.

首先，我做了一个角指令，因为ng-model不处理文件。我打电话给我的指令file-model：

app.directive('fileModel',['$parse', function ($parse){ 
    return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 
     element.bind('change', function() { 
     $parse(attrs.fileModel) 
     .assign(scope, element[0].files[0]) 
     scope.$apply(); 
     }) 
    } 
    } 
}]);

然后我用我的指令，在HTML模板：

<form ng-submit="uploadFile(file)"> 
     <input type="file" accept="txt" file-model="file" class="form-control"> 
     <button type="submit" class="btn btn-primary">Upload File</button> 
</form>

而且我做了一个控制器中的处理程序：

app.controller('myController', ['$scope', '$firebaseStorage', function($scope, $firebaseStorage) { 

    // Create a Firebase Storage reference 
    var storage = firebase.storage(); 
    var storageRef = storage.ref(); 
    var filesRef = storageRef.child('files'); 

    $scope.uploadFile = function(file) { 
    console.log("Let's upload a file!"); 
    console.log($scope.file); 
    var storageRef = firebase.storage().ref("files"); 
    $firebaseStorage(filesRef).$put($scope.file); 
    }; 

}]);

最后我设置Firebase存储规则为“公开”：

service firebase.storage { 
    match /b/myFirebaseProject.appspot.com/o { 
    match /{allPaths=**} { 
     allow read, write: if request.auth != null; 
    } 
    } 
}

运行所有这些，我可以选择我的测试文件，单击Upload File，并将文件加载到$scope。我的指示正在工作。但后来我得到一个错误信息：

POST https://firebasestorage.googleapis.com/v0/b/myFirebaseProject.appspot.com/o?name=files 403()

我试图创造火力地堡存储一个files文件夹，但我得到了同样的403错误。

谢谢！

来源

2017-02-14 Thomas David Kehoe

您发布的规则不公开，它们需要验证。相反，您想使用类似的东西：

service firebase.storage { 
    match /b/myFirebaseProject.appspot.com/o { 
    match /{allPaths=**} { 
     allow read, write; 
    } 
    } 
}

或在您的应用中使用Firebase身份验证。

来源

2017-02-15 17:09:59

谢谢，它现在正在工作！我复制并粘贴了Firebase提供的“公开”规则，但在剪切和粘贴时遇到了一些问题。 –

如何使用AngularFire将文件上传到Firebase存储？

回答

相关问题