Как исправить недопустимый аргумент в `put` с индексом 0: ожидается большой двоичный объект или файл при использовании React, Firebase и Filepond

Я пытаюсь загрузить аватар пользователя при создании пользователя firebase, после создания пользователя здесь

auth.createUserWithEmailAndPassword(this.state.email,this.state.password)
    .then(credential=>{
     const photoUrl = this.handleUpload(credential)
})

Я создаю функцию загрузки дескриптора, которая возвращает photoUrl ниже

handleUpload=(credential)=>{
    const {avatar} = this.state;
    const upload = storage.ref(`avatars/${credential.user.uid}`).put(avatar)
    upload.on('state_changed',(snapshot)=>{
      let progress = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
      console.log('Upload is ' + progress + '% done');
    },(e)=>{
      console.log(e)
    },()=>{
      return storage.ref("avatars").child(`${credential.user.uid}`).getDownloadURL()
    })
  }

и экземпляр пользовательского интерфейса filepond объявляется в пользовательском интерфейсе следующим образом

const { ....,avatar,....} = this.state;

<FilePond 
  ref={ref => this.pond = ref}
  files={avatar}
  fileValidateTypeLabelExpectedTypes="Invalid File Type"
  imagePreviewMaxFileSize='3MB'
  imageValidateSizeMinWidth="400"
  imageValidateSizeMaxWidth="1024"            
  imageValidateSizeMinHeight="400"
  imageValidateSizeMaxHeight="1024"
  imagePreviewTransparencyIndicator="green"
  maxFileSize='3MB'
  labelIdle={'Drag & Drop your Profile Picture or <span class="filepond--label-action"> Browse </span>'}
  acceptedFileTypes={['image/png', 'image/jpeg']}
  onupdatefiles={fileItems => {
    this.setState({
      avatar: fileItems.map(fileItem => fileItem.file)
    });
  }}              
/>

Но я получаю ожидаемую ошибку blob или file... Как я могу это исправить?


reactjs firebase firebase-storage filepond
person john    schedule 02.06.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это помогает регистрировать, что содержит значение avatar, прежде чем оно будет отправлено в хранилище. Ваше хранилище сообщает вам, что это не Blob и не File.

В этом случае похоже, что avatar — это массив.

this.setState({
    avatar: fileItems.map(fileItem => fileItem.file) // this is an array
});

Таким образом, вместо использования avatar, который представляет собой весь массив, вы можете выбрать первый элемент в массиве с помощью avatar[0].

const upload = storage.ref(`avatars/${credential.user.uid}`).put(avatar[0])
person Rik    schedule 03.06.2019