Firebase存储：操作＆＃x27; uploadbytes＆＃x27;

Question

您好，我目前正在数据库中学习Firestore。我试图将数据从状态发送到数据库，但是我遇到错误，说无法在root上执行上传。我对firebase了解不多，所以我很难弄清楚这一点

firebaseError：firebase存储：无法在root引用上执行操作'uploadbytes'，使用子女（例如.child（'file.png'）创建非root引用。 （存储/无效 - 根操作）

这是我的代码

const LoginCustomer: React.FC = () => {

    const [email, setEmail] = useState<string>('');
    const [password, setPassword] = useState<string>('');
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [showLoading, setShowLoading] = useState(false);
    const [present, dismiss] = useIonToast();
    const { login, signInWithGoogle } = useAuth();
    const history = useHistory();

    const mounted = useRef(false);

    const db = getFirestore();
    const [selectedFile, setSelectedFile] = useState<File>();
    const [fileName, setFileName] = useState('');
    const storage = getStorage();

    const imagesRef = ref(storage, 'images');

    const fileChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) =>{
        setSelectedFile(event.target!.files![0]);
        setFileName(event.target!.files![0].name);
    };

    const insertHandler = async() => {
        const storageRef = ref(storage, fileName);
        uploadBytes(storageRef, selectedFile as Blob).then(() => {
          console.log('upload file succes');
          getDownloadURL(ref(storage, fileName)).then((url)=>{
              addData(url);
          })
        })
      };

    useEffect(() => {
        mounted.current = true;
        return () => {
            mounted.current = false;
        }
    }, [])

    
        const addData = async(url: string) =>{
            try{
                const docRef = await addDoc(collection(db, "users"),{
                    email: email,
                    password: password,
                    foto: fileName,
                    fotoUrl: url
                });
                console.log("Document written with ID : ", docRef.id);
            } catch (e) {
                console.error("Error adding document: ", e);
            }
        }
  
    
  return (
    <IonPage>
      <IonContent className="body" class="ion-padding">
          <img className="logoLogin" src={logo} />
        <IonItem lines="none" className="backgroundItem"> 
            <IonText className='text1'>
                Pandawa Craft Store 
            </IonText>
        </IonItem>
        <IonItem lines="none" className='textItem'> 
            <IonText className='text2'>
               Login
            </IonText>
        </IonItem>
        <IonGrid className="gridinput1">
        <IonRow>
            <IonInput type='email' className="inputEmail" value={email} placeholder="Email" onIonChange={e => setEmail(e.detail.value!)}></IonInput>
        </IonRow>
        </IonGrid>

        <IonGrid className="gridinput2">
        <IonRow>
            <IonInput type='password' className="inputEmail" value={password} placeholder="Password" onIonChange={e => setPassword(e.detail.value!)}></IonInput>
        </IonRow>
        </IonGrid>
        <IonGrid className="gridinput1">
        <IonRow>
            <IonButton onClick={insertHandler} onSubmit={async e =>{
                e.preventDefault()
                if (!email || !password){
                    present({
                        buttons: [{ text: 'hide', handler: () => dismiss() }],
                        message: 'Credentials not valid',
                        onDidDismiss: () => console.log('dismissed'),
                        onWillDismiss: () => console.log('will dismiss'),
                      })
                } else {
                    setShowLoading(true)
                    setIsSubmitting(true)
                    login(email, password)
                    .then((response) => {
                        console.log(response)
                        history.push('/home')
                    })
                    .catch((error) => console.log(error.message)).finally(() => mounted.current && setIsSubmitting(false))
                }
            }}
             className="buttonLogin" expand="block" size="default" color="new">
                Login
            </IonButton>
            <IonLoading
                cssClass='my-custom-class'
                isOpen={showLoading}
                onDidDismiss={() => setShowLoading(false)}
                message={'Login...'}
                duration={500}
            />
        </IonRow>
        </IonGrid>
        
        <IonGrid>
            <p className="textDetail">Or Continue with </p>
        </IonGrid>
          
      <IonButton className="btnGoogle" onClick={()=> signInWithGoogle()
            .then(user => {
                console.log(user)
                history.push('/home')
                })
            .catch(error => console.log(error))}
            color="new"
            >
               Google Sign In
        </IonButton>
            <p className="textSignup"><a href="/registercustomer">New in pandawaCS ? Sign Up Now</a></p>
    </IonContent>   
    </IonPage>
  );
};

export default LoginCustomer;

（存储/无效

Answer 1

尝试以下操作：

const storageref = ref（存储，userImages/$ {file.name}）;