服务器之家：专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - React - react显示文件上传进度的示例

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

2022-03-03 17:03阿政想暴富 React

这篇文章主要介绍了react显示文件上传进度的示例，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下

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

react上传文件显示进度 demo

前端 快速安装react应用

?
1
2
3
4
5
6
7
确保有node环境
 
npx create-react-app my-app //当前文件夹创建my-app文件
cd my-app //进入目录
npm install antd  //安装antd UI组件
 
npm run start //启动项目

src-> App.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
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
2
3
4
5
6
7
8
1.先创建文件夹webSever
  cd webSever
  npm -init -y  //创建package.json文件
 
2.安装express 以及文件上传需要的包
  npm install express multer ejs
 
3.创建app.js

app.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
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显示文件上传进度的资料请关注服务器之家其它相关文章！

原文链接：https://www.cnblogs.com/kongyijilafumi/p/13293409.html

  • React
  • 上传
  • 文件
  • 进度

    • 延伸 · 阅读

    精彩推荐
    • ReactReact实现一个高度自适应的虚拟列表

      React实现一个高度自适应的虚拟列表

      这篇文章主要介绍了React如何实现一个高度自适应的虚拟列表，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下...

      抖音前端安全8952022-02-25
    • ReactReact三大属性之Refs的使用详解

      React三大属性之Refs的使用详解

      这篇文章主要介绍了React三大属性之Refs的使用详解，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下...

      xiaoznz8942022-03-02
    • React详解React中共享组件逻辑的三种方式

      详解React中共享组件逻辑的三种方式

      这篇文章主要介绍了详解React中共享组件逻辑的三种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋...

      Null20203692022-01-12
    • React一份全面的React、Angular和Vue.js比较指南

      一份全面的React、Angular和Vue.js比较指南

      首先让我们看看来自于Google趋势的有关React、Angular和Vue.js的对比。就过去一年的情况而言，Angular***，React名列其后，而Vue.js所占份额则最少。...

      51CTO5422022-02-23
    • React从框架作者角度聊：React调度算法的迭代过程

      从框架作者角度聊：React调度算法的迭代过程

      React内部最难理解的地方就是「调度算法」，不仅抽象、复杂，还重构了一次。可以说，只有React团队自己才能完全理解这套算法。既然这样，那本文尝试从...

      魔术师卡颂8172022-01-10
    • ReactReact 错误边界组件的处理

      React 错误边界组件的处理

      这篇文章主要介绍了React 错误边界组件的处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随...

      xuxiaowei8552022-02-28
    • React浅谈react路由传参的几种方式

      浅谈react路由传参的几种方式

      这篇文章主要介绍了浅谈react路由传参的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下...

      glorydx4622022-02-20
    • ReactReact+Ant Design开发环境搭建的实现步骤

      React+Ant Design开发环境搭建的实现步骤

      这篇文章主要介绍了React+Ant Design开发环境搭建的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋...

      qq_3341488311842022-02-24
    最近更新
    编辑推荐
    阅读排行
    热门标签
    Vditor 　 useMemo 　 useCallback 　 不可变值 　 错误边界 　 eject 　 create-react-app 　 useRef 　 Form组件 　 搭建工程 　 emotion 　 EffectList 　 Threejs 　 todolist 　 文档编写 　 ReactRouter 　 共享组件 　 代码分割 　 setState 　 PReact 　 zarm 　 cloneElement 　 ErrorBoundary 　
    © 2019-2022 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图