React和Node.js怎么實現快速上傳進度條功能

本文小編為大家詳細介紹“React和Node.js怎么實現快速上傳進度條功能”，內容詳細，步驟清晰，細節處理妥當，希望這篇“React和Node.js怎么實現快速上傳進度條功能”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

技術棧

• React: 一個流行的JavaScript庫，用于構建用戶界面。

• Node.js: 一個基于JavaScript運行的開放源代碼、跨平臺、輕量級的運行時環境。

• Koa2: 一個基于Node.js平臺的Web開發框架，提供了更簡潔、更強大的API。

實現過程

1. 前端

import React, { useState } from 'react';
import axios from 'axios';
function UploadForm() {
  const [selectedFile, setSelectedFile] = useState(null);
  const [uploadProgress, setUploadProgress] = useState(0);
  const [uploadedFile, setUploadedFile] = useState(null);
  const handleFileSelect = (event) => {
    setSelectedFile(event.target.files[0]);
  };
  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append('file', selectedFile);
    const config = {
      onUploadProgress: (progressEvent) => {
        const percentCompleted = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        );
        setUploadProgress(percentCompleted);
      },
    };
    try {
      const response = await axios.post('/api/upload', formData, config);
      setUploadedFile(response.data.filename);
      setSelectedFile(null);
      setUploadProgress(0);
    } catch (error) {
      console.log(error);
    }
  };
  const handleDownload = async () => {
    try {
      const response = await axios.get(`/api/download?filename=${uploadedFile}`, {
        responseType: 'blob',
      });
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', uploadedFile);
      document.body.appendChild(link);
      link.click();
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="file" onChange={handleFileSelect} />
        <button type="submit">Upload</button>
      </form>
      {selectedFile && (
        <div>
          Uploading {selectedFile.name}: {uploadProgress}%
        </div>
      )}
      {uploadedFile && (
        <div>
          File uploaded: <a href="#" rel="external nofollow"  onClick={handleDownload}>{uploadedFile}</a>
        </div>
      )}
    </div>
  );
}
export default UploadForm;

我們首先定義了一個UploadForm組件，它包含一個表單和一些狀態變量。當用戶選擇文件時，我們將文件保存在狀態中。當用戶提交表單時，我們將使用axios庫將文件上傳到服務器，并通過狀態變量跟蹤上傳進度。如果上傳成功，我們將保存文件名并將狀態變量重置為初始值。

當文件上傳成功后，我們會在頁面上顯示一個下載鏈接，當用戶單擊該鏈接時，我們將使用axios庫從服務器下載文件，并將其保存到用戶的計算機上。

2. 后端服務（server.js）

const Koa = require("koa");
const Router = require("koa-router");
const koaBody = require("koa-body");
const cors = require("@koa/cors");
const fs = require("fs");
const path = require("path");
const app = new Koa();
const router = new Router();
// 配置跨域
app.use(cors());
// 配置Koa Body中間件以處理文件上傳
app.use(
  koaBody({
    multipart: true,
    formidable: {
      uploadDir: path.join(__dirname, "uploads"),
      keepExtensions: true,
    },
  })
);
// 上傳接口
router.post("/api/upload", async (ctx) => {
  const file = ctx.request.files.file;
  const filename = file.name;
  const filepath = file.path || file.filepath;
  // 計算文件大小
  const fileSizeInBytes = fs.statSync(filepath).size;
  const fileSizeInMegabytes = fileSizeInBytes / (1024 * 1024);
  ctx.body = {
    filename,
    size: fileSizeInMegabytes.toFixed(2),
  };
});
// 下載接口
router.get("/api/download", async (ctx) => {
  const filename = ctx.query.filename;
  const filepath = path.join(__dirname, "uploads", filename);
  const fileStream = fs.createReadStream(filepath);
  ctx.response.attachment(filename);
  ctx.body = fileStream;
});
app.use(router.routes());
app.use(router.allowedMethods());
// 啟動！
const port = process.env.PORT || 3001;
app.listen(port, () => {
  console.log(`Server started on port ${port}`);
});

我們首先引入所需的模塊，然后創建一個Koa實例，并將其與一個路由器實例連接。我們啟用CORS，以便從任何域都可以訪問我們的API。

我們使用koa-body中間件來處理文件上傳。這個中間件會將文件存儲在本地文件系統中，并將文件元數據附加到請求對象上。

我們定義了兩個路由處理程序，一個用于處理文件上傳，另一個用于處理文件下載。在文件上傳處理程序中，我們從請求對象中獲取上傳的文件，并將文件名和大小發送回客戶端。在文件下載處理程序中，我們讀取文件并將其發送回客戶端。

我們最后將路由器連接到Koa應用程序實例，并在端口3001上啟動服務器。

現在我們已經完成了整個應用程序的開發。我們可以使用以下命令啟動服務器和客戶端：

// 前端
npm run start
//服務端
node server.js

讀到這里，這篇“React和Node.js怎么實現快速上傳進度條功能”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。