优化VUE Element UI的上传插件

默认ElmentUI的文件列表只有一个删除按钮，我需要加预览、下载、编辑等，就需要优化显示结果。

优化后没用上传进度条，又加了一个进度条效果

代码

<template><div><el-uploadclass="upload-demo"action="/":file-list="fileList":disabled="isUpLoading":before-upload="beforeUpload":http-request="handleHttpRequest":on-remove="handleRemoveFile":on-progress="handleLoading":on-success="handleUploadSuccess"><el-button size="small" :loading="isUpLoading" type="primary">{{this.isUpLoading?"附件上传中...":"点击上传"}} </el-button><div slot="tip" class="el-upload__tip">(建议上传附件大小在5M以内)</div></el-upload><div id="file-list"><el-progress v-if="isUpLoading" :percentage="uploadingProgress"></el-progress><div v-for="(file,index) in fileList" :key="file.fileIdentifier" style="display: flex;justify-content: space-between;line-height: 25px;"><div>{{index+1}}、{{file.name}} </div><div style="padding-right: 20px;"><a href="javascript:void(0)" style="cursor:pointer;" @click="fileOption(file,'down')">下载</a><a href="javascript:void(0)" v-if = "officeFileType.includes(file.wjhz.toLowerCase())" style="margin-left: 10px;cursor:pointer;"  @click="fileOption(file,'show')">查看</a><a href="javascript:void(0)" v-if = "officeFileType.includes(file.wjhz.toLowerCase())" style="margin-left: 10px;cursor: pointer;" @click="fileOption(file,'edit')">编辑</a><a href="javascript:void(0)" style="margin-left: 10px;cursor: pointer;" @click="fileOption(file,'del')">删除</a></div></div></div></div>
</template><style lang="scss" scoped>
::v-deep .el-upload-list{display: none;
}
</style><script>
import md5 from "@/api/file/md5";
import { taskInfo, initTask, preSignUrl, merge, del, getFileList} from '@/api/file/api';
import Queue from 'promise-queue-plus';
import axios from 'axios'
import VXETable from 'vxe-table'
import { changeUserStatus } from '@/api/system/user'export default {name: 'upload-page',props: {// 文件类型fjlxdm: {required: true,type: String},// 业务主建ywbs: {required: true,type: String},},created(){this.initData();},data() {return {fileUploadChunkQueue:{},lastUploadedSize:0,// 上次断点续传时上传的总大小uploadedSize:0,// 已上传的大小totalSize:0,// 文件总大小startMs:'',// 开始上传的时间taskRecord:{},options:{},fileList:[],officeFileType:['.ppt', '.pptx', '.doc', '.docx', '.xls', '.xlsx','.pdf'],isUpLoading:false,uploadingProgress:0,uploadTime:null,}},methods: {handleLoading(event, file, fileList){if(this.uploadTime!=null){clearInterval(this.uploadTime);this.uploadTime=null;}this.uploadingProgress=parseFloat(event.percent);},fileOption(file,type){if(type=="down"){//下载window.open(file.url, "_blank");return;}if(type=="show"){//查看const { href } = this.$router.resolve({name: 'office',query: {fjxxbs: file.fjxxbs,viewUrl: file.viewUrl,ot: 'detail'}})window.open(href, '_blank')return;}if(type=="edit"){//编辑const { href } = this.$router.resolve({name: 'office',query: {fjxxbs: file.fjxxbs,viewUrl: file.viewUrl,ot: 'edit'}})window.open(href, '_blank')return;}if(type=="del"){//删除this.$confirm('确认删除该附件？',"警告",{confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then( () => {del(file.fjxxbs).then(ret => {const index = this.fileList.findIndex((item) => item.fjxxbs === file.fjxxbs);this.fileList.splice(index, 1);this.msgSuccess("删除成功");});})return;}},/*** 获取附件列表*/initData(){this.uploadingProgress=100;getFileList(this.ywbs,this.fjlxdm).then(ret => {this.fileList = ret.data;setTimeout(()=>{this.isUpLoading=false;},500);})},/*** 获取一个上传任务，没有则初始化一个*/async getTaskInfo(file){let task;const identifier = await md5(file)const { code, data, msg } = await taskInfo(identifier,this.ywbs,this.fjlxdm);if (code === 200) {task = dataif (task===undefined) {const initTaskData = {identifier,fileName: file.name,totalSize: file.size,chunkSize: 5 * 1024 * 1024,ywbs:this.ywbs,fjlxdm:this.fjlxdm}const { code, data, msg } = await initTask(initTaskData)if (code === 200) {task = data} else {this.$notify({title:'提示',message: '文件上传错误',type: 'error',duration: 2000})}}} else {this.$notify({title:'提示',message: '文件上传错误',type: 'error',duration: 2000})}return task},// 获取从开始上传到现在的平均速度（byte/s）getSpeed(){// 已上传的总大小 - 上次上传的总大小（断点续传）= 本次上传的总大小（byte）const intervalSize = this.uploadedSize - this.lastUploadedSizeconst nowMs = new Date().getTime()// 时间间隔（s）const intervalTime = (nowMs - this.startMs) / 1000return intervalSize / intervalTime},async uploadNext(partNumber){const {chunkSize,fileIdentifier} = this.taskRecord;const start = new Number(chunkSize) * (partNumber - 1)const end = start + new Number(chunkSize)const blob = this.options.file.slice(start, end)const { code, data, msg } = await preSignUrl({ identifier: fileIdentifier, partNumber: partNumber , ywbs:this.ywbs , fjlxdm:this.fjlxdm} )if (code === 200 && data) {await axios.request({url: data,method: 'PUT',data: blob,headers: {'Content-Type': 'application/octet-stream'}})return Promise.resolve({ partNumber: partNumber, uploadedSize: blob.size })}return Promise.reject(`分片${partNumber}， 获取上传地址失败`)},/*** 更新上传进度* @param increment 为已上传的进度增加的字节量*/updateProcess(increment){increment = new Number(increment)const { onProgress } = this.optionslet factor = 1000; // 每次增加1000 bytelet from = 0;// 通过循环一点一点的增加进度while (from <= increment) {from += factorthis.uploadedSize += factorconst percent = Math.round(this.uploadedSize / this.totalSize * 100).toFixed(2);onProgress({percent: percent})}const speed = this.getSpeed();const remainingTime = speed != 0 ? Math.ceil((this.totalSize - this.uploadedSize) / speed) + 's' : '未知'console.log('剩余大小：', (this.totalSize - this.uploadedSize) / 1024 / 1024, 'mb');console.log('当前速度：', (speed / 1024 / 1024).toFixed(2), 'mbps');console.log('预计完成：', remainingTime);},handleUpload(file, taskRecord){this.lastUploadedSize = 0; // 上次断点续传时上传的总大小this.uploadedSize = 0 // 已上传的大小this.totalSize = file.size || 0 // 文件总大小this.startMs = new Date().getTime(); // 开始上传的时间this.taskRecord = taskRecord;const { exitPartList, chunkNum} = taskRecordreturn new Promise(resolve => {const failArr = [];const queue = Queue(5, {"retry": 3,               //Number of retries"retryIsJump": false,     //retry now?"workReject": function(reason,queue){failArr.push(reason)},"queueEnd": function(queue){resolve(failArr);}})this.fileUploadChunkQueue[file.uid] = queuefor (let partNumber = 1; partNumber <= chunkNum; partNumber++) {const exitPart = (exitPartList || []).find(exitPart => exitPart.partNumber == partNumber)if (exitPart) {// 分片已上传完成，累计到上传完成的总额中,同时记录一下上次断点上传的大小，用于计算上传速度this.lastUploadedSize += new Number(exitPart.size)this.updateProcess(exitPart.size)} else {queue.push(() => this.uploadNext(partNumber).then(res => {// 单片文件上传完成再更新上传进度this.updateProcess(res.uploadedSize)}))}}if (queue.getLength() == 0) {// 所有分片都上传完，但未合并，直接return出去，进行合并操作resolve(failArr);return;}queue.start()})},async handleHttpRequest(options){this.options = options;const file = options.fileconst task = await this.getTaskInfo(file)const that = this;if (task) {const { finished, path, taskRecord } = taskconst {fileIdentifier,fjxxbs } = taskRecordif (finished) {return {fileIdentifier,fjxxbs}} else {const errorList = await this.handleUpload(file, taskRecord)if (errorList.length > 0) {this.$notify({title:'文件上传错误',message: '部分分片上传失败，请尝试重新上传文件',type: 'error',duration: 2000})return;}const { code, data, msg } = await merge(fileIdentifier,that.ywbs,that.fjlxdm)if (code === 200) {return {fileIdentifier,fjxxbs};} else {this.$notify({title:'提示',message: '文件上传错误',type: 'error',duration: 2000})}}} else {this.$notify({title:'文件上传错误',message: '获取上传任务失败',type: 'error',duration: 2000})}},/*** 重复上传* @param {} file*/beforeUpload(file){return new Promise((resolve, reject) => {md5(file).then(result => {const index = this.fileList.findIndex((item) => item.fileIdentifier === result);if(index==-1){this.isUpLoading=true;this.uploadingProgress=0;this.uploadTime=setInterval(()=>{this.uploadingProgress+=1;},500)return resolve(true);}else{return reject(false);}})});},handleRemoveFile(uploadFile, uploadFiles){const queueObject = this.fileUploadChunkQueue[uploadFile.uid]if (queueObject) {queueObject.stop()this.fileUploadChunkQueue[uploadFile.uid] = undefined;}if(uploadFile.fjxxbs != undefined){del(uploadFile.fjxxbs).then(ret => {const index = this.fileList.findIndex((item) => item.fjxxbs === uploadFile.fjxxbs);this.fileList.splice(index, 1);})}},/*** 上传成功*/handleUploadSuccess(res, file, fileList) {// file.fileIdentifier = res.fileIdentifier;// file.fjxxbs = res.fjxxbs;// this.fileList.push(file);this.initData();}}
}</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/103141.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

OPPO/真我手机ColorOS13系统解账户锁-移除手机密码图案锁方法

OPPO/真我手机ColorOS13系统解账户锁-移除手机密码图案锁方法

在搞机之前&#xff0c;请确定自己的手机不是非法获取&#xff0c;本文只讲叙ColorOS13系统解锁方法&#xff0c;仅为个人测试研究出来的经验&#xff0c;未对官方系统进行任何修改。只推荐专业维修师傅从维修的角度进行解锁&#xff0c;不推荐个人用户对非自己的手机进行非法破…
阅读更多...
传输层-TCP 的安全机制和高效策略

传输层-TCP 的安全机制和高效策略

可靠性&#xff1a; 之前我们在UDP中谈到了&#xff0c;UDP不可靠但是简单&#xff0c;TCP可靠但是也要做更多的工作&#xff0c;那这些工作具体是什么呢&#xff1f;接下来让我们详细了解一下。 确认应答机制&#xff08;ACK机制&#xff09; 序号&#xff1a;我们可以把TCP…
阅读更多...
如何按文件名称自动归类，助您轻松管理文件

如何按文件名称自动归类，助您轻松管理文件

在日常工作和生活中&#xff0c;我们经常会遇到大量的文件需要管理。如果这些文件没有得到良好的归类和整理&#xff0c;不仅会浪费我们的时间和精力&#xff0c;还会给我们带来困扰和混乱。今天我们一起来看看怎么按文件名称来自动归类&#xff0c;批量整理文件&#xff0c;让…
阅读更多...
云数据库知识学习——概述

云数据库知识学习——概述

一、云计算是云数据库兴起的基础 云计算是分布式计算、并行计算、效用计算、网络存储、虚拟化、负载均衡等计算机和网络技术发展融合的产物。云计算是由一系列可以动态升级和被虚拟化的资源组成的&#xff0c;用户无需掌握云计算的技术&#xff0c;只要通过网络就可以访问这些资…
阅读更多...
图床项目性能测试

图床项目性能测试

文章目录 一、FastDFS文件性能测试1.1 上传文件测试1.2 下载测试1.3 删除文件测试1.4 如何提高 二、图床项目wrklua性能测试2.1 wrk2.2 MySQL索引优化2.2 注册测试2.2.1 无索引性能2.2.2 有索引性能 2.3 登录测试2.3.1 无索引性能2.3.2 有索引性能 2.4 读取文件测试2.4.1 无索引…
阅读更多...
异步编程 - 13 高性能线程间消息传递库 Disruptor

异步编程 - 13 高性能线程间消息传递库 Disruptor

文章目录 Disruptor概述Disruptor中的核心术语Disruptor 流程图 Disruptor的特性详解基于Disruptor实现异步编程 Disruptor概述 Disruptor是一个高性能的线程间消息传递库&#xff0c;它源于LMAX对并发性、性能和非阻塞算法的研究&#xff0c;如今构成了其Exchange基础架构的核…
阅读更多...
C#事件event

C#事件event

事件模型的5个组成部分 事件拥有者&#xff08;event source&#xff09;&#xff08;类对象&#xff09;&#xff08;有些书将其称为事件发布者&#xff09; 事件成员&#xff08;event&#xff09;&#xff08;事件拥有者的成员&#xff09;&#xff08;事件成员就是事件本身…
阅读更多...
山西电力市场日前价格预测【2023-09-09】

山西电力市场日前价格预测【2023-09-09】

日前价格预测 预测明日&#xff08;2023-09-09&#xff09;山西电力市场全天平均日前电价为372.85元/MWh。其中&#xff0c;最高日前电价为435.72元/MWh&#xff0c;预计出现在18: 45。最低日前电价为342.46元/MWh&#xff0c;预计出现在04: 00。 价差方向预测 1&#xff1a; 实…
阅读更多...
关于HarmonyOS元服务的主题演讲与合作签约

关于HarmonyOS元服务的主题演讲与合作签约

一、感言 坚持中&#xff0c;总会有很多意想不到的收获。 前几次参与HDC时更多的是观众、开发者、专家的身份&#xff0c;以参观、学习、交流为主。 通过几年的努力&#xff0c;和HarmonyOS功能成长&#xff0c;在2023年的HDC大会中&#xff0c;有了我的演讲&#xff0c;并带领…
阅读更多...
LeetCode 48题： 旋转图像

LeetCode 48题： 旋转图像

题目 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]]…
阅读更多...
SPWM 与 SVPWM 原理及算法

SPWM 与 SVPWM 原理及算法

所谓SPWM&#xff0c;就是在PWM的基础上改变了调制脉冲方式&#xff0c;脉冲宽度时间占空比按正弦规律排列&#xff0c;这样输出波形经过适当的滤波可以做到正弦波输出。它广泛地用于直流交流逆变器等&#xff0c;比如高级一些的UPS就是一个例子。三相SPWM是使用SPWM模拟市电的…
阅读更多...
哭了，python自动化办公，终于支持 Mac下载了

哭了，python自动化办公，终于支持 Mac下载了

想了解更多精彩内容&#xff0c;快来关注程序员晚枫 大家好&#xff0c;这里是程序员晚枫&#xff0c;小红薯/小破站也叫这个名。 在我的主页发布的免费课程&#xff1a;给小白的《50讲Python自动化办公》&#xff0c;一直在更新中&#xff0c;昨晚12点多&#xff0c;有朋友在…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023