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

我正在尝试将一组图像上载到Firebase。上传本身起作用，图片被添加。不过，我想获得图片的URL

我想我可以将它们存储在一个数组中，但不管我做什么，URL中只存储一张图片

我想上传一组图片（最多3张），或者只上传一张图片。因此，我将目标文件设置为一种状态，并使用该状态检查是否有一个或多个图像。然后我在上传过程中循环了x次，然后将响应推送到…URL。无论我做什么，我最终在firebase中只有一个图像URL

我们将尝试进一步澄清： 我想上传多达三个图像到Firebase（这样做，图像被上传到图像存储桶中）

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

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

这是firebase中显示的内容：

这是一个console.log（url）：

const AddCountryForm=（）=>{
const[url，setUrl]=useState（[]）；
const[fileArray，setFileArray]=useState（[]）；
提交函数（e）{
火基
.firestore（）
.收藏（大陆）
.doc（revName）
.设置({
网址，
})
.然后（（）=>{
setUrl（“”）；
});
}
常数handleChange=（e）=>{
setFileArray（e.target.files）；
};
常量handleUpload=（e）=>{
e、 预防默认值（）；
如果（fileArray.length>1）{
for（设i=0；i {
存储
.ref（“图像”）
.child（文件数组[i].name）
.getDownloadURL（）
。然后（res=>{
setUrl（[…url，res]）；
});
}
);
}
}
if（fileArray.length==1）{
const uploadTask=storage.ref（`images/${fileArray[0].name}`）.put（fileArray[0]）；
上传任务(
“状态已更改”，
() => {
存储
.ref（“图像”）
.child（文件数组[0].name）
.getDownloadURL（）
。然后（res=>{
setUrl（[res]）；
});
}
);
}
};
返回(
上传
);
};
导出默认AddCountryForm；

您希望并行执行对Firebase存储的多个异步调用

您必须使用，因为

put（）

返回一个承诺（其行为类似于承诺，并在上载完成时使用其快照数据进行解析）和

getDownloadURL（）

返回一个承诺

因此，应采用以下方法（未经测试）：

if（fileArray.length>1）{
const uploadPromises=[]；
for（设i=0；i{
常数=[]；
uploadTaskSnapshot.forEach（（uploadTaskSnapshot）=>{
push（uploadTaskSnapshot.ref.getDownloadURL（））；
});
返回承诺。全部（URL承诺）；
})
。然后（（URL）=>{
setUrl（URL）；
});
}

您希望并行执行对Firebase存储的多个异步调用

您必须使用，因为

put（）

返回一个承诺（其行为类似于承诺，并在上载完成时使用其快照数据进行解析）和

getDownloadURL（）

返回一个承诺

因此，应采用以下方法（未经测试）：

if（fileArray.length>1）{
const uploadPromises=[]；
for（设i=0；i{
常数=[]；
uploadTaskSnapshot.forEach（（uploadTaskSnapshot）=>{
push（uploadTaskSnapshot.ref.getDownloadURL（））；
});
返回承诺。全部（URL承诺）；
})
。然后（（URL）=>{
setUrl（URL）；
});
}

 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;

  if (fileArray.length > 1) {
    const uploadPromises = [];
    for (let i = 0; i < fileArray.length; i++) {
      uploadPromises.push(
        storage.ref(`images/${fileArray[i].name}`).put(fileArray[i])
      );
    }
    Promise.all(uploadPromises)
      .then((uploadTaskSnapshots) => {
        const urlPromises = [];

        uploadTaskSnapshots.forEach((uploadTaskSnapshot) => {
          urlPromises.push(uploadTaskSnapshot.ref.getDownloadURL());
        });

        return Promise.all(urlPromises);
      })
      .then((urls) => {
        setUrl(urls);
      });
  }