我在创建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()
})
}
并且文件池 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 或文件错误...我该如何解决这个问题?
在将
avatar
值发送到存储之前记录它有助于记录它包含的内容。您的存储告诉您这不是Blob
或File
。
在这种情况下,它看起来像avatar
是一个数组。
this.setState({
avatar: fileItems.map(fileItem => fileItem.file) // this is an array
});
因此,您可以使用avatar[0]
选择数组中的第一个元素,而不是使用 avatar
,这是整个数组
const upload = storage.ref(`avatars/${credential.user.uid}`).put(avatar[0])