优化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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Element UI是一套基于Vue.js的开源UI框架,专为后台管理系统设计而开发。它提供了丰富的组件和模板,可以快速、高效地开发现代化的后台管理系统。 首先,Vue Element UI具有可定制的主题和样式,可以根据需求轻松自定义整个后台管理系统的外观。它提供了多种主题颜色和布局选项,使得开发人员可以根据企业的品牌和设计要求来定制后台管理系统的风格。 其次,Vue Element UI提供了丰富多样的组件,包括表单、表格、图表、导航等等,可以快速构建各种常见的后台管理功能。这些组件具有良好的交互和可视化效果,可以方便地展示数据、实现数据的增删改查操作。 此外,Vue Element UI还支持国际化和多语言的配置,可以轻松实现多语言的后台管理系统。无论是中文、英文还是其他语言,开发人员都可以通过简单的配置来实现系统的多语言切换,以适应不同国家和地区的用户需求。 另外,Vue Element UI还具有良好的扩展性和兼容性。它可以与Vue.js及其它第三方库(如Vue Router和Vuex)无缝集成,开发人员可以随时根据需求引入新的组件或件来扩展系统的功能。而且它还支持响应式布局,可以适配不同的屏幕尺寸,从而提供良好的用户体验。 综上所述,Vue Element UI是一套功能强大、易用高效的后台管理框架。它通过丰富的组件、可定制的主题和样式、多语言支持以及良好的扩展性,为开发人员提供了快速开发现代化后台管理系统的解决方案。无论是小型企业还是大型企业,都可以选择Vue Element UI来构建高质量的后台管理系统。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值