Firebase Storage 和 Dropzone.js 按下按钮时上传多个图像

Question

本质上我想做的是允许人们添加文件，然后按下按钮将图像上传到 Firebase 存储。我决定使用 Dropzone.js，因为该包编写良好且可自定义，但我仍然感到困惑。

我有这段代码，允许我将多个图像上传到 Firebase，但是，我希望它适合此代码下面所示的框架：

超文本标记语言

<input type="file" id="file" name="file" multiple/>

JS

var auth = firebase.auth();
var storageRef = firebase.storage().ref();
//Handle waiting to upload each file using promise
function uploadImageAsPromise (imageFile) {
    return new Promise(function (resolve, reject) {
        var storageRef = firebase.storage().ref("/sth/"+imageFile.name);
        //Upload file
        var task = storageRef.put(imageFile);
        //Update progress bar
        task.on('state_changed',
            function progress(snapshot){
              // 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');
            },
            function error(err){

            },
            function complete(){
                var downloadURL = task.snapshot.downloadURL;
            }
        );
    });
}

window.onload = function() {
  document.getElementById('file').addEventListener('change', function(e){ 
  //Get files
      for (var i = 0; i < e.target.files.length; i++) {
          var imageFile = e.target.files[i];

          uploadImageAsPromise(imageFile);
      }
  });

  document.getElementById('file').disabled = true;
  auth.onAuthStateChanged(function(user) {
    if (user) {
      document.getElementById('file').disabled = false;
    } else {
      console.log('You need to sign in.');
    }
  });
}

我想要实现的目标

我想将上述上传功能合并到下面的代码片段中。当我按下提交 ID 时，会显示进度条和要上传的文件。Dropzone 说我应该指定 URL: 处的函数，但我不知道如何引用它。另外，dropzone 表示该函数必须返回下载的 URL。

<input type="file" id="file" name="file" multiple/>

var auth = firebase.auth();
var storageRef = firebase.storage().ref();
//Handle waiting to upload each file using promise
function uploadImageAsPromise (imageFile) {
    return new Promise(function (resolve, reject) {
        var storageRef = firebase.storage().ref("/sth/"+imageFile.name);
        //Upload file
        var task = storageRef.put(imageFile);
        //Update progress bar
        task.on('state_changed',
            function progress(snapshot){
              // 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');
            },
            function error(err){

            },
            function complete(){
                var downloadURL = task.snapshot.downloadURL;
            }
        );
    });
}

window.onload = function() {
  document.getElementById('file').addEventListener('change', function(e){ 
  //Get files
      for (var i = 0; i < e.target.files.length; i++) {
          var imageFile = e.target.files[i];

          uploadImageAsPromise(imageFile);
      }
  });

  document.getElementById('file').disabled = true;
  auth.onAuthStateChanged(function(user) {
    if (user) {
      document.getElementById('file').disabled = false;
    } else {
      console.log('You need to sign in.');
    }
  });
}

// Get the template HTML and remove it from the doument
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var submitButton = document.querySelector('#submit-button');

var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
  url: "/", // Set the url
  thumbnailWidth: 80,
  thumbnailHeight: 80,
  parallelUploads: 20,
  previewTemplate: previewTemplate,
  autoQueue: false, // Make sure the files aren't queued until manually added
  previewsContainer: "#previews", // Define the container to display the previews
  clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
});

// Update the total progress bar
myDropzone.on("totaluploadprogress", function(progress) {
  document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
});

myDropzone.on("sending", function(file) {
  // Show the total progress bar when upload starts
  document.querySelector("#total-progress").style.opacity = "1";
  // And disable the start button
  file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
});



submitButton.addEventListener('click', function(){

  myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));


  myDropzone.on("queuecomplete", function(progress) {
    document.querySelector("#total-progress").style.opacity = "0";

    //DO STUFF

  });
  
});

Answer 1

您可以使用“addedfile”事件来触发自定义上传功能，如下所示：

myDropzone.on("addedfile", function(){
    uploadImageAsPromise(file);
});

并完全省略 dropzone 上传功能。

要获取进度数据，请仅使用该firebase put().on(state_changed)方法并再次忽略 dropzone 进度。

你现在可能已经解决了这个问题，所以我希望得到一些关于这个答案的反馈，因为我自己目前正在使用 dropzone 和 firebase 。