如何将图像和数据添加到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存储，然后根据需要将映像名称/ location / downloadUrl存储在数据库中。 Altough，存储下载网址不是最佳做法。

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来处理promises并使用cloud firestore而不是实时数据库。