快速实现上传进度条功能

1,346 阅读2分钟

在现代的Web应用程序中,文件上传是一个很常见的需求。上传进度条是一种用于告知用户上传进度的工具,它可以让用户了解上传进度,以便他们可以知道何时可以继续执行其他任务。在本教程中,我们将学习如何使用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="#" 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实现文件上传进度条功能的全部过程。

进度条只是优化交互体验的一种方式,有时间会出一篇分片上传的文章,着手解决大文件上传的问题。

分片上传文章已更新juejin.cn/post/721140…