如何使用swr-firestore上传firebase存储中的图像并在react中获取上传的图像url

npm install swr-firestore

import { useFirestore, useStorage } from 'swr-firestore';
import firebase from 'firebase/app';
import 'firebase/storage';

const uploadImage = async (file) => {
  try {
    const storageRef = firebase.storage().ref();
    const imageRef = storageRef.child(file.name);
    await imageRef.put(file);
    const imageUrl = await imageRef.getDownloadURL();
    return imageUrl;
  } catch (error) {
    console.error('Error uploading image:', error);
    return null;
  }
};

const MyComponent = () => {
  const { data: imageUrl, error, mutate } = useStorage('images/my-image.jpg', uploadImage);

  const handleFileChange = (event) => {
    const file = event.target.files[0];
    mutate(file);
  };

  if (error) {
    return <div>Error uploading image</div>;
  }

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      {imageUrl && <img src={imageUrl} alt="Uploaded" />}
    </div>
  );
};