當我將圖像上傳到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支持工程師Sugestion的要求，我將波紋管事件列表器放入DeviceReady函數中，它可以解決此問題。

Google Sugestion波紋管

[您可以在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,
             });
         }
     );

 });