如何將 firebase storage downloadURL 保存到 firestore 集合？

Question

我無法將我的 firebase 存儲圖像保存到 firestore 集合變量中。 它工作了一段時間，但后來停止工作。 圖像變量返回空值。

ps - 我正在使用 asia-south1 服務器

這是我的 ManageProducts 模板代碼

<div>
      <h1>Add Items</h1>
      <div>
        <form>
          <input type="text" placeholder="name" required v-model="item.name" />
          <textarea
            required
            placeholder="description"
            v-model="item.description"
          ></textarea>
          <input
            type="text"
            required
            placeholder="price"
            v-model="item.price"
          />
          <div class="form-group">
            <input
              type="text"
              placeholder="Available/Unavailable"
              v-model.lazy="item.status"
              class="form-control"
            />
          </div>
          <div class="form-group">
            <input
              type="text"
              placeholder="Sewing Partner"
              v-model.lazy="item.sewingPartner"
              class="form-control"
            />
          </div>
          <input type="file" required @change="uploadImage" accept="image/*" />
          <button @click.prevent="AddNewItem">Add Item</button> |
          <button class="delete">
            Cancel
          </button>
        </form>
      </div>

這是管理產品的腳本。 在這里，我可以添加除 firebase 存儲的圖像 Url 之外的所有其他輸入值。

  <script>
    import { dbItemAdd } from "../../main";
    import firebase from "firebase";
    import "firebase/firestore";
    import "firebase/storage";
    export default {
      name: "AddItems",
      components: { AdminPreviewItems },
      data() {
        return {
          items: [],
          item: {
            name: null,
            description: null,
            image: null,
            price: null,
            status: null,
            sewingPartner: null,
          },
        };
      },
      methods: {
        uploadImage(e) {
          let file = e.target.files[0];
          var storageRef = firebase.storage().ref("products/" + file.name);
          let uploadTask = storageRef.put(file);
          uploadTask.on(
            "state_changed",
            (snapshot) => {
              console.log(snapshot);
            },
            (error) => {
              // Handle unsuccessful uploads
              console.log(error.message);
            },
            () => {
              // Handle successful uploads on complete
              // For instance, get the download URL: https://firebasestorage.googleapis.com/...
              uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
                this.item.image = downloadURL;
                console.log("File available at", downloadURL);
              });
            }
          );
        },
    
        AddNewItem() {
          dbItemAdd
            .add({
              name: this.item.name,
              description: this.item.description,
              image: this.item.image,
              price: this.item.price,
              status: this.item.status,
              sewingPartner: this.item.sewingPartner,
            })
            .then(() => {
              location.reload();
              console.log("Adding data to Firestore");
            })
            .catch((error) => {
              console.error("Error adding document: ", error);
            });
        },
      },
    };
    </script>

Answer 1

你什么時候調用AddNewItem函數？ 如果圖像尚未上傳或未獲取 downloadURL，如果您單擊提交按鈕，它將為空。

uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
  this.item.image = downloadURL;
  console.log("File available at", downloadURL);
  //function must be called after this
});

您可以禁用提交按鈕是this.item.image為 null（默認值）。

<button :disabled="!item.image" @click.prevent="AddNewItem">Add Item</button>

我沒有看到使用state_changed觀察者。 需要顯示上傳進度嗎？ 如果是，請保留現有代碼，否則我會將其重構為這樣的異步函數：

async uploadImage(e) {
  let file = e.target.files[0];
  if (!file) alert("No file selected")
  var storageRef = firebase.storage().ref("products/" + file.name);
  let uploadTask = await storageRef.put(file);
  const url = await storageRef.getDownloadURL()
  this.item.image = url
}

您實際上是在文件更改時上傳圖像，而不是提交按鈕單擊，因此您可以在獲取 downloadURL 后@change從@change事件本身添加 Firestore 文檔。

Answer 2

將文件上傳到存儲后，調用getDownloadURL()將生成訪問令牌

然后，您將此 URL 和訪問令牌直接存儲到 firestore 中

// Create reference to image
var mountainImagesRef = storageRef.child('images/mountains.jpg');
// Put image file to Storage
ref.put(file).then((snapshot) => {
// On complete, get the downloadURL
return mountainImagesRef.getDownloadURL()})
.then((downloadURL) =>
// Add download URL to Firestore
firestore().doc("path/to/document/here").add({
              name: this.item.name,
              description: this.item.description,
              image: downloadURL,
              price: this.item.price,
              status: this.item.status,
              sewingPartner: this.item.sewingPartner,})
).catch(console.error);