如何实现react显示文件上传进度demo

这篇文章给大家分享的是有关如何实现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”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！