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

基本上我正在尝试做的是允许人们添加文件，然后按下按钮将图像上传到firebase存储。 我决定使用Dropzone.js因为编写良好且可自定义的包，但我仍然难过。 任何帮助将非常感谢！

我有这个代码，允许我上传多个图像到firebase，但是，我希望它适合这个代码下面看到的框架：

HTML

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.'); } }); } 

我正在努力实现的目标

我想将上面的上传function合并到下面的代码段中。 当我按提交ID时，如进度条显示和要上传的文件。 Dropzone说我应该指定它所说的URL的function：但我不知道如何引用它。 此外，dropzone表示该函数必须返回下载的URL。 如果你能帮忙请做！

 // 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 }); }); 

 #actions { margin: 2em 0; } /* Mimic table appearance */ div.table { display: table; } div.table .file-row { display: table-row; } div.table .file-row > div { display: table-cell; vertical-align: top; border-top: 1px solid #ddd; padding: 8px; } div.table .file-row:nth-child(odd) { background: #f9f9f9; } /* The total progress gets shown by event listeners */ #total-progress { opacity: 0; transition: opacity 0.3s linear; } /* Hide the progress bar when finished */ #previews .file-row.dz-success .progress { opacity: 0; transition: opacity 0.3s linear; } /* Hide the delete button initially */ #previews .file-row .delete { display: none; } /* Hide the start and cancel buttons and show the delete button */ #previews .file-row.dz-success .start, #previews .file-row.dz-success .cancel { display: none; } #previews .file-row.dz-success .delete { display: block; } 

      <!--      // Initialize Firebase var config = { apiKey: "", authDomain: "", databaseURL: "", projectId: "", storageBucket: "", messagingSenderId: "" }; firebase.initializeApp(config);       
 
 
Add Images
 
 
    Add files...  
 
 
 
  
  
 
 
  
 
 
 
 
 
 
 
   Cancel    Delete  
 
 
 
 
    
 
 
 Submit  
   
 
 
  
 
 
 
      

如果您有任何疑问，请询问，但我已经被困了一段时间，并且可以真正使用您的任何输入，谢谢！