返回

React + Node.js 全栈实战：打造文件上传管理后台

前端

在这个数字时代，文件上传管理系统已成为许多企业不可或缺的一部分。它们使企业能够安全、高效地存储、管理和共享大量文件。在这篇全面的教程中，我们将深入探究如何使用 React 和 Node.js 构建一个健壮的文件上传管理后台。

介绍

本教程旨在为开发人员提供一步步的指南，让他们能够构建一个功能齐全的文件上传管理后台。我们将涵盖从设置后端到设计前端界面的所有内容。随着我们的深入，我们将探讨 React 和 Node.js 的强大功能，并了解它们在全栈开发中的协同作用。

先决条件

在继续之前，确保您的系统满足以下先决条件：

  • Node.js 16.x 或更高版本
  • npm 或 yarn 包管理器
  • MongoDB 数据库
  • 文本编辑器或 IDE

后端设置

我们的后台将使用 Node.js 和 MongoDB 构建。按照以下步骤进行设置：

  1. 使用 npm 或 yarn 安装 Node.js 和 MongoDB 驱动程序：
npm install express mongoose multer
  1. 创建一个新的 Node.js 项目并初始化 MongoDB：
mkdir file-upload-backend
cd file-upload-backend
npm init -y
  1. 安装 Express 框架和 Multer 中间件：
npm install express multer
  1. 创建一个名为 server.js 的文件，包含以下代码：
const express = require('express');
const mongoose = require('mongoose');
const multer = require('multer');

const app = express();
app.use(express.json());

const storage = multer.diskStorage({
  destination: './uploads/',
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  },
});

const upload = multer({ storage });

mongoose.connect('mongodb://localhost:27017/file-upload', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

app.post('/upload', upload.single('file'), (req, res) => {
  res.json({
    success: true,
    file: req.file,
  });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});
  1. 运行服务器：
node server.js

前端开发

我们的前端将使用 React 构建。按照以下步骤进行设置：

  1. 使用 create-react-app 创建一个新的 React 项目：
create-react-app file-upload-frontend
  1. 安装 axios 用于 HTTP 请求：
npm install axios
  1. 在 src 目录中创建以下组件：
  • App.js：主组件
  • FileUploadForm.js：文件上传表单
  • FileList.js：文件列表
  1. 在 App.js 中，导入其他组件并处理状态：
import FileUploadForm from './FileUploadForm';
import FileList from './FileList';

const App = () => {
  const [files, setFiles] = useState([]);

  const handleFileUpload = (data) => {
    setFiles([...files, data.file]);
  };

  return (
    <div className="container">
      <FileUploadForm onFileUpload={handleFileUpload} />
      <FileList files={files} />
    </div>
  );
};
  1. 在 FileUploadForm.js 中，创建文件上传表单：
import axios from 'axios';

const FileUploadForm = ({ onFileUpload }) => {
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('file', e.target.files[0]);

    axios.post('http://localhost:3000/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    })
    .then((res) => {
      onFileUpload(res.data);
    })
    .catch((err) => {
      console.log(err);
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" name="file" />
      <button type="submit">Upload</button>
    </form>
  );
};
  1. 在 FileList.js 中，显示文件列表：
const FileList = ({ files }) => {
  return (
    <ul>
      {files.map((file) => (
        <li key={file.name}>{file.name}</li>
      ))}
    </ul>
  );
};
  1. 在 index.js 中，启动 React 应用程序：
ReactDOM.render(<App />, document.getElementById('root'));

运行应用程序

  1. 在一个终端中，运行后端服务器：
node server.js
  1. 在另一个终端中，切换到前端目录并运行 React 应用程序：
cd file-upload-frontend
npm start

  1. 打开浏览器并导航至 http://localhost:3000。您应该看到一个带有文件上传表单和文件列表的页面。

  2. 选择一个文件并单击“上传”。文件将上传到后端并显示在文件列表中。

总结

我们已经成功地构建了一个健壮的文件上传管理后台，使用 React 和 Node.js 全栈技术。通过遵循本教程，您已经获得了在自己的项目中实施类似系统的知识和技能。随着您不断探索 React 和 Node.js 的潜力，您可以创建更强大、更有用的应用程序，从而为您的用户带来价值。