在栏中完成进度后，即使文件已上传，URL也不会生​​成

如何解决在栏中完成进度后，即使文件已上传，URL也不会生​​成

文件上传完毕且进度条完成到100时，不会生成URL，但是如果我删除进度代码，则会生成URL

const handleChange = async (e) => {
    const file = e.target.files[0];
    //Path of the file.
    const storageRef = storage.ref("files/");
    const fileRef = storageRef.child(file.name);
    //Upload files in firebase storage.
    const time= await fileRef.put(file).on(
      "state_changed",(snapshot) => {
        const progress = Math.round(
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        );
        setprogress(progress);
      }
    )
    //URL being generated
    setUrl(await fileRef.getDownloadURL());
    storage.refFromURL(url);
};

解决方法

我重写了on回调函数，并在complete事件中生成了URL，此行为在此Firebase storage document

中有更详细的解释

var storage = firebase.storage().ref("files/").child(file.name);

//upload file
var upload = storage.put(file);

//update progress bar
upload.on(
    "state_changed",function progress(snapshot) {
        var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        setprogress(percentage);
    },function error() {
        alert("error uploading file");
    },function complete() {
        // generate URL
        storage
            .getDownloadURL()
            .then(function(url) {
                console.log(url);
            })
            .catch(function(error) {
                console.log("error encountered");
            });
    });

,

由于我们在React的类组件中有setState的回调，因此您必须执行类似的操作

setUrl(await fileRef.getDownloadURL());

useEffect观看状态更改

useEffect(() => {
   storage.refFromURL(YOUR_URL_STATE);
},[YOUR_URL_STATE]);