Javascript 尝试从提交中的表单上载数据和图像

我是新手，不知道自己错过了什么

我搜索了一下，找不到合适的解决方案

这是我的密码

// create menu
var fileButton = document.getElementById('fileButton');
fileButton.addEventListener('change', function(e) {
  var file = e.target.files[0];
  var storageRef = firebase.storage().ref(userID + 'foodImg/'+file.name);
storageRef.put(file);
// get download URL
storageRef.getDownloadURL().then(function(downloadURL) {
  console.log('File available at',downloadURL);
  const createMenuForm = document.querySelector('#mydropzone');
                createMenuForm.addEventListener('submit', (e) => {
                e.preventDefault();
                db.collection('restaurants').add( {
                   foodLine: {
                   menuTitle: createMenuForm.menuTitle.value
         },
                food: {
               foodName: createMenuForm.foodName.value,
               imageURL: downloadURL,        
               inputCalories: createMenuForm.inputCalories.value,
               menuItemDescription: createMenuForm.menuItemDescription.value,
               menuItemInfo: createMenuForm.menuItemInfo.value
         }
}).then(() => {
  //reset form
 createMenuForm.reset();
}).catch(err => {
 console.log(err.message);
});
});
});
});

我的html只是发布了图片部分，因为它太大了

菜单项图像
浏览。。。
提交菜单

下面是的jQuery代码

$(document).on("click", ".browse", function() {
var file = $(this).parents().find(".file");
file.trigger("click");
});
$('input[type="file"]').change(function(e) {
var fileName = e.target.files[0].name;
$("#file").val(fileName);
var reader = new FileReader();
reader.onload = function(e) {
// get loaded data and render thumbnail.
document.getElementById("preview").src = e.target.result;
};
// read the image file as a data URL.
reader.readAsDataURL(this.files[0]);
});

无任何事情发生。不获取任何错误，也不将其保存到数据库。根据，正确的语法应为：

db.collection('collection_name').doc('document_name').set(document_item);

因此，在您的情况下，应该是这样的：

    // create menu
    var fileButton = document.getElementById('fileButton');
    fileButton.addEventListener('change', function(e) {
      var file = e.target.files[0];
      var storageRef = firebase.storage().ref(userID + 'foodImg/'+file.name);
    storageRef.put(file);
    // get download URL
    storageRef.getDownloadURL().then(function(downloadURL) {
      console.log('File available at',downloadURL);
      const createMenuForm = document.querySelector('#mydropzone');
                    createMenuForm.addEventListener('submit', (e) => {
                    e.preventDefault();
                    db.collection('restaurants').doc('food_1').set( {
                       foodLine: {
                       menuTitle: createMenuForm.menuTitle.value
             },
                    food: {
                   foodName: createMenuForm.foodName.value,
                   imageURL: downloadURL,        
                   inputCalories: createMenuForm.inputCalories.value,
                   menuItemDescription: createMenuForm.menuItemDescription.value,
                   menuItemInfo: createMenuForm.menuItemInfo.value
             }
    }).then(() => {
      //reset form
     createMenuForm.reset();
    }).catch(err => {
     console.log(err.message);
    });
    });
    });

});

db.collection（'restaurants'）.doc（'food_1'）.set（）

根据，正确的语法应该是：

db.collection('collection_name').doc('document_name').set(document_item);

var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
fileButton.addEventListener('change', function(e){
var file = e.target.files[0];
var storageRef = firebase.storage().ref('foodImg/'+file.name);
var task = storageRef.put(file);
task.on('state_changed', function progress(snapshot) {
  var percentage = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
  uploader.value = percentage;

}, function (error) {
  console.error(error);

},function () {
  task.snapshot.ref.getDownloadURL().then(function(downloadURL) {
      console.log('File available at',downloadURL);
      const createMenuForm = document.querySelector('#mydropzone');
      createMenuForm.addEventListener('submit', (e) => {
      e.preventDefault();
      db.collection('restaurants').add( {
         foodLine: {
         menuTitle: createMenuForm.menuTitle.value
},
      food: {
     foodName: createMenuForm.foodName.value,
     imageURL: downloadURL,        
     inputCalories: createMenuForm.inputCalories.value,
     menuItemDescription: createMenuForm.menuItemDescription.value,
     menuItemInfo: createMenuForm.menuItemInfo.value
}
}).then(() => {
//reset form
createMenuForm.reset();
}).catch(err => {
console.log(err.message);
});
});
});
}); 
}); 

因此，在您的情况下，应该是这样的：

    // create menu
    var fileButton = document.getElementById('fileButton');
    fileButton.addEventListener('change', function(e) {
      var file = e.target.files[0];
      var storageRef = firebase.storage().ref(userID + 'foodImg/'+file.name);
    storageRef.put(file);
    // get download URL
    storageRef.getDownloadURL().then(function(downloadURL) {
      console.log('File available at',downloadURL);
      const createMenuForm = document.querySelector('#mydropzone');
                    createMenuForm.addEventListener('submit', (e) => {
                    e.preventDefault();
                    db.collection('restaurants').doc('food_1').set( {
                       foodLine: {
                       menuTitle: createMenuForm.menuTitle.value
             },
                    food: {
                   foodName: createMenuForm.foodName.value,
                   imageURL: downloadURL,        
                   inputCalories: createMenuForm.inputCalories.value,
                   menuItemDescription: createMenuForm.menuItemDescription.value,
                   menuItemInfo: createMenuForm.menuItemInfo.value
             }
    }).then(() => {
      //reset form
     createMenuForm.reset();
    }).catch(err => {
     console.log(err.message);
    });
    });
    });

});

---

db.collection（'restaurants'）.doc（'food_1'）.set（）

谢谢您的回复我按您所说的做了尝试，但仍然没有发生任何事情，也没有保存到数据库谢谢您的回复我按您所说的做了尝试，但仍然没有发生任何事情，也没有保存到数据库

var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
fileButton.addEventListener('change', function(e){
var file = e.target.files[0];
var storageRef = firebase.storage().ref('foodImg/'+file.name);
var task = storageRef.put(file);
task.on('state_changed', function progress(snapshot) {
  var percentage = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
  uploader.value = percentage;

}, function (error) {
  console.error(error);

},function () {
  task.snapshot.ref.getDownloadURL().then(function(downloadURL) {
      console.log('File available at',downloadURL);
      const createMenuForm = document.querySelector('#mydropzone');
      createMenuForm.addEventListener('submit', (e) => {
      e.preventDefault();
      db.collection('restaurants').add( {
         foodLine: {
         menuTitle: createMenuForm.menuTitle.value
},
      food: {
     foodName: createMenuForm.foodName.value,
     imageURL: downloadURL,        
     inputCalories: createMenuForm.inputCalories.value,
     menuItemDescription: createMenuForm.menuItemDescription.value,
     menuItemInfo: createMenuForm.menuItemInfo.value
}
}).then(() => {
//reset form
createMenuForm.reset();
}).catch(err => {
console.log(err.message);
});
});
});
}); 
});