axios onUploadProgress

最新推荐文章于 2024-03-11 17:06:36 发布
最新推荐文章于 2024-03-11 17:06:36 发布
阅读量1w 收藏 8
点赞数 4
分类专栏： javascript 文章标签： axios onUploadProgress 进度条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyx15011474269/article/details/81197598
版权

上传文件进度条，使用axios的onUploadProgress

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>上传文件进度条</title>
  <style>

    body {
      position: relative;
      width: 1920px;
      height: 984px;

    }

    .box {
      position: absolute;
      left: 50%;
      top: 30%;
      transform: translate(-50%, -30%);
    }

    .wrap {
      width: 300px;
      height: 20px;
      box-shadow: 0 0 10px pink inset;
      border-radius: 10px;
      border: 2px solid #eee;
      background: rgba(0,0,0,0.5);
      margin-top: 20px;
      position: relative;
      display: none;

    }
    .children {
      width: 0;
      height: 20px;
      box-shadow: 0 0 5px #eee outset;
      border-radius: 10px;
      background: -webkit-linear-gradient(left, #FF34B3 0%,#FF7256 50%, yellow 100%);

    }
    #percent {
      position: absolute;
      top: 0px;
      left: 0;
      margin: 0;
    }

  </style>
</head>
<body>

<div class="box"> 
    <input type="file" id='input'>

    <div class="wrap" id='wrap'>
      <div class="children" id='children'>

      </div>
      <p id='percent'>0</p>
    </div>
</div>




  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
var Input = document.getElementById('input')
var Wrap = document.getElementById('wrap')
var Children = document.getElementById('children')
var Percent = document.getElementById('percent')
Input.onchange = function(event) {

  console.log('event', event)
  let file = event.target.files[0]

  const formData = new FormData()

  formData.append('userName', 'admin')
  formData.append('projectId', '735136fcf95a41248cc94127f7963ea8')
  formData.append('file', file)


  console.log('formData', formData)

  var percent = 0;

 uploadPhoto(formData, function(e){
   Wrap.style.display = 'block'
   percent = e.loaded / e.total * 100 
   Children.style.width = percent + '%'
   Percent.innerHTML = Math.ceil(percent) + '%'
   Percent.style.left = Math.ceil(percent) + '%'

 }, function(res) {
   if(res.code === 1) {
     alert('上传成功')
     Children.style.width = 0 + '%'
     Wrap.style.display = 'none'
   }


 })

}

  function uploadPhoto(payload, callback1, callback2){
    axios({
      url: 'http://192.168.1.207:3004/hysighthome/project/735136fcf95a41248cc94127f7963ea8/attachment',
      method: 'post',
       headers: { 
         Authorization: 'sdfasfsfwrfrwerrrrrrrrrrrfbdddddddddddddd',
        'Content-Type': 'multipart/form-data'
        },
      onUploadProgress: function (progressEvent) { //原生获取上传进度的事件
        if (progressEvent.lengthComputable) {
          //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
          //如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
          callback1(progressEvent);
        }
      },
      data: payload
    }).then(res => {
      callback2(res.data);
    }).then(error => {
      console.log(error)
    })
  }
  </script>

</body>
</html>
小薇安
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios+Vue实现上传文件显示进度功能
10-17
主要介绍了axios+Vue上传文件显示进度效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
使用Axios中的onUploadProgress实现显示文件上传进度
qq_41915137的博客
08-31 3217
Axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中进行 HTTP 请求。允许指定一个回调函数，在上传进度发生变化时被调用。这个回调函数接收一个进度事件对象作为参数，可以从中获取上传进度的信息。这对于跟踪文件上传的进度很有用，特别是在需要显示进度条时。通过计算这两个值的比例，可以得出上传的百分比，然后可以使用这个百分比更新用户界面。只适用于发送请求时的上传过程，不适用于下载过程。如果需要跟踪下载进度，可以使用 Axios 的。在这个示例中，当上传进度发生变化时，
使用axios的onUploadProgress完成el-upload的进度条功能
chelly_z的博客
11-14 554
使用axios的onUploadProgress完成el-upload的进度条功能。
【axios】你的进度条准确吗
最新发布
广漂程序猿DevinRock
03-11 782
上传和下载操作在前端中是非常常见的，当我们想知道上传或下载的进度时也不难，axios已经实现了监听进度的方法翻一下axios的源码，看看它是如何实现的在/lib/adapters/xhr.js文件中，可以看到这么一段代码其中，config就是我们传给的axios的参数，如果是上传操作并且有传递onUploadProgress函数的话就监听XMLHttpRequest的progress事件，然后周期性地触发回调函数progressEventReducer。
使用axios的onUploadProgress制作上传进度条--以及onUploadProgress的源码解读
热门推荐
Vgbire的博客
10-27 1万+
今天早上刚接到上传视频要显示上传进度的需求。作为小白的我，脑子一热，这怎么写，我上传就上传了，我怎么拿到当前这个视频上传了多少数据，难道我还要和后端配合，在上传完成前在极短的时间间隔内例如5ms，不断告诉我当前上传了多少数据？ 后面网上找了一下，我还是太年轻了，axios竟然有现成的API onUploadProgress去帮你完成这么复杂的事情。 onUploadProgress 从名字就可以看出来，这是允许为上传处理进度的事件。他是axios的请求配置之一。 const config = { .
[前端开发Vue]在Axios中，怎么实现实时监听上传数据进度、监听接口返回数据进度、如何终止网络请求。实现上传文件实时进度条以及下载文件实时进度条。
元晖的博客
08-09 4091
你们是不是又觉得我在水字数了？
ElementUI上传组件，使用自定义上传行为http-request，不显示自带进度条的解决办法(选用axios的onUploadProgress方法)
qq_56018649的博客
09-08 6476
背景： 最近的项目有个上传文件的功能，美工给的设计图和elementUI上传组件差不多，所以想着做起来也比较简单。 功能需求：文件大小判断，文件类型判断，上传显示进度条。 最后完成大概就是这样子： 功能难点： 虽然说组件官网给了很多的例子，但是我项目中自己封装了axios请求，采用了代理服务器解决的跨域问题，所有就没有采用组件本身action，而是选用了http-request进行自定义上传。 这些都比较简单，先上代码...
vue里面配合axios完成配置进度条onUploadProgress
hzs0623的博客
08-28 4815
在项目中经常遇到上传文件，这时又需要查看上传的进度，就可以用到axios进度条事件；onUploadProgress； 1.axios封装的请求函数；通过callback回调函数返回进度的数据 export function uploadFileOss(data, callback) { //四舍五入后最接近的整数Math.round() let content_len = Math.round((data.file.size * 100) / 1024) / 100; let fd =
关于利用Axios的onUploadProgress记录文件上传进度和CancelToken取消文件传输项目记录
weixin_42404174的博客
04-23 3022
利用axios实现文件上传进度显示和取消发送
axios离线文件
09-12
vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，可以直接引用这个文件，不必在线引用。
axios 面向对象封装
03-22
axios 面向对象封装 可以多实例调用
axios.min.js
12-30
vue使用请求数据axios下载axios.js源文件
axios-0.19.2.zip
08-27
axios.min.js下载
axios上传图片或文件时显示上传进度
weixin_44041414的博客
06-28 1221
在平时开发中会遇到上传文件或者图片的场景，特别是在上传大文件时，稍长的等待会对用户体验造成不好的影响，所以需要做出一个有着上传进度条，这样可以大大减缓用户在等待时产生的焦虑感。 实际应用 vue-progress进度条组件 这次是通过vue-element进行开发，在element上有着进度条相关的组件，只需要传入相关的数值就能显示对应的进度： 现在有了对应的组件，接下来就可以着手处理文件上传过程中的进度了。 axios的onUploadProgress事件 在axios中有着下面的事件： onUplo
vue使用axios上传文件展示进度
qq_35359474的博客
10-31 499
文件上传实现上传进度
Axios封装多种方式实现以及高级用法详解(文件上传，请求重试，取消请求等)
乐闻世界
07-08 2059
本文介绍axios的特点，简单的操作，可配置属性，统一的封装（适合大型项目）以及一些高级操作，比如取消请求，请求重试，上传文件，xsrf攻击防御。
React组件Progress（进度条）+axios中onUploadProgress在前端展示上传进度条百分比
weixin_49174609的博客
02-23 2790
axious中自带onUploadProgress可以查看文件上传的进度条，点击F12可以看到百分比 axious中详细代码如下 onUploadProgress (progressEvent){ console.log(progressEvent); console.log(Math.round(progressEvent.loaded / progressEvent.total * 100) + '%'); } 如图： Progress组件代码如下： 首先要导入组
封装进度条onUploadProgress+axios取消请求的上传组件
luemeon的博客
11-27 566
点击或拖拽上传文件-- 使用正则表达式替换所有点号 -->请上传{{ format.replace(/\./g, "") }}格式文件，上传多份文件时以最后一次为准
el-upload 配合 axios 的 onUploadProgress 方法上传实时进度条展示。
qq_23207707的博客
03-21 4386
el-progress 动态进度
axios中的onUploadProgress
03-31
axios中的onUploadProgress是一个方法，用于监控文件上传进度。它接受一个参数config，其中包含以下属性： - `progressEvent`：表示上传进度的事件对象，其中包含以下属性： - `loaded`：已上传的字节数。 - `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值