Блог

Главная - Вопросы по программированию - я пытаюсь загрузить файл в react в firebase и setfileUrl.каким-то образом он выдает ошибку asyn promise

я пытаюсь загрузить файл в react в firebase и setfileUrl.каким-то образом он выдает ошибку asyn promise

#reactjs #file #upload

#reactjs #файл #загрузка

Вопрос:

введите описание изображения здесь я пытаюсь загрузить файл в react в firebase и setfileUrl .. каким-то образом он выдает ошибку asyn promise … пожалуйста, помогите

  const [fileUrl, setFileUrl] = React.useState(null);
  const [progress, setProgress] = useState(0);
 
const onFileChange = async (e) => {
    const file = e.target.files[0];
    const d = uuid();
    const storageRef = firebase.storage().ref(d);
    const fileRef = storageRef.child(file.name);
     fileRef.put(file).on('state_changed', async(snap) => {
      let percentage =  (snap.bytesTransferred / snap.totalBytes) * 100;
     await setProgress(percentage)});
    setFileUrl(await fileRef.getDownloadURL());
  };

Комментарии:

1. можете ли вы обернуть его в try — catch и console .error в catch, без ошибки, довольно сложно сказать

2.пожалуйста, добавьте await в начале fileRef const [fileUrl, setFileUrl] = React.useState(null); const [progress, setProgress] = useState(0); const onFileChange = async (e) => { const file = e.target.files[0]; const d = uuid(); const storageRef = firebase.storage().ref(d); const fileRef = storageRef.child(file.name); await fileRef.put(file).on('state_changed', async(snap) => { let percentage = (snap.bytesTransferred / snap.totalBytes) * 100; await setProgress(percentage)}); setFileUrl(await fileRef.getDownloadURL()); };

3. я добавил скриншот ошибки, пожалуйста, помогите.ошибка все еще существует после добавления await в начало fileRef

Ответ №1:

попробуйте добавить это await в начало fileRef 

 const [fileUrl, setFileUrl] = React.useState(null);   
const [progress, setProgress] = useState(0);   
const onFileChange = async (e) => {
  const file = e.target.files[0];     
  const d = uuid();     
  const storageRef = firebase.storage().ref(d);     
  const fileRef = storageRef.child(file.name);     
  await fileRef.put(file).on('state_changed', 
    async(snap) => {       
      let percentage =  (snap.bytesTransferred / snap.totalBytes) * 100;      
      await setProgress(percentage)});     
      setFileUrl(await fileRef.getDownloadURL());   
    };

Ответ №2:

вот полное решение проблемы .. одна проблема в том, что. он работает на ноутбуке / рабочем столе, но изображение не загружается с помощью браузера iphone Safari.любая помощь будет оценена.

спасибо

 function PicUpload({profile,id}) {
  const [fileUrl, setFileUrl] = React.useState(null);
  const [error, setError] = useState(null);

  const [users, setUsers] = React.useState([]);
  const [progress, setProgress] = useState(0);
  const types = ['image/png', 'image/jpeg'];

  
  const onFileChange = async (e) => {
    const f = e.target.files[0];
    if (f amp;amp; types.includes(f.type)) {
      setError('');
    } else {
      setError('Please select an image file (png or jpg)');
    }
    const storageRef = firebase.storage().ref(f.name);
     await   storageRef.put(f).on('state_changed', 
  async(snap) => {       
    let percentage =  (snap.bytesTransferred / snap.totalBytes) * 100;      
     setProgress(percentage)
    console.log(percentage)}).then
    const  setFileUrl = await storageRef.getDownloadURL();
     db.collection("profiles").doc(id).update({
     avatar: setFileUrl,
    })
    };