使用 react-firebase-file-uploader 将文件上传到 Firebase 时出现问题 包。
收到的错误是Uncaught (in promise) TypeError: storageRef.child is not a function
首先,firebase
被导入到我的 GatsbyJS Layout.js
中 componentDidMount
作为
Layout.js
componentDidMount() {
const app = import('firebase/app');
const auth = import('firebase/auth');
const database = import('firebase/firestore');
const storage = import('firebase/storage');
Promise.all([app, auth, database, storage]).then(values => {
const firebase = getFirebase(values[0]);
!this.isCancelled && this.setState({ firebase });
});
}
然后,firebase
作为 props
添加,使用 React.createContext
将 functions
传递给组件作为
FirebaseContext.js
const FirebaseContext = React.createContext(null);
export const withFirebase = Component => props => (
<FirebaseContext.Consumer>
{firebase => <Component {...props} firebase={firebase} />}
</FirebaseContext.Consumer>
);
export default FirebaseContext;
在 firebase
组件中,我们使用 onboardStorage
作为包含 this.storage
的函数
Firebase.js
class Firebase {
constructor(app) {
app.initializeApp(config);
/* Firebase APIs */
this.app = app;
this.storage = app.storage();
// *** Storage API ***
onboardStorage = () => this.storage;
}
let firebase;
function getFirebase(app, auth, database, storage) {
if (!firebase) {
firebase = new Firebase(app, auth, database, storage);
}
return firebase;
}
export default getFirebase;
然后将其传递给我的表单组件中的 FileUploader
组件
Form.js
<FileUploader
accept="image/*"
name="avatar"
filename="operator_accreditation"
storageRef={() => firebase.onboardStorage().ref(`${uid}/files`)}
onUploadStart={this.handleUploadStart}
onUploadError={this.handleUploadError}
onUploadSuccess={this.handleUploadSuccess}
onProgress={this.handleProgress}
/>
Form.js中的各个句柄函数如下
handleUploadStart = () =>
this.setState({
operatorAccreditationIsUploading: true,
operatorAccreditationProgress: 0
});
handleProgress = operatorAccreditationProgress =>
this.setState({ operatorAccreditationProgress });
handleUploadError = error => {
this.setState({ operatorAccreditationIsUploading: false });
console.error(error);
};
handleUploadSuccess = filename => {
const { firebase, uid } = this.props;
this.setState({
operatorAccreditation: filename,
operatorAccreditationProgress: 100,
operatorAccreditationIsUploading: false
});
const storageOperatorAccreditation = firebase.onboardStorage();
storageOperatorAccreditation
.ref(`${uid}/files`)
.child(filename)
.getDownloadURL()
.then(url => this.setState({ operatorAccreditation: url }));
};
const uid
就是auth.uid
添加 console
消息表示上传文件时不会触发任何消息。
选择文件后出现错误,说明问题出在FileUploader
的storageRef
。我做错了什么 Uncaught (in promise) TypeError: storageRef.child is not a function
?
最佳答案
我刚刚遇到了类似的问题。问题是您将函数作为 storageRef 属性传递给 FileUploader。相反,您应该像这样直接传递一个 storageRef 对象:
<FileUploader
accept="image/*"
name="avatar"
filename="operator_accreditation"
storageRef={firebase.onboardStorage().ref(`${uid}/files`)}
onUploadStart={this.handleUploadStart}
onUploadError={this.handleUploadError}
onUploadSuccess={this.handleUploadSuccess}
onProgress={this.handleProgress}
/>
关于javascript - storageRef.child 不是 firebase 中的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54232828/