javascript - 如何使用 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>

我在 Controller 中创建了一个处理程序:

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

运行所有这些，我可以选择我的测试文件，单击上传文件，然后文件加载到$scope中。我的指令正在发挥作用。但随后我收到一条错误消息:

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

我尝试在 Firebase Storage 中创建 files 文件夹，但遇到了相同的 403 错误。

谢谢!

Answer 1

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

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

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