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

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 = true

									class 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 }}>

									        <h2>{this.state.baifenbi + '%'}</h2>

									        <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 ejs

									3.创建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)