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

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

　　前端启动之后,启动后台 node app 即可实现 

以上就是react显示文件上传进度的示例的详细内容，更多关于react显示文件上传进度的资料请关注其它相关文章！