当我将图像上传到 Firebase 存储并检索下载 url 并显示在 img 标签中但它显示多次

Question

我正在将图像上传到 firebase 存储，并再次将 URL 路径存储在 firebase 数据库中。但是，当我第一次上传时，它显示了一次，但是当我再次上传到图库并选择一个图像时，它显示了两次。如果我再次去画廊并选择它显示三遍的图像。请指导我如何解决这个问题。

<img id="image5e" src="img/upload.png" />
<input type='file' style="display:none;" name="photosubmit" id="photosubmit"/>

var app = {
    initialize: function() {
        app.bindEvents();    
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
         var uploadimg = document.getElementById("image5e");
         uploadimg.addEventListener("click",app.upload2gallery,false); 
    },         
    upload2gallery: function() {
     $("#photosubmit").click();

     var filebutton = document.getElementById("photosubmit");
     filebutton.addEventListener('change', function(e) {
         var file = e.target.files[0];    
         var storageRef = firebase.storage().ref('sweet_gift/' + file.name);    
         var task = storageRef.put(file);

         task.on('state_changed', function progress(snapshot) {
            var load = '<h1>Please Wait</h1>' + '<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><span>Loading ...</span>';
            $.mobile.loading('show', {
                text: 'Please wait...',
                textVisible: true,
                html: load,
                theme: 'z'
            });
        }, function error(err) {
        }, function complete() {
            $.mobile.loading('hide');

            var uni = localStorage.getItem("lunicode");
            var ref = firebase.database().ref(uni);
            var myname = storage.getItem("uname");
            var myid = storage.getItem("myid");
            var downloadURL = task.snapshot.downloadURL;
            ref.push({
                name: myname,
                imageurl: downloadURL,
                photoUrl: "/images/profile_placeholder.png",
                my_id: myid,
            });
        });
    });
},

$(document).on('pagebeforeshow', '#chatpage', function() {
    var uni = localStorage.getItem("lunicode");
    var ref = firebase.database().ref(uni);

    $("#images6").empty();

    ref.orderByChild("messages").on("child_added", function(snapshot) {
        $("#images6").append(movielist(snapshot.val()));
        var last_li = $(".cmsg li:last-child").offset().top;
        setTimeout(function() {
            $.mobile.silentScroll(last_li);
        }, 50);
        ActivityIndicator.hide();
    });
});

$(document).on('pagebeforehide', '#chatpage', function() {
    alert("going");
    var uni = localStorage.getItem("lunicode");
    var ref = firebase.database().ref(uni);
    $("#images6").empty();
    //ActivityIndicator.show();
    ref.orderByChild("messages").off("child_added");
    //ActivityIndicator.hide();
    $('#cmessage').val('');
});

Answer 1

根据 Firebase Google 支持工程师的建议，我将下面的事件侦听器放在 DeviceReady 函数中，它解决了我的问题。

谷歌建议如下

[您可以在 onDeviceReady 上注册文件更改处理程序吗？如果你把它放在upload2gallery中，每次点击图片都会调用upload2gallery，所以你又注册了文件更改事件，这就导致了你的问题。]

var filebutton = document.getElementById("photosubmit");
 filebutton.addEventListener('change', function(e) {
     //Get The File
     var file = e.target.files[0];
     var storageRef = firebase.storage().ref('sweet_gift/' + file.name);
     var task = storageRef.put(file);
     task.on('state_changed',
         function progress(snapshot) {

             var load = '<h1>Please Wait</h1>' +
                 '<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i> <span>Loading ...</span>';
             $.mobile.loading('show', {
                 text: 'Please wait...',
                 textVisible: true,
                 html: load,
                 theme: 'z'
             });
         },
         function error(err) {

         },
         function complete() {
             $.mobile.loading('hide');
             var uni = localStorage.getItem("lunicode");
             var ref = firebase.database().ref(uni);
             var myname = storage.getItem("uname");
             var myid = storage.getItem("myid");
             var downloadURL = task.snapshot.downloadURL;
             ref.push({
                 name: myname,
                 imageurl: downloadURL,
                 photoUrl: "/images/profile_placeholder.png",
                 my_id: myid,
             });
         }
     );

 });