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显示文件上传进度的资料请关注程序员的世界其它相关文章!

react显示文件上传进度的示例的更多相关文章

  1. JavaScript/TypeScript 实现并发请求控制的示例代码

    场景假设有 10 个请求,但是最大的并发数目是 5 个,并且要求拿到请求结果,这样就是一个简单的并发请求控制模拟利用 setTimeout 实行简单模仿一个请求let startTime = Date.now();const timeout = (timeout: number, ret: numb......

  2. jQuery中toggle与slideToggle以及fadeToggle的显示、隐藏方法的比较

    1、区别 ①动画效果的比较: toggle:直接显示、隐藏,如果有【时间参数】且【匹配的元素有宽度属性】,则动态效果为左上角-右下角拉卷效果,透明度0-1之间的变化;若有时间参数但是【匹配的元素没有宽度属性】,则动态效果为上下拉卷的效果,且没有透明度的变化。 slideToggle:切换上下拉卷滚效......

  3. js面向对象封装级联下拉菜单列表

    本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素。点击文本框后,显示一级菜单。如果菜单中包含子菜单,菜单右侧会有指示箭头。点击菜单之后,会再显示下一级菜单,以此类推。当菜单下无子菜单时,选择菜单后会在文本框中显示。本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素。点击文本......

  4. javascript实现点击图片切换

    击实现图片切换效果在生活中非常的常见,恰巧今天的练习也是做一个图片的切换效果。HTML代码如下:<div class="img"><img src="images/1.jpg" id="myImg" class="......

  5. ES6在工作中会用到的核心知识点讲解

    一、var, let, const谈到ES6,估计大家首先肯定会想到var,let,const咱就先谈谈这三者的区别var a = 3;{var a = 4;}console.log(a);//4let b = 5;{let b = 6;}console.log(b);//5const c = 7;......

  6. CocosCreator如何实现划过的位置显示纹理

    1、项目需求项目需要有一个功能:是当一个光点走过的路径,这个路径的位置就都亮起来的功能。2、资料内容功能类似这位大神的橡皮擦功能:https://forum.cocos.org/t/2-0-8/74246但是,项目的需求还要经过的路径周围有模糊的外边——也就是从中心到边缘越来越暗。所以对于借鉴了网上......

  7. Canvas跟随鼠标炫彩小球的实现

    跟随鼠标炫彩小球canvas没有让我失望,真的很有意思实现效果超级炫酷实现原理创建小球给小球添加随机颜色,随机半径鼠标移动通过实例化,新增小球通过调用给原型新增的方法,来实现小球的动画效果通过定时器不断地更新画布实现过程创建小球通过创建函数收纳小球所有的样式,再通过实例化函数,将鼠标当前的位置传递给......

  8. 在JavaScript中查找字符串中最长单词的三种方法(推荐)

    本文基于Free Code Camp基本算法脚本“查找字符串中最长的单词”。在此算法中,我们要查看每个单词并计算每个单词中有多少个字母。然后,比较计数以确定哪个单词的字符最多,并返回最长单词的长度。在本文中,我将解释三种方法。首先使用FOR循环,其次使用sort()方法,第三次使用reduce()方......

  9. javascript中的内存管理

    目录简介内存生命周期JS中的垃圾回收器引用计数垃圾回收算法Mark-and-sweep回收算法调试内存问题闭包Closures中的内存泄露javascript中的内存管理简介在c语言中,我们需要手动分配和释放对象的内存,但是在java中,所有的内存管理都交给了java虚拟机,程序员不需要在手动进程内......

  10. react获取input输入框的值的方法示例

    react 获取input 输入框的值的多种方式第一种方式 非受控组件获取第二种方式 受控组件获取非受控组件获取 refimport React , {Component} from 'react';export default class App extends Component{search(......

随机推荐

  1. java 使用正则表达式去除前后空格

    问题描述:java去除字符串前后空白,身为小伙子的我搞了大半天,其实蛮简单的。解决方案:方式一:trim() trim()是 String里的常用的方法,作用:返回字符串的副本,忽略前导空白和尾部空白*输出结果:方式二:正则表达式:replaceAll(String regex,String rep......

  2. 关于 C++ 中的强制转换 - 基础篇

    引言假设有基类 A,包含了虚函数 func1,以及有派生类 B,继承于类 A,派生类 B 中实现了函数 func1。此时可以用 A 类型的指针指向 B 类型的对象,并用 A 类型的指针调用 B 类型对象中的函数 func1。这时,就形成了多态。包含虚函数的类 A,我们也称为多态类。由于派生类 B 完......

  3. Linux学习之编译运行.c(C语言)文件

    在Linux命令行界面下,创建文件hello.c,进入vim编辑器,编辑一个简单的C语言文件 分解C语言文件执行过程,要经过预编译、编译、汇编、连接四个步骤后才能执行,预编译:gcc -E hello.c -o hello.i 先将.c文件预编译为.i文件 编......

  4. Perl中常见符号与操作

    注释:1.单行: #print2.多行:=pod …. =cut查询perl相关:Perldoc perlvar($a,$$,$”...)Perldoc perfunc(sort…)Perldoc perl 查看perldoc文章列表Perldoc –q 正则表达式Perldoc –f 函数名Per......

  5. JS removeAttribute()方法实现删除元素的某个属性

    在 JavaScript 中,使用元素的 removeAttribute() 方法可以删除指定的属性。用法如下:removeAttribute(name)参数 name 表示元素的属性名。示例1下面示例演示了如何动态设置表格的边框。window.onload = function () { //绑定......

  6. Asp.Net Core添加请求头自定义认证的示例

    前言小项目中需要添加 Api 请求权限认证, 并且只是专用网络内使用,于是只想简单得认证下是否可以访问, 顺便也是一种学习的过程,简单记录一下要点实现 IAuthenticationHandler 接口:4 个方法首先会调用 InitializeAsync 获取到 scheme 和 context然......

  7. Python读取pdf表格写入excel的方法

    背景今天突然想到之前被要求做同性质银行的数据分析。妈耶!十几个银行,每个银行近5年的财务数据,而且财务报表一般都是 pdf 的,我们将 pdf 中表的数据一个个的拷贝到 excel 中,再借助 excel 去进行求和求平均等聚合函数操作,完事了还得把求出来的结果再统一 CV 到另一张表中,进行可视化......

  8. java中List去除重复数据的5种方式总结

    前言List 是一个接口,它继承于Collection的接口。它代表着有序的队列。当我们讨论List的时候,一般都和Set作比较。List中元素可以重复,并且是有序的(这里的有序指的是按照放入的顺序进行存储。如按照顺序把1,2,3存入List,那么,从List中遍历出来的顺序也是1,2,3)。Set......

  9. C# 实现一个基于值相等性比较的字典

    C# 实现一个基于值相等性比较的字典C# 实现一个基于值相等性比较的字典Intro今天在项目里遇到一个需求,大概是这样的我要比较两个 JSON 字符串是不是相等,JSON 字符串其实是一个 Dictionary 但是顺序可能不同,和上一篇 record 使用场景 中的第一个需求类似,前面我们介绍过使......

  10. 【函数分享】每日PHP函数分享

    str_pad() 使用另一个字符串填充字符串为指定长度 。string str_pad ( string $input, int $pad_length[, string $pad_string=" "[, int $pad_type=STR_PAD_RIGHT]])参数描......