Android端PDF上传至Firebase及跨用户下载功能实现咨询

Hey there! Building a PDF upload-and-download app is totally doable—let’s break down the step-by-step implementation with practical examples, plus key considerations for production.

1. Pick Your Tech Stack #

First, choose tools that align with your familiarity and project needs. A common, beginner-friendly combo looks like this:

• Backend: Node.js + Express (lightweight, easy to set up) or Python + Django/Flask (great for larger apps with built-in auth)
• Frontend: React/Vue (for dynamic UIs) or plain HTML/JS (for simpler use cases)
• File Storage: Local filesystem (for testing only) or cloud storage (AWS S3, Alibaba Cloud OSS—production-grade)
• Database: PostgreSQL/MySQL (stores file metadata like filenames, upload dates, and storage paths/URLs)

2. Backend Setup (Node.js + Express Example) #

Let’s walk through building the core APIs for uploads and downloads.

2.1 Install Dependencies #

First, install required packages:

npm install express multer cors pg

• multer: Handles file uploads
• cors: Fixes cross-domain frontend/backend issues
• pg: Connects to PostgreSQL

2.2 Database Table Design #

Create a pdf_files table to track your PDFs. Here’s a sample schema:

CREATE TABLE pdf_files (
  id SERIAL PRIMARY KEY,
  filename VARCHAR(255) NOT NULL,
  storage_path VARCHAR(500) NOT NULL,
  uploader_id INT, -- Optional: link to a users table if you add auth
  upload_time TIMESTAMP DEFAULT NOW()
);

2.3 Build the Upload API #

This endpoint accepts PDF files, stores them, and saves metadata to the database:

const express = require('express');
const multer = require('multer');
const { Pool } = require('pg');
const cors = require('cors');

const app = express();
app.use(cors()); // Restrict to your frontend domain in production!

// Configure file storage (local for testing)
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, './uploads/'); // Create this folder first!
  },
  filename: (req, file, cb) => {
    // Generate a unique filename to avoid overwrites
    const uniqueName = `${Date.now()}-${Math.round(Math.random() * 1e9)}.pdf`;
    cb(null, uniqueName);
  }
});

// Restrict uploads to only PDFs
const upload = multer({
  storage: storage,
  fileFilter: (req, file, cb) => {
    if (file.mimetype !== 'application/pdf') {
      return cb(new Error('Only PDF files are allowed!'), false);
    }
    cb(null, true);
  },
  limits: { fileSize: 10 * 1024 * 1024 } // Limit to 10MB
});

// Connect to PostgreSQL
const pool = new Pool({
  user: 'your_db_user',
  host: 'localhost',
  database: 'pdf_app',
  password: 'your_db_password',
  port: 5432
});

// Upload endpoint
app.post('/api/upload', upload.single('pdf'), async (req, res) => {
  try {
    const { filename, path } = req.file;
    // Save metadata to DB
    const result = await pool.query(
      'INSERT INTO pdf_files (filename, storage_path) VALUES ($1, $2) RETURNING *',
      [filename, path]
    );
    res.status(201).json({ message: 'PDF uploaded!', file: result.rows[0] });
  } catch (err) {
    console.error(err);
    res.status(500).json({ message: 'Upload failed. Try again.' });
  }
});

2.4 Build the Download API #

This endpoint fetches a PDF by ID and triggers a download for the user:

// Get all files (for frontend list)
app.get('/api/files', async (req, res) => {
  try {
    const result = await pool.query('SELECT * FROM pdf_files');
    res.json(result.rows);
  } catch (err) {
    res.status(500).json({ message: 'Failed to load files' });
  }
});

// Download single file
app.get('/api/download/:fileId', async (req, res) => {
  try {
    const { fileId } = req.params;
    const result = await pool.query('SELECT * FROM pdf_files WHERE id = $1', [fileId]);
    
    if (result.rows.length === 0) {
      return res.status(404).json({ message: 'File not found' });
    }

    const file = result.rows[0];
    res.download(file.storage_path, file.filename); // Uses original filename for download
  } catch (err) {
    res.status(500).json({ message: 'Download failed' });
  }
});

app.listen(3001, () => console.log('Backend running on port 3001'));

3. Frontend Setup (React Example) #

Let’s build simple components for uploading PDFs and browsing/downloading them.

3.1 Upload Component #

import { useState } from 'react';

function PDFUploader() {
  const [selectedFile, setSelectedFile] = useState(null);
  const [status, setStatus] = useState('');

  const handleFileSelect = (e) => {
    const file = e.target.files[0];
    if (file && file.type === 'application/pdf') {
      setSelectedFile(file);
      setStatus('');
    } else {
      setStatus('Please select a valid PDF file');
    }
  };

  const handleUpload = async () => {
    if (!selectedFile) return;
    const formData = new FormData();
    formData.append('pdf', selectedFile);

    try {
      const res = await fetch('http://localhost:3001/api/upload', {
        method: 'POST',
        body: formData
      });
      const data = await res.json();
      setStatus(data.message);
    } catch (err) {
      setStatus('Upload failed. Check your connection.');
    }
  };

  return (
    <div className="upload-container">
      <input type="file" accept=".pdf" onChange={handleFileSelect} />
      <button onClick={handleUpload} disabled={!selectedFile}>Upload PDF</button>
      {status && <p>{status}</p>}
    </div>
  );
}

export default PDFUploader;

3.2 File List & Download Component #

import { useState, useEffect } from 'react';

function PDFFileList() {
  const [files, setFiles] = useState([]);
  const [error, setError] = useState('');

  useEffect(() => {
    const fetchFiles = async () => {
      try {
        const res = await fetch('http://localhost:3001/api/files');
        const data = await res.json();
        setFiles(data);
      } catch (err) {
        setError('Failed to load PDF list');
      }
    };
    fetchFiles();
  }, []);

  return (
    <div className="file-list">
      <h2>Available PDFs</h2>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <ul>
        {files.map(file => (
          <li key={file.id}>
            <span>{file.filename}</span>
            <a href={`http://localhost:3001/api/download/${file.id}`} download>
              Download
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PDFFileList;

4. Production-Grade Improvements #

• Cloud Storage: Replace local storage with AWS S3 or similar—store the cloud URL in your database instead of a local path.
• User Auth: Add JWT or OAuth to restrict uploads/downloads to registered users (link uploader_id in your pdf_files table to a users table).
• Virus Scanning: Integrate tools like ClamAV to scan uploaded PDFs for malware.
• Rate Limiting: Prevent abuse with rate limiting on upload/download endpoints.
• CORS Hardening: Replace cors() with a specific origin (e.g., cors({ origin: 'https://your-frontend.com' })).

5. No-Code/Low-Code Alternative #

If you don’t want to build a backend from scratch, use BaaS tools like Firebase Storage + Firestore or Supabase. These services handle file storage and database management out of the box—you just call their frontend APIs to upload/download files.

内容的提问来源于stack exchange，提问作者nikhil arora