如何将图像和数据添加到 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 存储在数据库中。尽管如此，存储下载网址并不是最佳做法。

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 来处理 Promise 并使用 Cloud Firestore 而不是实时数据库。