这篇文章给大家分享的是有关如何实现react显示文件上传进度demo的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
在使用react, vue框架的时候, 如果需要监听文件上传可以使用axios里的onUploadProgress.
react上传文件显示进度 demo
前端 快速安装react应用
确保有node环境npx create-react-app my-app //当前文件夹创建my-app文件cd my-app //进入目录npm install antd //安装antd UI组件npm run start //启动项目
src-> App.js
import React from 'react';import 'antd/dist/antd.css';import { Upload, message, Button, Progress } from 'antd';import { UploadOutlined } from '@ant-design/icons';import axios from "axios"axios.defaults.withCredentials = trueclass App extends React.Component { constructor(props) { super(props) this.state = { fileList: [], uploading: false, filseSize: 0, baifenbi: 0 } } //文件上传改变的时候 configs = { headers: { 'Content-Type': 'multipart/form-data' }, withCredentials: true, onUploadProgress: (progress) => { console.log(progress); let { loaded } = progress let { filseSize } = this.state console.log(loaded, filseSize); let baifenbi = (loaded / filseSize * 100).toFixed(2) this.setState({ baifenbi }) } } //点击上传 handleUpload = () => { const { fileList } = this.state; const formData = new FormData(); fileList.forEach(file => { formData.append('files[]', file); }); this.setState({ uploading: true, }); //请求本地服务 axios.post("http://127.0.0.1:5000/upload", formData, this.configs).then(res => { this.setState({ baifenbi: 100, uploading: false, fileList: [] }) }).finally(log => { console.log(log); }) } onchange = (info) => { if (info.file.status !== 'uploading') { this.setState({ filseSize: info.file.size, baifenbi: 0 }) } if (info.file.status === 'done') { message.success(`${info.file.name} file uploaded successfully`); } else if (info.file.status === 'error') { message.error(`${info.file.name} file upload failed.`); } } render() { const { uploading, fileList } = this.state; const props = { onRemove: file => { this.setState(state => { const index = state.fileList.indexOf(file); const newFileList = state.fileList.slice(); newFileList.splice(index, 1); return { fileList: newFileList, }; }); }, beforeUpload: file => { this.setState(state => ({ fileList: [...state.fileList, file], })); return false; }, fileList, }; return ( <div style={{ width: "80%", margin: 'auto', padding: 20 }}> <h3>{this.state.baifenbi + '%'}</h3> <Upload onChange={(e) => { this.onchange(e) }} {...props}> <Button> <UploadOutlined /> Click to Upload </Button> </Upload> <Button type="primary" onClick={this.handleUpload} disabled={fileList.length === 0} loading={uploading} style={{ marginTop: 16 }} > {uploading ? 'Uploading' : 'Start Upload'} </Button> <Progress style={{ marginTop: 20 }} status={this.state.baifenbi !== 0 ? 'success' : ''} percent={this.state.baifenbi}></Progress> </div > ) }}export default App;
后台 使用express搭载web服务器
1.先创建文件夹webSever cd webSever npm -init -y //创建package.json文件2.安装express 以及文件上传需要的包 npm install express multer ejs3.创建app.js
app.js
var express = require('express');var app = express();var path = require('path');var fs = require('fs')var multer = require('multer')//设置跨域访问app.all("*", function (req, res, next) { //设置允许跨域的域名,*代表允许任意域名跨域 res.header("Access-Control-Allow-Origin", req.headers.origin || '*'); // //允许的header类型 res.header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With"); // //跨域允许的请求方式 res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); // 可以带cookies res.header("Access-Control-Allow-Credentials", true); if (req.method == 'OPTIONS') { res.sendStatus(200); } else { next(); }})app.use(express.static(path.join(__dirname, 'public')));//模板引擎app.set('views', path.join(__dirname, 'views'));app.set('view engine', 'ejs');app.get("/", (req, res, next) => { res.render("index")})//上传文件app.post('/upload', (req, res, next) => { var upload = multer({ dest: 'upload/' }).any(); upload(req, res, err => { if (err) { console.log(err); return } let file = req.files[0] let filname = file.originalname var oldPath = file.path var newPath = path.join(process.cwd(), "upload/" + new Date().getTime()+filname) var src = fs.createReadStream(oldPath); var dest = fs.createWriteStream(newPath); src.pipe(dest); src.on("end", () => { let filepath = path.join(process.cwd(), oldPath) fs.unlink(filepath, err => { if (err) { console.log(err); return } res.send("ok") }) }) src.on("error", err => { res.end("err") }) }) }) app.use((req, res) => { res.send("404")})app.listen(5000)
前端启动之后,启动后台 node app 即可实现
感谢各位的阅读!关于“如何实现react显示文件上传进度demo”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!