Firebase 实时数据库使用 JavaScript 发布旧图像答案

【问题标题】：Firebase real-time database posting over old images with JavaScriptFirebase 实时数据库使用 JavaScript 发布旧图像
【发布时间】：2018-05-26 05:35:10
【问题描述】：

我正在尝试制作一个简单的网页来玩 Firebase。我目前正在处理用户上传他们的照片并将它们存储以及在数据库中对它们的引用。我有一个工作版本，唯一的问题是如果多个用户同时打开该页面，则只有最近的帖子会持续。我想使用实时功能来克服这个问题并提出了这个问题。

var postRef = firebase.database().ref('variables/postNumber');
postRef.on('value',function(snapshot) {
    var postName = snapshot.val();
    var uploader = document.getElementById('uploader');
    var filebutton = document.getElementById('filebutton');

    // get file

    filebutton.addEventListener('change', function(e) {
        var file = e.target.files[0];
        var ext = file.name.split('.').pop();;
        console.log(postName);
        console.log(ext);
        //create a storage ref
        var storageRef = firebase.storage().ref('posts/' + postName + "." + ext);

        var task = storageRef.put(file);
        publishPost(postName, ext);
        function publishPost(postName, ext) {
            firebase.database().ref('posts/' + postName).set({
                postID: postName,
                postDate: Date(),
                fileType : ext
            });
            firebase.database().ref('variables/').set({
                postNumber: postName + 1
            });
        }
        task.on('state_changed',

            function progress(snapshot){
                var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) *100;
                uploader.value = percentage;
            },
            function error(err){

            },
            function complete(postName, ext){
                uploader.value = 0;
                window.alert('Your meme Uploaded correctly');

            },
        );
    });
});

这很好用，总是更新 postName 变量，除非有新用户发帖，它会将每个帖子重写为新帖子。例如，如果用户 A 在用户 B 已经在页面上时发布了一张图片，那么当用户 B 发布时，他的帖子将在第一次上传两次覆盖用户 A 的帖子。任何人都可以解释为什么会这样吗？我正在考虑移动侦听器以启动该功能，但不确定这是否是正确的选择。

【问题讨论】：

标签： javascript firebase firebase-realtime-database

【解决方案1】：

每次检测到新值时，都会将事件侦听器附加到按钮上。这意味着filebutton 上的change 事件侦听器根本不能在观察者中。

工作代码：

let postName = null;

var postRef = firebase.database().ref('variables/postNumber');

postRef.on('value', function(snapshot) {
  const value = snapshot.val();

  if (value === null) {
    // Handle error when no value was returned
    return;
  }

  postName = value;

});

var uploader = document.getElementById('uploader');
var filebutton = document.getElementById('filebutton');

filebutton.addEventListener('change', function(e) {
  if (postName === null) {
    // Handle the case then post name is still null (either wan't loaded yet or couldn't be loaded)
    return;
  }

  var file = e.target.files[0];
  var ext = file.name.split('.').pop();;

  //create a storage ref
  var storageRef = firebase.storage().ref('posts/' + postName + "." + ext);

  var task = storageRef.put(file);
  publishPost(postName, ext);
  function publishPost(postName, ext) {
    firebase.database().ref('posts/' + postName).set({
      postID: postName,
      postDate: Date(),
      fileType : ext
    });
    firebase.database().ref('variables/').set({
      postNumber: postName + 1
    });
  }
  task.on('state_changed', 
  function progress(snapshot){
    var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) *100;
    uploader.value = percentage;
  },
  function error(err){

  },
  function complete(postName, ext){
    uploader.value = 0;
    window.alert('Your meme Uploaded correctly');
  });
});

【讨论】：