优化VUE Element UI的上传插件
默认ElmentUI的文件列表只有一个删除按钮，我需要加预览、下载、编辑等，就需要优化显示结果。
优化后没用上传进度条，又加了一个进度条效果
代码
<template>
<div>
<el-upload
class="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 = data
if (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.lastUploadedSize
const nowMs = new Date().getTime()
// 时间间隔（s）
const intervalTime = (nowMs - this.startMs) / 1000
return 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.options
let factor = 1000; // 每次增加1000 byte
let from = 0;
// 通过循环一点一点的增加进度
while (from <= increment) {
from += factor
this.uploadedSize += factor
const 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} = taskRecord
return 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] = queue
for (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.file
const task = await this.getTaskInfo(file)
const that = this;
if (task) {
const { finished, path, taskRecord } = task
const {fileIdentifier,fjxxbs } = taskRecord
if (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>