Как добавить изображение и данные в Firebase

Question

Я хочу отправлять / добавлять данные уведомлений в базе данных, которая содержит изображение с некоторыми текстовыми данными, поэтому я не могу добавить эти данные в firebase. Я пробовал какой-то код только для вставки данных, но он не работает, и как мне добавить изображение в firebase?

Я добавляю базу данных, которая сделана вручную для уведомления. Я хочу добавить еще больше уведомлений с изображением

База данных

Это моя HTML-форма

<form method=post enctype="multipart/form-data">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="form-group">
                                                <label>Title</label>
                                                <input type="text" id="title" class="form-control" placeholder="Company" >
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label>Image</label>
                                                <input type="image" class="form-control" placeholder="Image">
                                            </div>
                                        </div> 
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">Redeem Steps</label>
                                                <input type="text" id="redeem" class="form-control" placeholder="Redeem Steps">
                                            </div>
                                        </div>
                                    </div>


                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>Description</label>
                                                <textarea rows="5" id="description" class="form-control" placeholder="Here can be your description"></textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                    <div class="col-md-12" >
                                        Image 1 <span style="color:red">*</span><!--<input type="file" id="image" name="img1"  required>-->    
                                    </div>
                                </div>


                                    <button type="submit" id="submitBtn" class="btn btn-info btn-fill pull-right" onclick="submitclick()">Send notification</button>
                                    <div class="clearfix"></div>
                                </form>

это файл js

var title=document.getElementById("title");
var redeem=document.getElementById("redeem");
var description=document.getElementById("description");
var image=document.getElementById("image");
var submitBtn=document.getElementById("submitBtn");
var Id=1;
function submitclick(){

    var firebaseref=firebase.database().ref();

    var messagetitle=title.value;
    var messageredeem=redeem.value;
    var messagedescription=description.value;
    //var messageimage=image.value;

    console.log(messagetitle);
    console.log(messageredeem);
    console.log(messagedescription);
    //console.log(messageimage);


    //firebaseref.child("notification").set("vinit");
    //firebaseref.child("notification").set("2");
    //firebaseref.child("notification").set("messagedescription");
    //firebaseref.child("notification").set("messageimage");
    firebase.database().ref('notification/'+Id).set({
        title : messagetitle,
        redeem : messageredeem,
        description : messagedescription
        image : messageimage
      });

      console.log(Id);
Id++;
console.log(Id);
}

Answer 1

Вы не можете загрузить изображение непосредственно в базу данных Firebase.Сначала вы должны загрузить изображение в хранилище Firebase, затем вы можете сохранить имя изображения / местоположение / downloadUrl в базе данных, если хотите.Хотя хранить URL-адрес загрузки не рекомендуется.

const file = ...
const metadata = { contentType: 'image/jpeg' }; // or whatever you want
const storageRef = firebase.storage().ref();
const uploadTask = storageRef.child(`images/${file.name}`).put(file, metadata);


uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, snapshot => {
  // If you want to show upload progress, do whatever you want with progress...
  const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  switch (snapshot.state) {
    case firebase.storage.TaskState.PAUSED:
      console.log('Upload is paused');
      break;
    case firebase.storage.TaskState.RUNNING:
      console.log('Upload is running');
      break;
  }
}, error => {
  console.log(error);
}, () => {
  // upload finished with success, you can get the download URL
  uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
    console.log(downloadURL);
  });
});

Если вы хотите сохранить downloadUrl в базе данных, то вам нужно сохранить downloadUrl в переменной или поместить набор базы данных в завершенную загрузку.Перезвоните.Часть набора базы данных должна работать следующим образом:

// The id should foloow your database structure,
// based on your posted image, should look like this:
// `noti_${id}` where the id is a number.
firebase.database().ref(`notification/${id}`).set({
  ...uploadData,
  image: downloadUrl
});

Кроме того, я вряд ли рекомендую использовать async await для обработки обещаний и использовать облачное хранилище вместо базы данных в реальном времени.