尝试从提交的表单上传数据和图像

Question

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

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

这是我的代码

// 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只是post图像部分导致它太大

<div class="form-row">
<div class="form-group ml-2 col-sm-6">
<label>Menu Item Image</label>
<div id="msg"></div>
<input type="file" name="img[]" class="file" accept="image/*"  id="fileButton">
<div class="input-group my-3">
<input type="text" class="form-control" disabled placeholder="Upload File" id="file" required>
<div class="input-group-append">
<button type="button" class="browse btn btn-primary"><i class="fas fa-folder-open mr-2"></i>Browse...</button>
 </div>
 </div>
 <div class="ml-2 col-sm-6">
 <img src=" " id="preview" class="img-thumbnail">
 </div>
 </div>
 </div>
 <button type="submit" class="btn btn-primary btn-block mb-3">Submit Menu</button>

这里是

的 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]);
});

没有发生任何错误，也没有将其保存到数据库

Answer 1

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

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()

Answer 2


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

尝试从提交的表单上传数据和图像

Try to upload data and image from form in submit

javascript

file-upload

image-uploading

firebase