怎么使用Reactjs+Nodejs+Mongodb實現文件上傳功能

怎么使用Reactjs+Nodejs+Mongodb實現文件上傳功能

在現代Web應用中，文件上傳功能是一個非常常見的需求。本文將詳細介紹如何使用React.js作為前端框架，Node.js作為后端服務器，以及MongoDB作為數據庫，來實現一個簡單的文件上傳功能。

1. 項目結構

首先，我們需要創建一個基本的項目結構。項目將分為前端和后端兩部分：

file-upload/
│
├── client/               # 前端React應用
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── App.js
│   │   ├── index.js
│   ├── package.json
│
├── server/               # 后端Node.js應用
│   ├── models/
│   ├── routes/
│   ├── uploads/           # 存儲上傳的文件
│   ├── app.js
│   ├── package.json
│
├── .gitignore
├── README.md

2. 前端實現 (React.js)

2.1 創建React應用

首先，使用create-react-app創建一個新的React應用：

npx create-react-app client

2.2 創建文件上傳組件

在src/components/目錄下創建一個FileUpload.js組件：

import React, { useState } from 'react';
import axios from 'axios';

const FileUpload = () => {
  const [file, setFile] = useState(null);
  const [message, setMessage] = useState('');

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!file) {
      setMessage('請選擇一個文件');
      return;
    }

    const formData = new FormData();
    formData.append('file', file);

    try {
      const response = await axios.post('http://localhost:5000/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
      setMessage(response.data.message);
    } catch (error) {
      setMessage('文件上傳失敗');
    }
  };

  return (
    <div>
      <h2>文件上傳</h2>
      <form onSubmit={handleSubmit}>
        <input type="file" onChange={handleFileChange} />
        <button type="submit">上傳</button>
      </form>
      {message && <p>{message}</p>}
    </div>
  );
};

export default FileUpload;

2.3 在App.js中使用FileUpload組件

在src/App.js中引入并使用FileUpload組件：

import React from 'react';
import FileUpload from './components/FileUpload';

function App() {
  return (
    <div className="App">
      <FileUpload />
    </div>
  );
}

export default App;

3. 后端實現 (Node.js + MongoDB)

3.1 初始化Node.js項目

在server/目錄下初始化一個新的Node.js項目：

cd server
npm init -y

3.2 安裝依賴

安裝所需的依賴包：

npm install express mongoose multer cors

• express: Node.js的Web框架
• mongoose: MongoDB的ODM庫
• multer: 用于處理文件上傳的中間件
• cors: 用于處理跨域請求

3.3 創建Express應用

在server/app.js中創建一個基本的Express應用：

const express = require('express');
const mongoose = require('mongoose');
const multer = require('multer');
const cors = require('cors');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 5000;

// 連接MongoDB
mongoose.connect('mongodb://localhost:27017/fileUploadDB', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

// 定義文件模型
const fileSchema = new mongoose.Schema({
  filename: String,
  path: String,
});

const File = mongoose.model('File', fileSchema);

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

const upload = multer({ storage });

// 啟用CORS
app.use(cors());

// 文件上傳路由
app.post('/upload', upload.single('file'), async (req, res) => {
  try {
    const newFile = new File({
      filename: req.file.filename,
      path: req.file.path,
    });
    await newFile.save();
    res.status(200).json({ message: '文件上傳成功' });
  } catch (error) {
    res.status(500).json({ message: '文件上傳失敗' });
  }
});

// 啟動服務器
app.listen(PORT, () => {
  console.log(`服務器運行在 http://localhost:${PORT}`);
});

3.4 創建上傳目錄

在server/目錄下創建一個uploads/目錄，用于存儲上傳的文件。

mkdir uploads

4. 運行項目

4.1 啟動后端服務器

在server/目錄下運行：

node app.js

4.2 啟動前端應用

在client/目錄下運行：

npm start

5. 測試文件上傳功能

打開瀏覽器，訪問http://localhost:3000，選擇文件并點擊上傳按鈕。如果一切正常，文件將被上傳到server/uploads/目錄，并且文件信息將被保存到MongoDB中。

6. 總結

通過本文的介紹，我們使用React.js、Node.js和MongoDB實現了一個簡單的文件上傳功能。前端使用React.js構建用戶界面，后端使用Node.js處理文件上傳請求，并將文件信息存儲到MongoDB中。這個示例可以作為更復雜文件上傳功能的基礎，例如支持多文件上傳、文件類型限制、文件大小限制等。

希望本文對你有所幫助，祝你編碼愉快！