未捕获（承诺）FirebaseError：Firebase 存储：Object 'john' 不存在。 （存储/未找到对象）

Question

我在我的 SimpChat 应用程序中使用ReactJS将数据从我的注册表单上传到 Firestore 数据库，我收到一个错误，未捕获（承诺）FirebaseError：Firebase 存储：Object 'john' 不存在。 （存储/未找到对象）。 我在哪里遇到错误，我该如何解决？

这是我的注册表格代码：

 import React from 'react' import { useState } from 'react'; import Add from "../img/addAvatar.png" import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth"; import { auth, storage } from "../firebase"; import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage"; import { doc, setDoc } from "firebase/firestore"; import { db } from "../firebase"; const Register = () => { const [err,setErr] = useState(false); const handleSubmit = async (e) => { e.preventDefault() // console.log(e.target[0].value) const displayName = e.target[0].value; const email = e.target[1].value; const password = e.target[2].value; const file = e.target[3].files[0]; try { const res = await createUserWithEmailAndPassword(auth, email, password) const storageRef = ref(storage, displayName); const uploadTask = uploadBytesResumable(storageRef, file); // Register three observer uploadTask.on( (error) => { setErr(true); }, () => { getDownloadURL(uploadTask.snapshot.ref).then(async (downloadURL) => { await updateProfile (res.user, { displayName, photoURL: downloadURL, }); await setDoc(doc(db, "users", res.user.uid), { uid: res.user.uid, displayName, email, photoURL: downloadURL, }); }); } ); } catch (err) { setErr(true); } } return ( <div className='formContainer'> <div className='formWrapper'> <span className="logo">SimpChat</span> <span className="logo">Register</span> <form onSubmit={handleSubmit}> <input type="text" placeholder='display name'/> <input type="email" placeholder='email' /> <input type="password" placeholder='password' /> <input style={{ display: "none" }} type="file" id='file' /> <label htmlFor="file"> <img src={Add} alt="" /> <span>Add an avatar</span> </label> <button>Sign up</button> {err && <span>Something went wrong</span>} </form> <p>You do have an account? Login</p> </div> </div> ) } export default Register

Answer 1

uploadTask.on()中的第一个参数应该是事件，即state_changed 。 尝试：

// Ensure that all values are defined
console.log(file, displayName);

const storageRef = ref(storage, displayName);
const uploadTask = uploadBytesResumable(storageRef, file);

uploadTask.on(
  'state_changed',
  (error) => {
    console.log('Error upload file', error)
    setErr(true);
  },
  () => {
    getDownloadURL(uploadTask.snapshot.ref).then(async (downloadURL) => {
      console.log({ downloadURL })
    });
  }
);