Question

使用 react-firebase-file-uploader 包将文件上传到Firebase时出现问题。

收到的错误是Uncaught (in promise) TypeError: storageRef.child is not a function

首先，将firebase作为

导入到Layout.js中我的GatsbyJS 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，并将const FirebaseContext = React.createContext(null); export const withFirebase = Component => props => ( <FirebaseContext.Consumer> {firebase => <Component {...props} firebase={firebase} />} </FirebaseContext.Consumer> ); export default FirebaseContext;传递给组件，

FirebaseContext.js

firebase

在onboardStorage组件内部，我们使用this.storage作为包含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;的函数

Firebase.js

FileUploader

然后将哪个传递给我的表单组件中的<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 }));
  };

Form.js 中的每个句柄函数如下

const uid

auth.uid是console

添加一条storageRef消息表示上载文件时未触发任何消息。

选择文件后发生错误，表明问题出在FileUploader的{{1}}上。我得到Uncaught (in promise) TypeError: storageRef.child is not a function做错了什么？

Answer 1

我有一个类似的问题。问题是您将一个函数作为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}
/>

storageRef.child不是Firebase中的函数

1 个答案: