文件上传与读取实时进度展示

2023-06-04 02:09| 来源: 网络整理| 查看: 265

监听进程的方法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 复制代码 ul { 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塌陷 */ } ul li .file_name { font-size: 14px; color: #111; font-weight: bolder; line-height: 32px; position: absolute; } ul li .del { position: absolute; right: 8px; top: 6px; font-size: 19.8px; width: 19.8px; height: 19.8px; cursor: pointer; padding: 0; border: 0; color: #666; } .progress_bar { background-color: #fff; border-radius: 100px; overflow: hidden; margin: 12px 166px 12px 206px; border: 1px solid #ddd; line-height: 8px; height: 8px; /* font-size: 14px; */ clear: both; opacity: 1; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; -webkit-transition: opacity 1s linear; } .progress_bar.loading { opacity: 1.0; } .progress_bar .percent, .progress_bar .upload { background-color: #aaa; height: 100%; width: 0; } 复制代码方法实现

每选择一次文件，files数组中添加一项占位，视图更新显示该条数据处理情况；

handleFileSelect(e) { // 加入this.files this.files.push({}) this.$nextTick(tick=>{ this.getFile(e.target) }) }, 复制代码

读取文件后显示文件名

getFile(target) { if (!target.files[0]) return; let filevalue = target.value; let index = filevalue.lastIndexOf('.'); let file = {} file.fileName = target.files[0].name file.filesExtension = filevalue.substring(index) let self = this this.readFile(target.files[0]).then(res => { file.fileData = res // 缓存读取的二进制数据 Object.assign(self.files[self.files.length - 1], { fileName: file.fileName, // 文件名 filesExtension: file.filesExtension, // 扩展名 fileData: file.fileData, readPercent: '100%' }) self.upload(target.files[0]) self.$forceUpdate() }).catch(e => { console.log(e) }) }, 复制代码readFile(file) { let self = this; return new Promise(function(resolve, reject) { let fileCard = self.files[self.files.length - 1]; // 在选择新文件后重置进度指示器 self.$set(fileCard, 'readPercent', '0%'); let reader = new FileReader(); reader.onprogress = self.updateProgress; // 更新进度条 reader.onerror = function (e) { switch(e.target.error.code) { case e.target.error.NOT_FOUND_ERR: reject('文件没找到'); break; case e.target.error.NOT_READABLE_ERR: reject('文件不可读'); break; default: reject('读取文件时出错'); }; } reader.onloadend = function (res) { // 确保进度条最后显示100％ self.$set(fileCard, 'readPercent', '100%'); resolve(res.target.result) } // 将文件作为二进制数组读入 reader.readAsArrayBuffer(file); }) }, 复制代码

监听读取文件进度条

updateProgress(e) { // e 是一个 ProgressEvent. if (e.lengthComputable) { let percentLoaded = ((e.loaded / e.total) * 100).toFixed(2); let fileCard = this.files[this.files.length - 1]; this.$set(fileCard, 'fileSize', this.renderSize(e.loaded)) // 更新进度条长度 if (percentLoaded < 100) { this.$set(fileCard, 'readPercent', percentLoaded+ '%'); } } }, 复制代码

上传文件并监听上传进度

upload(fileObj) { let formFile = new FormData(); formFile.append("attachment", fileObj); //加入文件对象 let fileCard = this.files[this.files.length - 1]; $.ajax({ url: window.location.origin + '/upload', data: formFile, type: "post", dataType: "json", cache: false,//上传文件无需缓存 processData: false,//用于对data参数进行序列化处理这里必须false contentType: false, //必须 xhr: () => { let xhr = $.ajaxSettings.xhr(); if (xhr.upload) { xhr.upload.onprogress = (e) => { let percent=e.loaded/e.total;//文件上传百分比 if (percent { console.log(error) }, success: (result) => { this.$set(fileCard, 'uploadPercent', '100%') this.$set(fileCard, 'filePath', result.file.filepath) // 添加接口返回的文件信息，如果没有可以忽略 }, complete: ()=> { this.clearFile() // 上传完毕清空input[type=file] } }) }, 复制代码

清空input[type=file]

clearFile() { this.$refs.file.value = '' }, 复制代码

文件大小的“可视化”，把比特值换算成常用单位显示

renderSize(value){ if(null==value||value==''){ return "0 Bytes"; } let unitArr = new Array("Bytes","KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"); let index=0; let srcsize = parseFloat(value); index=Math.floor(Math.log(srcsize)/Math.log(1024)); let size =srcsize/Math.pow(1024,index); size=size.toFixed(2);//保留的小数位数 return size+unitArr[index]; }, 复制代码

删除文件

del(n) { this.files.splice(n, 1) }, 复制代码demo下载

github.com/bambibren/u…

体验要点

由于我的demo是本地服务器，上传速度会比较快。而且真实的上传和文件读取速度可能比你想象的要快，所以小文件的进度可能会一闪而过。

【建议：可以将网络调成slot3G，这样多数文件上传进度就都可以看到了。至于文件读取进度，需要上传较大的文件才可以看到。】

另外，建议测试完毕后，清空upload文件件里上传的文件，并且清空废纸篓/回收站。避免给电脑存储增加负担。

欢迎指教

即学即分享，还请各位大佬多多指出优化与问题，我才能进步！

【本文地址】

公司简介

联系我们