React和Node.js快速上传进度条功能实现
作者:XinD
正文
在现代的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="#" 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实现文件上传进度条功能的全部过程。
以上就是React和Node.js快速上传进度条功能实现的详细内容,更多关于React Node.js上传进度条的资料请关注脚本之家其它相关文章!