Question

我目前正在与 Firebase 合作将图片上传到存储。我创建了一个 uploadImage 函数，它获取图像并将其保存到 Firebase Storage，然后返回该保存图像的 url。当用户单击提交按钮时，我使用该 uploadImage 函数保存该图像并返回一个 url。图像正在正确保存，但正在记录的 url 未定义。我很确定这是我的 aysnc-await 实现的问题。对此有何想法？谢谢！

UploadForm.js：

import { uploadImage } from "../firebase/functions";

const UploadForm = () => {
         const [image1, setImage1] = useState(null);

         const saveForm = async (file) => {
             const url1 = await uploadImage(image1);
             console.log("URL", url1); //the url here is UNDEFINED
          };

         return (
               <ImageUploadForm setImageProp={setImage1} />
        
               <button
                 onClick={(e) => {
                   e.preventDefault();

                   saveForm(image1);
                }}
               ></button>
          );

上传图片功能：

const uploadImage = async (file) => {
         const storageRef = storageService.ref().child("posts/" + file.name);
         
         storageRef.put(file).on(
            "state_changed",
            (snapshot) => {},
            (error) => {
               console.log(error);
            },
             async () => {
               return await storageRef.getDownloadURL();
            }
          );
    };

Answer 1

您的 uploadImage 函数不返回任何内容，只返回承诺

return storageRef.put(file).on(

或者，（因为我不知道该函数是如何工作的/它返回什么），可能

const uploadImage = (file) => {
   return new Promise((resolve, reject) => {
     const storageRef = storageService.ref().child("posts/" + file.name);
     
     storageRef.put(file).on(
        "state_changed",
        (snapshot) => {},
        (error) => {
           console.log(error);
           reject(error);
        },
        () => {
           const res = storageRef.getDownloadURL();
           resolve(res);
        }
      );
  };
}

如何等待异步函数的结果？

1 个答案: