Question

我正在尝试将一组图像上传到Firebase。上传本身有效，添加图片。但是，我想获取图片的网址。

我认为我可以将它们存储在数组中，但是无论我做什么，URL中只会存储一张图片。

我要A，上传一组图像（最多3张）或B，仅上传一个图像。因此，我将目标文件设置为一种状态，并使用该状态检查是否有一个或多个图像。然后，我循环浏览上传x次，然后将响应推入... URL。无论做什么，最终我在firebase中只有一个图像URL。

将尝试澄清更多：我想将最多三张图片上传到Firebase（这可以将图片上传到图像桶中。

我想要的是获取图像的下载URL（我想在另一个组件中使用图像URL。本质上，我想使用图像创建图像库或图像轮播。

基本上，从Firebase获取图像URL并显示图像。

这是firebase中显示的内容： https://imgur.com/a/LOBgVK1

这是一个console.log（url）： https://imgur.com/hZrAl0P

 const AddCountryForm = () => {

  const [url, setUrl] = useState([]);
  const [fileArray, setFileArray] = useState([]);



  function onSubmit(e) {
    firebase
      .firestore()
      .collection(continent)
      .doc(revName)
      .set({
        url,

      })
      .then(() => {
        setUrl("");

      });
  }


  const handleChange = (e) => {
    setFileArray(e.target.files);
  };


  const handleUpload = (e) => {
    e.preventDefault();


    if (fileArray.length > 1) {
      for (let i = 0; i < fileArray.length; i++) {
        const uploadTask = storage.ref(`images/${fileArray[i].name}`).put(fileArray[i]);

        uploadTask.on(
          "state_changed",

          () => {
            storage
              .ref("images")
              .child(fileArray[i].name)
              .getDownloadURL()
              .then(res => {
                setUrl([...url, res]); 
              });
          }

        );
      }
    }
    if (fileArray.length === 1) {
      const uploadTask = storage.ref(`images/${fileArray[0].name}`).put(fileArray[0]);
      uploadTask.on(
        "state_changed",

        () => {
          storage
            .ref("images")
            .child(fileArray[0].name)
            .getDownloadURL()
            .then(res => {
              setUrl([res]);
            });
        }
      );
    }

  };

return (
    <form onSubmit={handleSubmit(onSubmit)}>
          <div>
        <input type="file" onChange={handleChange} required multiple />
        <button onClick={handleUpload}> Upload</button>
      </div>

      <input type="submit"></input>
    </form>
  );
};
export default AddCountryForm;

Answer 1

您要并行执行对Firebase Storage的多个put()和getDownloadURL()异步调用。

您必须使用Promise.all()，因为put()返回UploadTask（“就像一个Promise，并在上传完成时解析其快照数据”）和{{1 }}返回Promise。

因此，以下方法可以达到目的（未试用）：

getDownloadURL()

如何将多张图片上传到Firebase并下载URL

1 个答案: