【问题标题】:Upload file to firebase with angular / angularjs使用 angular / angularjs 将文件上传到 firebase
【发布时间】:2017-08-15 19:54:36
【问题描述】:

我正在使用以下内容通过 angular / angularfire 将图像上传到我的 firebase 存储:

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

和js:

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

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");
// var storageRef = firebase.storage().ref("files");
$firebaseStorage(filesRef).$put($scope.file);
};

 }]);

问题是如果我之后再上传一张图片,它会替换之前上传的图片(我想这是由于文件名被视为“文件”,所以会自动替换它)

有没有办法避免这种情况?比如用文件名代替上传图片?

路径应该是怎样的?

非常感谢您的帮助

【问题讨论】:

  • 这段代码简直就是 javascript 地狱。 Stackoverflow“印度地狱”保险库就在这里

标签: angularjs firebase angularfire firebase-storage


【解决方案1】:
   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);
storageRef.child(file.name).put(file);
    storageRef.on('state_changed', function(snapshot) {
                var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;

            }, function() {
                //handle error
            }, function() {
           //url of storage file 
                var downloadURL = storageRef.snapshot.downloadURL;
                console.log(downloadURL)
                //you will get url of snapshot
            });
     };

 }]);

您可以使用文件名或时间戳。所以每次都是唯一的。

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

如果您遇到任何问题,请告诉我

【讨论】:

  • 您好 Ankit,感谢您的帮助,不幸的是它没有改变任何东西:(您还有其他建议吗?谢谢!
  • 我忘了添加 app.directive 这是它的一部分,不知道它是否会影响任何东西?
  • 你是否正在获取文件对象??如果是,那么它将起作用。你需要添加指令文件模型。你可以在 jsfiddle 中分享你的代码
  • 该文件正在作为图像正确上传到存储中是的,但是如果我上传了一个新图像,它将替换以前的图像而不是创建一个新图像。很快就会发一个小提琴
  • 您是否有机会使用 Skype 或聊天?
猜你喜欢
  • 2018-11-24
  • 2018-08-01
  • 2020-06-11
  • 1970-01-01
  • 1970-01-01
  • 2019-11-01
  • 2019-09-06
  • 2020-05-23
  • 1970-01-01
相关资源
最近更新 更多