Firebase 存储上传在遵循指南时无法添加元数据

Question

所以这应该像遵循此处的文档一样简单：

https://firebase.google.com/docs/storage/web/upload-files

ref、data、metadata 的布局应该是一样的：

https://firebase.google.com/docs/reference/js/storage.md#uploadbytesresumable

const metadata = {
  butts: "image/jpeg",
}

function Multi() {
  const [images, setImages] = useState()
  const [imageList, setImageList] = useState([])

  const uploadFiles = async () => {
    for (let i = 0; i < images.length; i++) {
      const name = `/image_storage/${v4()}`
      const imageRef = ref(proStorage, name)
      const uploadtask = uploadBytesResumable(imageRef, images[i], metadata)
      const imageListref = ref(proStorage, "image_storage/")

      uploadtask.then(
        "state_changed",
        (snapshot) => {
          const progress =
            (snapshot.bytesTransferred / snapshot.totalBytes) * 100
          console.log("Upload is " + progress + "% done")
          // eslint-disable-next-line
          switch (snapshot.state) {
            case "paused":
              console.log("Upload is paused")
              break
            case "running":
              console.log("Upload is running")
              break
          }
        },
        (error) => {},
        () => {
          getDownloadURL(uploadtask.snapshot.ref).then(async (downloadURL) => {
            console.log("File available at", downloadURL)
            listAll(imageListref).then((response) => {
              response.items.forEach((item) => {
                setImageList((prev) => [...prev, item.name])
              })
            })
          })
        }
      )
    }
  }

但是，当它完成时，文件的存储桶中的元数据字段为空？有什么想法吗？

Answer 1

您尝试设置的

butts

属性不是

UploadMetadata

或

feedbackSettableMetadata

的一部分，它们定义了元数据中允许哪些属性。

这意味着您会想要：

• 或者在

  butts

  中设置

  customMetadata

  属性，其中属性名称可以是任何你想要的。
• 或在

  contentType

  属性名称下存储相同的值，这是允许的。

代码中的示例：

signInAnonymously(auth).then((cred) => {
  console.log(cred.user);
  const metadata = {
    contentType: "image/png",
    customMetadata: {
        butts: "image/png",
    },
  };
  const storageRef = ref(storage, "77151176.png");
  console.log('Starting upload');
  const image = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 5, 0, 0, 0, 5, 8, 6, 0, 0, 0, 141, 111, 38, 229, 0, 0, 0, 28, 73, 68, 65, 84, 8, 215, 99, 248, 255, 255, 63, 195, 127, 6, 32, 5, 195, 32, 18, 132, 208, 49, 241, 130, 88, 205, 4, 0, 14, 245, 53, 203, 209, 142, 14, 31, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130]);

  uploadBytesResumable(storageRef, image, metadata).then((snapshot) => {
    console.log('Uploaded bytes and metadata');
  }).catch((e) => {
    console.error(e);
  });
})

StackBlitz上的工作代码。

元数据中的

contentType

和自定义元数据都可以在存储中正常显示：