使用react将文件上传到firebase-firestore

使用React将文件上传到Firebase Firestore可以通过以下步骤完成：

首先，确保已经创建了一个Firebase项目并设置了Firestore数据库。可以在Firebase控制台中创建项目并启用Firestore。
在React项目中安装Firebase SDK。可以使用以下命令安装Firebase和Firebase Firestore依赖：

npm install firebase

在React组件中导入Firebase和Firebase Firestore库：

import firebase from 'firebase/app';
import 'firebase/firestore';

初始化Firebase应用。在组件的生命周期方法中，使用Firebase的配置信息初始化应用：

componentDidMount() {
  const firebaseConfig = {
    // Firebase配置信息
  };

  firebase.initializeApp(firebaseConfig);
}

创建一个文件上传的表单。可以使用React的表单组件创建一个包含文件选择器的表单：

class FileUploadForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      file: null,
    };
  }

  handleFileChange = (event) => {
    this.setState({
      file: event.target.files[0],
    });
  }

  handleUpload = () => {
    const { file } = this.state;
    const storageRef = firebase.storage().ref();
    const fileRef = storageRef.child(file.name);

    fileRef.put(file)
      .then(() => {
        console.log('File uploaded successfully');
      })
      .catch((error) => {
        console.error('Error uploading file:', error);
      });
  }

  render() {
    return (
      <div>
        <input type="file" onChange={this.handleFileChange} />
        <button onClick={this.handleUpload}>Upload</button>
      </div>
    );
  }
}

在Firestore中保存文件的URL。在文件上传成功后，可以将文件的URL保存到Firestore中以便后续使用：

handleUpload = () => {
  const { file } = this.state;
  const storageRef = firebase.storage().ref();
  const fileRef = storageRef.child(file.name);

  fileRef.put(file)
    .then((snapshot) => {
      return snapshot.ref.getDownloadURL();
    })
    .then((downloadURL) => {
      const firestore = firebase.firestore();
      firestore.collection('files').add({
        name: file.name,
        url: downloadURL,
      });
      console.log('File uploaded successfully');
    })
    .catch((error) => {
      console.error('Error uploading file:', error);
    });
}

显示已上传的文件列表。可以从Firestore中获取已上传文件的列表，并在React组件中显示它们：

class FileList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      files: [],
    };
  }

  componentDidMount() {
    const firestore = firebase.firestore();
    firestore.collection('files').get()
      .then((querySnapshot) => {
        const files = [];
        querySnapshot.forEach((doc) => {
          files.push(doc.data());
        });
        this.setState({ files });
      })
      .catch((error) => {
        console.error('Error getting files:', error);
      });
  }

  render() {
    const { files } = this.state;

    return (
      <ul>
        {files.map((file) => (
          <li key={file.name}>
            <a href={file.url} target="_blank" rel="noopener noreferrer">{file.name}</a>
          </li>
        ))}
      </ul>
    );
  }
}

通过以上步骤，你可以使用React将文件上传到Firebase Firestore，并在React组件中显示已上传的文件列表。请注意，这里的示例代码中使用了Firebase的Storage和Firestore功能，你可以根据实际需求调整代码。

使用react将文件上传到firebase-firestore

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐