如何使用React上传文件至Firebase？含无需用户输入的后端上传方案

你的现有代码已经实现了基础的文件上传功能，下面是对代码的解释和优化版本：

核心逻辑说明 #

1. 初始化Firebase存储：通过import storage from './firebase'引入已配置好的Firebase Storage实例（确保你的firebase.js已经完成Firebase初始化和存储模块的导出）。
2. 文件选择处理：用<input type="file">获取用户选择的文件，通过onChange事件将文件对象存入组件状态image。
3. 上传操作：调用storage.ref()指定存储路径，用put()方法上传文件，通过on("state_changed")监听上传状态。

优化后的代码 #

原代码里的alert("success")会在调用on时立即执行，而非上传成功后触发，这里修正为回调函数，同时增加进度监听和完整的错误处理：

import { useState } from 'react';
import storage from './firebase';

function App() {
  const [image, setImage] = useState(null);
  const [uploadProgress, setUploadProgress] = useState(0);

  const upload = () => {
    if (!image) return;

    const storageRef = storage.ref(`/images/${image.name}`);
    const uploadTask = storageRef.put(image);

    uploadTask.on(
      "state_changed",
      (snapshot) => {
        // 计算上传进度
        const progress = Math.round(
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        );
        setUploadProgress(progress);
      },
      (error) => {
        // 处理上传错误
        console.error('上传失败:', error);
        alert(`上传失败: ${error.message}`);
      },
      () => {
        // 上传完成后的操作，比如获取文件下载链接
        uploadTask.snapshot.ref.getDownloadURL().then((url) => {
          console.log('文件可用地址:', url);
          alert('上传成功！');
        });
      }
    );
  };

  return (
    <div className="App">
      <center>
        <input type="file" onChange={(e) => setImage(e.target.files[0])} />
        <button onClick={upload} disabled={!image}>上传</button>
        {uploadProgress > 0 && <p>上传进度: {uploadProgress}%</p>}
      </center>
    </div>
  );
}

export default App;

注意：前端无法直接访问后端服务器上的本地文件，这种场景必须通过后端服务完成上传操作，推荐使用Firebase Admin SDK实现。

实现步骤（以Node.js后端为例） #

1. 安装Firebase Admin SDK

npm install firebase-admin

2. 初始化Admin SDK
   在后端项目中创建firebase-admin.js，配置并初始化：

const admin = require('firebase-admin');
const serviceAccount = require('./path-to-your-service-account-key.json');

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  storageBucket: 'your-project-id.appspot.com' // 替换为你的存储桶地址
});

const bucket = admin.storage().bucket();
module.exports = bucket;

3. 上传后端本地文件
   编写上传函数，直接读取后端存储的文件并上传至Firebase Storage：

const bucket = require('./firebase-admin');
const fs = require('fs');

async function uploadBackendFile() {
  const localFilePath = './path-to-your-backend-file/example.jpg'; // 后端文件路径
  const destinationPath = 'backend-uploads/example.jpg'; // Firebase中的存储路径

  try {
    await bucket.upload(localFilePath, {
      destination: destinationPath,
      metadata: {
        contentType: 'image/jpeg' // 根据文件类型设置MIME类型
      }
    });
    console.log('文件上传成功');

    // 可选：获取文件的公共访问链接
    const file = bucket.file(destinationPath);
    const [url] = await file.getSignedUrl({
      action: 'read',
      expires: '2030-01-01'
    });
    console.log('文件访问链接:', url);
  } catch (error) {
    console.error('上传失败:', error);
  }
}

// 调用上传函数
uploadBackendFile();

这段代码会直接读取后端服务器上的文件，无需用户交互即可完成上传操作。

内容的提问来源于stack exchange，提问作者divertiss Blogger