• 售前

  • 售后

热门帖子
入门百科

react显示文件上传进度的示例

[复制链接]
李志敏 显示全部楼层 发表于 2021-10-26 13:08:00 |阅读模式 打印 上一主题 下一主题
目次


  • react上传文件显示进度 demo

    • 前端 快速安装react应用
    • src-> App.js
    • 背景 利用express搭载web服务器
    • app.js

Axios 是一个基于 promise 的 HTTP 库,可以用在欣赏器和 node.js 中。
在利用react, vue框架的时间, 如果需要监听文件上传可以利用axios里的onUploadProgress.

react上传文件显示进度 demo



前端 快速安装react应用
  1. 确保有node环境
  2. npx create-react-app my-app //当前文件夹创建my-app文件
  3. cd my-app //进入目录
  4. npm install antd  //安装antd UI组件
  5. npm run start //启动项目
复制代码
src-> App.js
  1. import React from 'react';
  2. import 'antd/dist/antd.css';
  3. import { Upload, message, Button, Progress } from 'antd';
  4. import { UploadOutlined } from '@ant-design/icons';
  5. import axios from "axios"
  6. axios.defaults.withCredentials = true
  7. class App extends React.Component {
  8.   constructor(props) {
  9.     super(props)
  10.     this.state = {
  11.       fileList: [],
  12.       uploading: false,
  13.       filseSize: 0,
  14.       baifenbi: 0
  15.     }
  16.   }
  17.   //文件上传改变的时候
  18.   configs = {
  19.     headers: { 'Content-Type': 'multipart/form-data' },
  20.     withCredentials: true,
  21.     onUploadProgress: (progress) => {
  22.       console.log(progress);
  23.       let { loaded } = progress
  24.       let { filseSize } = this.state
  25.       console.log(loaded, filseSize);
  26.       let baifenbi = (loaded / filseSize * 100).toFixed(2)
  27.       this.setState({
  28.         baifenbi
  29.       })
  30.     }
  31.   }
  32.   //点击上传
  33.   handleUpload = () => {
  34.     const { fileList } = this.state;
  35.     const formData = new FormData();
  36.     fileList.forEach(file => {
  37.       formData.append('files[]', file);
  38.     });
  39.     this.setState({
  40.       uploading: true,
  41.     });
  42.     //请求本地服务
  43.     axios.post("http://127.0.0.1:5000/upload", formData, this.configs).then(res => {
  44.       this.setState({
  45.         baifenbi: 100,
  46.         uploading: false,
  47.         fileList: []
  48.       })
  49.     }).finally(log => {
  50.       console.log(log);
  51.     })
  52.   }
  53.   onchange = (info) => {
  54.     if (info.file.status !== 'uploading') {
  55.       this.setState({
  56.         filseSize: info.file.size,
  57.         baifenbi: 0
  58.       })
  59.     }
  60.     if (info.file.status === 'done') {
  61.       message.success(`${info.file.name} file uploaded successfully`);
  62.     } else if (info.file.status === 'error') {
  63.       message.error(`${info.file.name} file upload failed.`);
  64.     }
  65.   }
  66.   render() {
  67.     const { uploading, fileList } = this.state;
  68.     const props = {
  69.       onRemove: file => {
  70.         this.setState(state => {
  71.           const index = state.fileList.indexOf(file);
  72.           const newFileList = state.fileList.slice();
  73.           newFileList.splice(index, 1);
  74.           return {
  75.             fileList: newFileList,
  76.           };
  77.         });
  78.       },
  79.       beforeUpload: file => {
  80.         this.setState(state => ({
  81.           fileList: [...state.fileList, file],
  82.         }));
  83.         return false;
  84.       },
  85.       fileList,
  86.     };
  87.     return (
  88.       <div style={{ width: "80%", margin: 'auto', padding: 20 }}>
  89.         <h2>{this.state.baifenbi + '%'}</h2>
  90.         <Upload onChange={(e) => { this.onchange(e) }} {...props}>
  91.           <Button>
  92.             <UploadOutlined /> Click to Upload
  93.           </Button>
  94.         </Upload>
  95.         <Button
  96.           type="primary"
  97.           onClick={this.handleUpload}
  98.           disabled={fileList.length === 0}
  99.           loading={uploading}
  100.           style={{ marginTop: 16 }}
  101.         >
  102.           {uploading ? 'Uploading' : 'Start Upload'}
  103.         </Button>
  104.         <Progress style={{ marginTop: 20 }} status={this.state.baifenbi !== 0 ? 'success' : ''} percent={this.state.baifenbi}></Progress>
  105.       </div >
  106.     )
  107.   }
  108. }
  109. export default App;
复制代码
背景 利用express搭载web服务器
  1. 1.先创建文件夹webSever
  2.   cd webSever
  3.   npm -init -y  //创建package.json文件
  4. 2.安装express 以及文件上传需要的包
  5.   npm install express multer ejs
  6. 3.创建app.js
复制代码
app.js
  1. var express = require('express');
  2. var app = express();
  3. var path = require('path');
  4. var fs = require('fs')
  5. var multer = require('multer')
  6. //设置跨域访问
  7. app.all("*", function (req, res, next) {
  8.     //设置允许跨域的域名,*代表允许任意域名跨域
  9.     res.header("Access-Control-Allow-Origin", req.headers.origin || '*');
  10.     // //允许的header类型
  11.     res.header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With");
  12.     // //跨域允许的请求方式
  13.     res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  14.     // 可以带cookies
  15.     res.header("Access-Control-Allow-Credentials", true);
  16.     if (req.method == 'OPTIONS') {
  17.         res.sendStatus(200);
  18.     } else {
  19.         next();
  20.     }
  21. })
  22. app.use(express.static(path.join(__dirname, 'public')));
  23. //模板引擎
  24. app.set('views', path.join(__dirname, 'views'));
  25. app.set('view engine', 'ejs');
  26. app.get("/", (req, res, next) => {
  27.     res.render("index")
  28. })
  29. //上传文件
  30. app.post('/upload', (req, res, next) => {
  31.     var upload = multer({ dest: 'upload/' }).any();
  32.   
  33.     upload(req, res, err => {
  34.       if (err) {
  35.         console.log(err);
  36.         return
  37.       }
  38.       let file = req.files[0]
  39.       let filname = file.originalname
  40.       var oldPath = file.path
  41.       var newPath = path.join(process.cwd(), "upload/" + new Date().getTime()+filname)
  42.       var src = fs.createReadStream(oldPath);
  43.       var dest = fs.createWriteStream(newPath);
  44.       src.pipe(dest);
  45.       src.on("end", () => {
  46.         let filepath = path.join(process.cwd(), oldPath)
  47.         fs.unlink(filepath, err => {
  48.           if (err) {
  49.             console.log(err);
  50.             return
  51.           }
  52.           res.send("ok")
  53.         })
  54.   
  55.       })
  56.       src.on("error", err => {
  57.         res.end("err")
  58.       })
  59.   
  60.     })
  61.   
  62.   })
  63.   
  64. app.use((req, res) => {
  65.     res.send("404")
  66. })
  67. app.listen(5000)
复制代码
  前端启动之后,启动背景 node app 即可实现
以上就是react显示文件上传进度的示例的详细内容,更多关于react显示文件上传进度的资料请关注草根技术分享别的相干文章!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作