vue获取上传进度_文件上传与读取实时进度展示-demo(Vue)

监听进程的方法onprogress

1 )文件读取的progress事件属于FileReader对象。

2 )下载的progress事件属于XMLHttpRequest对象。

3 )上传的progress事件属于XMLHttpRequest.upload对象。

本案例主要实现了文件读取、文件上传进度的可视化显示

demo功能

可添加并上传多个文件，每添加一个文件，会进行读取与上传，上传后存储文件与文件信息缓存于files数组中；

文件添加后，先显示读取进度条，读取100%后开始上传并显示上传进度条；

读取文件时，文件标题会显示文件读取中...，进度条为文件读取进度；

上传文件时，文件标题更新为具体文件名称与已上传的实时数据量，动态更新上传量，进度条为上传进度；

上传完毕，自动隐藏进度条；

注意点1：页面上只有一个input[type=file]框，但为了存储多个文件的二进制数据，这里将二进制数据缓存到files数组中，input[type=file]框只作为实时数据的处理使用；

注意点2：读取进度在实际应用中是可以省略的，本demo中读取后会将文件二进制数据缓存如files数组中，如果省略这步，可以不用读取文件。在这里主要用于体验文件读取进度的显示和缓存数据；

页面与样式

• 文件读取中...

  { { file.fileName }}({ { file.uploadSize}})

• Add attachment

复制代码

background-color: #f2f2f2;

border-radius: 4px;

overflow: hidden;

border: 1px solid #ddd;

padding-left: 0;

}

ul::before {

content: 'Attachment';

height: 32px;

line-height: 32px;

display: block;

padding-left: 11px;

}

ul li.file_item {

margin-bottom: 1px;

}

ul li {

list-style: none;

position: relative;

background-color: #fff;

height: 32px;

padding-left: 11px;

overflow: hidden; /* 解决margin塌陷 */