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

Question

我观看并阅读了很多视频和教程，但出现 403 错误。

我正在使用 Angular 1.

首先，我制定了一个 Angular 指令，因为 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 存储规则设置为 "public":

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

运行这一切，我可以select我的测试文件，点击Upload File，文件加载到$scope。我的指令正在工作。但随后我收到一条错误消息：

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

我尝试在 Firebase 存储中创建一个 files 文件夹，但我遇到了同样的 403 错误。

谢谢！

Answer 1

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

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

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

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

How to upload files with AngularFire to Firebase Storage?

javascript

angularjs

firebase

angularfire

firebase-storage