上传功能可简单，可复杂，简单就是把文件传上去就行，复杂就是涉及大文件断点续传、控制并发等。今天要给大家分享的是上传需求中最为常见的一些场景，话不多说，开干：

1原理2实现如果项目中有默认的timeout时间也要给上传文件的请求单独设置一些timeout时间免得文件过大上传慢导致失败onUploadProgress里面的默认参数progressEvent里面

先来个简单的例子试试水上面的代码添加了一个简单的axios请求，使用get方法请求一张图片，然后以百分比的形式打印出我们从服务器下载这张图片的进度，大家可以把url参数换成一张比较大的图片链接试试。用

start:进度条开始 done:进度条结束 进度条颜色可以修改的,当然需要修改人家的样式 引入与使用在axios的拦截与响应请求页面中 引入方式 引入位置 nprogress.start()与npr

只需调用start()和done()控制进度栏。 其中n是之间的数字0..1。 要递增进度条，只需使用.inc()。这使它以随机量递增。这将永远不会达到100％：将其用于每次图像加载（或类似加载）。 - 传递true到done()，即使未显示进度条也将显示进度条。（默认行为是.…

进度条在日常的开发中使用的很频繁，比如文件的上传和下载，资源的准备进度都需要用到。常见的形式为两种（条形和环形）。原理 实现环形进度条的原理：使用两个半圆来拼成一个整圆

这是我参与更文挑战的第17天，活动详情查看： 更文挑战 ! 👽 概论 进度条相信大家都不要陌生，但大家在碰到进度条的时候是否有考虑过进度条是怎么实现的呢？其实进度条的并不算很难，单纯靠css就能完美实

需求场景： 1、大文件压缩过后依旧很大，接口返回response速度过慢，页面没有任何显示，体验太差。 2、需要在浏览器显示正在加载中的状态优化显示，提高用户体验