如何使用react将上传的文件url保存到firebase中

import firebase from 'firebase/app';
import 'firebase/storage';

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

firebase.initializeApp(firebaseConfig);

import React, { useState } from 'react';

const FileUploader = () => {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  const handleUpload = () => {
    if (selectedFile) {
      const storageRef = firebase.storage().ref();
      const fileRef = storageRef.child(selectedFile.name);

      fileRef.put(selectedFile)
        .then((snapshot) => {
          console.log('File uploaded successfully');
          // 获取上传文件的URL
          fileRef.getDownloadURL()
            .then((url) => {
              console.log('File URL:', url);
              // 在这里可以将URL保存到数据库或其他地方
            })
            .catch((error) => {
              console.error('Error getting file URL:', error);
            });
        })
        .catch((error) => {
          console.error('Error uploading file:', error);
        });
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>上传</button>
    </div>
  );
};

export default FileUploader;

import React from 'react';
import FileUploader from './FileUploader';

const App = () => {
  return (
    <div>
      <h1>文件上传</h1>
      <FileUploader />
    </div>
  );
};

export default App;