如何修复索引 0 处的“put”中的无效参数：使用 React、Firebase 和 Filepond 时预期的 Blob 或文件

Question

我在创建 firebase 用户时尝试上传用户头像，在此处创建用户后

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

我创建了一个句柄上传功能，returns 下面是一个 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 UI 实例在 UI 中声明如下

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 或文件错误... 我该如何解决这个问题？

Answer 1

它有助于在将 avatar 值发送到存储之前记录其包含的内容。您的存储告诉您它不是 Blob 或 File。

在这种情况下，avatar 看起来像是一个数组。

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

因此，您可以使用 avatar[0]

select 数组中的第一个元素，而不是使用整个数组 avatar

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

如何修复索引 0 处的“put”中的无效参数：使用 React、Firebase 和 Filepond 时预期的 Blob 或文件

How To Fix Invalid argument in `put` at index 0: Expected Blob or File when using React, Firebase and Filepond

firebase

reactjs

firebase-storage

filepond