AI 助理
备案控制台
开发者社区 彭世瑜的博客 文章 正文

js：Axios通过onUploadProgress获取上传文件进度和上传速度

2023-04-15 614
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： js：Axios通过onUploadProgress获取上传文件进度和上传速度

文档

需要注意的是，版本不同，可能获取的参数有所差别

请求配置参数 onUploadProgress 可以获取上传文件进度

  // `onUploadProgress` 允许为上传处理进度事件
  // 浏览器专属
  onUploadProgress: function (progressEvent) {
    // 处理原生进度事件
    // 打印 progressEvent 对象查看属性
    // 获取两个重要参数，计算上传进度，
    // 最后保留1位小数
    progress = (progressEvent.loaded / progressEvent.total * 100).toFixed(1)
  },

参考

axios实现文件上传并获取进度

文章标签：
JavaScript
关键词：
JavaScript上传文件
axios上传文件
axios onuploadprogress进度
axios进度
JavaScript进度
编程达人
目录
相关文章
daisy`
|
4月前
|
JavaScript
JS实现百分比进度球
JS实现百分比进度球
daisy`
60 1
草帽lufei
|
4月前
axios 上传显示进度
axios 上传显示进度
草帽lufei
90 0
Zh.晨光
|
4月前
|
机器学习/深度学习 前端开发 JavaScript
源映射错误：Error: request failed with status 404 源 URL：http://localhost:8080/bootstrap/js/axios-0.18.0.js
源映射错误：Error: request failed with status 404 源 URL：http://localhost:8080/bootstrap/js/axios-0.18.0.js
Zh.晨光
118 0
源映射错误：Error: request failed with status 404 源 URL：http://localhost:8080/bootstrap/js/axios-0.18.0.js
theMuseCatcher
|
1月前
|
存储 JavaScript 前端开发
JS上传文件（base64字符串和二进制文件流）
这篇文章介绍了两种JavaScript文件上传的方法：使用FileReader对象将文件读取为base64字符串上传，以及使用FormData对象以二进制文件流的形式上传文件，包括如何处理文件选择、读取和上传的详细代码示例。
theMuseCatcher
121 2
JS上传文件（base64字符串和二进制文件流）
你挚爱的强哥
|
4月前
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决？
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决？
你挚爱的强哥
364 1
。思索
|
1月前
|
JavaScript API
NodeJs——使用axios下载上传文件
NodeJs——使用axios下载上传文件
。思索
71 4
蓝色流星1000
|
2月前
|
存储 资源调度 前端开发
JavaScript 使用axios库发送 post请求给后端， 给定base64格式的字符串数据和一些其他参数， 使用表单方式提交， 并使用onUploadProgress显示进度
使用 Axios 发送包含 Base64 数据和其他参数的 POST 请求时，可以通过 `onUploadProgress` 监听上传进度。由于整个请求体被视为一个单元，所以进度可能不够精确，但可以模拟进度反馈。前端示例代码展示如何创建一个包含 Base64 图片数据和额外参数的 `FormData` 对象，并在上传时更新进度条。后端使用如 Express 和 Multer 可处理 Base64 数据。注意，实际进度可能不如文件上传精确，显示简单加载状态可能更合适。
蓝色流星1000
256 0
爱你三千遍斯塔克
|
2月前
|
NoSQL 前端开发 测试技术
若依修改，若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求，必须用param
若依修改，若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求，必须用param
爱你三千遍斯塔克
77 0
爱你三千遍斯塔克
|
2月前
|
JavaScript API
前后端数据交互.js文件的axios的写法，想要往后端发送数据，页面注入API，await的意思是同步等待服务器数据，并返回，axios注入在其他页面，其他页面调用的时候，同步作用
前后端数据交互.js文件的axios的写法，想要往后端发送数据，页面注入API，await的意思是同步等待服务器数据，并返回，axios注入在其他页面，其他页面调用的时候，同步作用
爱你三千遍斯塔克
34 0
小白学大数据
|
4月前
|
数据采集 JavaScript 前端开发
利用axios库在Node.js中进行代理请求的实践
利用axios库在Node.js中进行代理请求的实践
小白学大数据
137 1