Question

我是angularjs的新手。我试图使用ng-change来调用函数。当我添加图片时，ng-change功能没有调用，如果我在Firebase中上传图片，我怎样才能再次获得该图片。

我想要的是首先我将图像上传到firebase存储桶然后我想使用src标记在html中显示该图像

这是我的HTML代码：

<input name="menuPic" accept="image/png, image/gif, image/jpeg" type="file" ng-model="menuImage" ng-change="uploadImage(menuImage)">

<button ng-click="getImage()">getImage</button>

这是我的js代码：

$scope.uploadImage=function(menuImage){
    console.log(menuImage); \\here image file is not coming
    console.log(menuImage.files); \\here image file is not coming

    firebase.storage().ref("Rest/"+menuImage.filename).put(menuImage.file);
}

$scope.getImage=function(){
    firebase.storage().ref("Rest/").once('value',function(snap){
        console.log(snap); \\ when iam trying to get the image it showing error like(.once is not a function)
    })
}

提前致谢

Answer 1

试试这个我的示例代码

HTML

<img id="profileImage" src="profileImage" style="max-width:200px; max-height:200px;">
<input type="file" accept="image/*" capture="camera" id="file-upload"> </div>

用js

进行角度调整

var refImg = new Firebase("https://YOURURL.firebaseio.com/images/" + $rootScope.authData.uid);
var ImgObj = $firebaseObject(refImg);


function saveimage(e1) {
    var filename = e1.target.files[0];
    var fr = new FileReader();
    fr.onload = function (res) {
        $scope.image = res.target.result;
        ImgObj.image = res.target.result;
        ImgObj.$save().then(function (val) {
        }, function (error) {
            console.log("ERROR", error);
        })
    };
    fr.readAsDataURL(filename);
}

document.getElementById("file-upload").addEventListener('change', saveimage, false);

this.loadimage = function () {
    ImgObj.$loaded().then(function (obj) {
        $scope.profileImage = obj.image;
        console.log("loaded", $scope.profileImage);
        document.getElementById("profileImage").src = obj.image;
    }, function (error) {
        console.log("ERROR", error);
    });
};
this.loadimage();

Answer 2

您似乎在混合使用Firebase API。 firebase.storage().ref("Rest/")正在使用Firebase存储API。但是.once('value',function(snap){仅适用于Firebase数据库API。这两个（存储和数据库）是Firebase的独立功能，您不能简单地从一个API中获取API并在另一个上使用它。

如果您将图片上传到Firebase存储，则可以在上传完成时收到通知。如果你monitor the upload progress，你可以做一些事情来回应它的完成。但是，对上传的监控仅适用于开始上传的设备。

var imgRef = firebase.storage().ref("Rest/"+menuImage.filename);
var uploadTask = imgRef.put(menuImage.file);
uploadTask.on('state_changed', function(snapshot){
  // Observe state change events such as progress, pause, and resume
  // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
  var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  console.log('Upload is ' + progress + '% done');
  switch (snapshot.state) {
    case firebase.storage.TaskState.PAUSED: // or 'paused'
      console.log('Upload is paused');
      break;
    case firebase.storage.TaskState.RUNNING: // or 'running'
      console.log('Upload is running');
      break;
  }
}, function(error) {
  // Handle unsuccessful uploads
}, function() {
  // Handle successful uploads on complete
  // For instance, get the download URL: https://firebasestorage.googleapis.com/...
  var downloadURL = uploadTask.snapshot.downloadURL;
});

上面的大部分代码都是从我链接的文档中复制的，所以我建议你仔细阅读。

Answer 3

Angular不支持on-change上的type=file。请参阅this问题和解答。

ng-change函数不会在更改时触发（添加图像时）+如何从firebase存储桶中获取图像URL

3 个答案: