问上传图像到Firebase 9存储与反应？

EN

import { useState } from 'react';
import { storage } from './firebase.config';

import { ref, uploadBytes } from 'firebase/storage';

console.log(storage); // getting the storage object

export default function Upload() {
    const [img, setImg] = useState(null);
    const [imgError, setImgError] = useState(null);

    // handle submit
    const handleSubmit = async e => {
        e.preventDefault();

        const uploadPath = `images/${img.name}`; // geting the image path

        const storageRef = ref(storage, uploadPath); // getting the storageRef

        uploadBytes(storageRef, img)
            .then(snapshot => console.log(snapshot))
            .catch(err => console.log(err.message));
    };

    // handle upload
    const handleUpload = e => {
        setImgError(null);

        let selected = e.target.files[0];

        if (!selected) {
            setImgError('Please select file');
            return;
        }

        if (!selected.type.includes('image')) {
            setImgError('Please select image file');
            return;
        }

        if (selected.size > 1000000) {
            setImgError('Please select smaller file size');
            return;
        }

        setImgError(null);
        setImg(selected);
    };

    return (
        <div>
            <h1>Upload component</h1>
            <form onSubmit={handleSubmit}>
                <label>
                    <span>Select image file</span>
                    <input type='file' onChange={handleUpload} required />
                </label>

                <button>Add to storage</button>
                {setImgError && <p>{imgError}</p>}
            </form>
        </div>
    );
}

import { initializeApp } from 'firebase/app';
import { getStorage } from 'firebase/storage';

const firebaseConfig = {

    apiKey: 'here is the key',
    authDomain: 'here is the authDomain',
    projectId: 'here is the project ID',
    storageBucket: 'here is the storageBucket',
    messagingSenderId: 'here is the messagingSenderId',
    appId: 'here is appId',
};

// init App
const firebaseApp = initializeApp(firebaseConfig);

// init Storage
export const storage = getStorage(firebaseApp);

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write;
    }
  }
}