实现文件上传进度条及解决request.upload.addEventListener in not a function问题

2023-11-15

使用axios上传文件时需要进度条,可通过监听axios的onUploadProgress获取当前文件上传进度,进度条可以用antd的Progress
实现过程中出现问题request.upload.addEventListener in not a function。
参考南柯一梦的博客https://www.cnblogs.com/leeke98/p/10491358.html
原来和mockjs有关,把项目中mockjs的引用去掉,问题迎刃而解

const [uploading, setUploading] = useState(false);
const [percent, setPercent] = useState(null);

const upload = async () => {
  const config = {
    onUploadProgress: (progressEvent) => {
      const percentNum = Math.round((progressEvent.loaded * 100) / progressEvent.total);
      console.log(percentNum);
      setPercent(percentNum);
    },
    withCredentials: true,
  };
 let url = 'api/xxx';
 const formData = new window.FormData();
 formData.append("file",file); //上传的数据
  try {
    setUploading(true);
    const { err, status } = await axios.post(url, formData, config);
  } catch (e) {
    console.log('ignore', e);
  }
  setUploading(false);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

实现文件上传进度条及解决request.upload.addEventListener in not a function问题 的相关文章

随机推荐

  • QT界面布局和设计

    一 设计 对功能和模块进行分析 然后设计对应的模块 将每个模块都用widget展示作为组件 工程结构示例 二 完成模块 代码分别设计各个组件 合适即可 三 主界面连接 主界面连接各个子模块 在这里插入代码片 include AutoFlaw
  • CAN总线详解及STM32的CAN通信编程指南

    对于CAN通信而言 本人之前也未接触了解过 由于实习的技术要求 因此也花费了一段时间对CAN通信进行学习 并且实现了基于STM32的CAN环回静默模式通信 因此写一遍比较详细的文章对该内容进行总结 本文的参考资料有STM32的中文参考手册
  • 【JAVA】Could not resolve all dependencies for configuration ‘:detachedConfiguration1‘

    build gradle 中添加 id net linguica maven settings version 0 5 plugins id org springframework boot version 2 3 3 RELEASE id
  • 【华为OD统一考试B卷

    华为OD统一考试A卷 B卷 新题库说明 2023年5月份 华为官方已经将的 2022 0223Q 1 2 3 4 统一修改为OD统一考试 A卷 和OD统一考试 B卷 你收到的链接上面会标注A卷还是B卷 请注意 根据反馈 目前大部分收到的都是
  • centos7 安装jdk17

    默认情况下 yum 仓库中是没有jdk 17 的 只有jdk 11 所以我们不能直接用yum 安装 需要手动下载进行配置工作 下载文件 wget https download oracle com java 17 latest jdk 17
  • 网页与服务器数据库数据交互,网页与ACCESS数据库如何实现数据交互?

    1 打开access 单机菜单栏创建 选择表 单击列 选择下拉菜单中的字段类型 单机列名更改字段名称 2 添加完成后单击保存成test accdb 新建c 窗体程序 3 using System using System Collectio
  • 今日算法中数据结构知识练习 (7-19)【4】

    Date 2019 07 19 1 两个指针 P 和 Q 分别指向单链表的两个元素 P 所指元素是 Q 所指元素前驱的条件是 P gt next Q 2 串是一种特殊的线性表 其特殊性体现在 数组元素是一个字符 3 下列文件中属于逻辑结构文
  • uniapp onHide()和onUnload()的使用

    小程序onHide 和onUnload onHide 触发的场景 导航页1 gt gt 导航页2 会触发导航页1 onHide 导航页 gt gt 子页面 会触发导航页 onHide 子页面1 gt gt 子页面2 会触发子页面1 onHi
  • linux查询mysql内存使用率_MySQL内存使用率无限增长

    背景 收到内存报警的信息以后 从监控中发现MySQL服务器的内存使用率在不断的增长 附图 虽然进行了重启 但是内存占用率依然会不停的增长 大约在半个月左右的时间内又把内存消耗完毕 场景 未搭建场景 数据库版本 5 7 12 分析 PS 时间
  • 精简CUDA教程——CUDA Runtime API

    精简CUDA教程 CUDA Runtime API tensorRT从零起步迈向高性能工业级部署 就业导向 课程笔记 讲师讲的不错 可以去看原视频支持下 Runtime API 概述 环境 图中可以看到 Runtime API 是基于 Dr
  • (C语言)在屏幕上输出对应的图案(* ** *** *****.....)

    在屏幕上输出如下的图案 根据上面图片可以看出来 前7行中下一行的星比前一行多出两个星 第8行到第13行是下一行比前一行少2个星 代码为 include
  • el-select远程搜索:remote-method遇到的坑

    在使用远程搜索的时候 就是每次发请求获取数据然后选择 会出现选择后总是会出现选择紊乱的情况 在使用debugger后排查了很久 发现每次选择内容后 都会触发 remote method这个事件 也就是继续会发请求 然后获取到新的数据重新赋值
  • 什么是值传递,什么是引用传递

    一般认为 java中基础类型数据传递都是值传递 java中实例对象的传递是引用传递 值传递是对基本型变量而言 传递的是该变量的一个副本 不影响该原变量 而引用传递是一般对于对象型变量而言 传递的是该对象地址的副本 并不是原对象本身 1 值传
  • linux bash环境配置文件

    linux bash环境配置文件 你是否会觉得奇怪 怎么我们什么动作都没有进行 但是一进入 bash 就取得一堆有用的变量了 这 是因为系统有一些环境配置文件案的存在 让 bash 在启动时直接读取这些配置文件 以规划好 bash 的操作环
  • ubuntu切换国内镜像源,加速apt-get下载速度

    ubuntu切换国内镜像源 加速apt get下载速度 如题 使用apt get命令安装包时 由于系统自带的下载源在国外服务器上 故下载速度较慢 若切换为国内源 将显著提升下载速度 下列是设置步骤 STEP 1 查找适合自己系统的镜像源配置
  • 深入理解线程的原理和用法

    Java中的线程 程序 进程和线程 1程序是一段静态的代码 它是应用程序执行的蓝本 2进程是程序的一次动态执行过程 它对应了从代码加载 执行到执行完毕的一个完整过程 作为蓝本的程序可以被多次加载到系统的不同内存区域分别执行 形成不同的进程
  • 某某analysis参数算法分析

    作者 TheWeiJun 来源 逆向与爬虫的故事 今天给大家带来一个干货分享 由于想要查看某些APP的详细信息 需要通过APP名称去某麦网站进行搜索查看 而整个过程中涉及到逆向分析 为了方便大家学习 本次完整流程记录如下 目录 一 确定要获
  • java可变参数函数_Java 变参函数的实现

    Java的变参函数实现实际上参数是一个数组 其简单用法如下 public class variableParamTest private static void variableParam Object args for Object v
  • vue实现任务周期cron表达式选择组件

    vue cron表达式 Cron表达式的详细用法 vue cron 基于vue的cron表达式组件 项目开发过程中遇到了需要在from表单输入cron表达式的情况 但对cron表达式没有深刻了解的用户来说 输入一个正确的cron表达式有些困
  • 实现文件上传进度条及解决request.upload.addEventListener in not a function问题

    使用axios上传文件时需要进度条 可通过监听axios的onUploadProgress获取当前文件上传进度 进度条可以用antd的Progress 实现过程中出现问题request upload addEventListener in