devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue 拖拽文件、文件夹上传 vue-simple-uploader插件_新建文件夹 拖拽 删除 新增插件

作者：知新_RL | 2024-02-07 17:37:06

赞

踩

新建文件夹 拖拽 删除 新增插件
  1. <!-- 拖拽文件上传 -->
  2. <template lang="html">
  3.   <div class="upload-container">
  4.     <uploader :options="options" :fileStatusText="fileStatusText" @dragenter="dragEnter" @file-progress="onFileProgress" @file-added="onFileAdded" @files-added="onFilesAdded" @complete="onComplete">
  5.       <!-- <uploader-unsupport></uploader-unsupport> -->
  6.       <uploader-drop>
  7.       <!-- <uploader-list></uploader-list> -->
  8.         <!-- <div v-show="showMask" style="position: fixed;width:100%;background-color:rgba(220,220,220,.6);z-index:2042;" :style="{height: height + 72 +'px'}">
  9.           <div style="position:absolute;left:40%;top:50%;text-align:center;margin:-46px 0 0 -48px;">
  10.             <img :src="require('@/assets/images/common/openfile.png')" style="margin-bottom:10px;"/>
  11.             <p style="font-size:16PX;color:#666666;">即将打开文件</p>
  12.           </div>
  13.         </div> -->
  14.         <div class="upload-toolbox">
  15.           <div style="display:inline;">
  16.             <button v-if="!isSee" class="btn-upload ivu-btn" @mouseover="uploadMouseOver" @mouseleave="uploadMouseLeave" @click="uploadClick">
  17.               上传
  18.             </button>
  19.             <div class="panel-upload" v-show="panelShow" @mouseover="uploadMouseOver" @mouseleave="uploadMouseLeave">
  20.               <uploader-btn ref="btnUpload">上传文件</uploader-btn>
  21.               <uploader-btn :directory="true">上传文件夹</uploader-btn>
  22.             </div>
  23.             <!-- <button class="btn-newFolder ivu-btn">新建文件夹</button> -->
  24.             <div class="toolbox-contain">
  25.               <button class="btn-download ivu-btn" @click="multiDownload">下载</button>
  26.               <button v-if="!isSee" class="btn-delete ivu-btn" @click="multiDelete">删除</button>
  27.               <!-- <button class="btn-rename ivu-btn">重命名</button> -->
  28.               <!-- <button class="btn-copy ivu-btn">复制到</button>
  29.               <button class="btn-move ivu-btn">移动到</button> -->
  30.             </div>
  31.           </div>
  32.           <div style="float:right;display:inline-flex;">
  33.             <Input search clearable enter-button v-model="fileInput" placeholder="当前目录搜索文件/文件夹" @on-search="inputSearch" style="width:220px;vertical-align:bottom;margin-right:10px;" class="input-search"/>
  34.             <span class="btn-change" @click="changeMode">
  35.               <icon-svg :name="mode == 'list' ? 'list' : 'grid'" style="font-size:19px;cursor:pointer;"></icon-svg>
  36.             </span>
  37.           </div>
  38.           <div style="clear:both;"></div>
  39.         </div>
  40.         <div class="upload-contain">
  41.           <div class="contain-head">
  42.             <div class="contain-head-link">
  43.               <span v-if="linkIds.length == 1">全部文件</span>
  44.               <div v-else >
  45.                 <div v-for="(item, index) in linkIds" :key="item.id" v-if="index !== linkIds.length - 1" style="display:inline-block;">
  46.                   <a @click="linkTo(item.id)" class="linkIds">{{item.name}}</a>
  47.                   <span style="margin:0 5px;">></span>
  48.                 </div>
  49.                 <span>{{linkIds[linkIds.length - 1].name}}</span>
  50.               </div>
  51.             </div>
  52.             <div class="contain-head-num">已选中{{selectItems.length}}个文件/文件夹，共{{listData.length}}个</div>
  53.             <div style="clear:both;"></div>
  54.           </div>
  55.           <div class="contain-body">
  56.             <div v-if="mode == 'list'">
  57.               <div class="panel-list" style="position:relative;" :style="{height: height +'px'}">
  58.                 <Table ref="tables" v-if="listData.length" :columns="columns" :data="listData" :height="height" :no-data-text="''" @on-selection-change="selectChange"></Table>
  59.                 <div v-else style="position:absolute;left:50%;top:50%;text-align:center;margin:-43px 0 0 -36px;">
  60.                   <img style="margin-bottom:10px;" :src="require('@/assets/images/common/nodata.png')">
  61.                   <p style="letter-spacing:1px;">亲，没有你想要的数据</p>
  62.                 </div>
  63.               </div>
  64.             </div>
  65.             <div v-if="mode == 'grid'">
  66.               <div v-if="listData.length">
  67.                 <div style="border-bottom:1px solid #dcdee2;">
  68.                   <Checkbox v-model="selectAll" class="grid-check" @on-change="gridSelectAll">全选</Checkbox>
  69.                 </div>
  70.                 <div class="panel-grid" style="overflow-y:auto;" :style="{height: height - 30 +'px'}">
  71.                   <div v-for="item in listData" :key="item.id" class="grid-content" :class="{ actived: item._checked}"
  72.                     @click="/\.pdf|\.png|\.jpg|\.jpeg|\.bmp/.test(item.filePath.toLowerCase()) ? filePreview(item.filePath.replace('c:/tomcat/static', '')) : reloadGridById(item.id, item.fileType, item.fileType === '1' ? item.fileName : item.docName, item.filePath)"
  73.                     @mouseover="mouseoverGrid($event)" @mouseout="mouseoutGrid($event)" >
  74.                     <img class="panel-img1" draggable="false" v-if="/\.png|\.jpg|\.jpeg|\.bmp/.test(item.filePath.toLowerCase())" :src="item.filePath.replace('c:/tomcat/static', fileShowUrl)">
  75.                     <img class="panel-img" draggable="false" v-else :src="item.fileType === '1' ? (/\.pdf/.test(item.filePath.toLowerCase()) ? require('@/assets/images/common/pdf.png') : (/\.doc|\.docx/.test(item.filePath.toLowerCase()) ? require('@/assets/images/common/doc.png') : (/\.xls|\.xlsx/.test(item.filePath.toLowerCase()) ? require('@/assets/images/common/xls.png') : (/\.zip|\.rar|\.7z/.test(item.filePath.toLowerCase()) ? require('@/assets/images/common/zip.png') : (/\.ppt/.test(item.filePath.toLowerCase()) ? require('@/assets/images/common/ppt.png') : (/\.txt/.test(item.filePath.toLowerCase()) ? require('@/assets/images/common/txt.png') : (/\.avi|\.mov|\.qt|\.asf|\.rm|\.navi|\.divx|\.mpeg|\.mpg|\.dat|\.mp4/.test(item.filePath.toLowerCase()) ? require('@/assets/images/common/video.png') : require('@/assets/images/common/file.png')))))))) : require('@/assets/images/common/folder.png')">
  76.                     <div class="panel-title" :title="item.fileType === '1' ? item.fileName : item.docName">{{item.fileType === '1' ? item.fileName : item.docName}}</div>
  77.                     <img class="select-img" @click.stop="panelSelect(item)" :src="require('@/assets/images/common/cloudSelect.png')">
  78.                   </div>
  79.                   <div style="clear:both;"></div>
  80.                 </div>
  81.               </div>
  82.               <div v-else style="position:relative;" :style="{height: height +'px'}">
  83.                 <div style="position:absolute;left:50%;top:50%;text-align:center;margin:-43px 0 0 -36px;">
  84.                   <img style="margin-bottom:10px;" :src="require('@/assets/images/common/nodata.png')">
  85.                   <p style="letter-spacing:1px;">亲，没有你想要的数据</p>
  86.                 </div>
  87.               </div>
  88.             </div>
  89.           </div>
  90.         </div>
  91.         <Modal ref="mmodal" v-model="isshow" :transfer="false" :title="'上传列表'" :scrollable="true" :mask="false" :footer-hide="true" width="600" :class-name="'modalContain'">
  92.           <!-- <div slot="title">
  93.           </div> -->
  94.           <div slot="close">
  95.             <Icon :type="isMin ? 'md-square-outline' : 'md-remove'" @click.stop="minOrMax" style="font-size:15px;color:#FFF;"/>
  96.             <Icon type="md-close" style="font-size:16px;color:#FFF;"/>
  97.           </div>
  98.           <uploader-list></uploader-list>
  99.         </Modal>
  100.       </uploader-drop>
  101.     </uploader>
  102.     <Modal v-model="deleteModel" title="确认删除操作" @on-ok="handleDelete">
  103.       <p>确定删除选中的文件/文件夹</p>
  104.     </Modal>
  105.     <Dialog ref="dialog" :isPdf="true" :url="diaPath" :defaultHeight="diaHeight"></Dialog>
  106.   </div>
  107. </template>
  108.  
  109. <script>
  110. import { yunFileDownload, yunMultiFileDownload, yunFileDelete } from '@/api//api-base'
  111. import Dialog from '@/view/modules/common/dialog'
  112. export default {
  113.   data() {
  114.     return {
  115.       listData: [], // 数据
  116.       mode: 'list', // 展示模式
  117.       fileInput: '', // 查询栏值
  118.       selectAll: false, // 是否全选
  119.       selectItems: [], // 已选择的条目
  120.       panelShow: false, // 上传按钮区域是否显示
  121.       linkIds: [{id: '1', name: '全部文件'}], // 导航id
  122.       percent: 0, // 下载进度条
  123.       isshow: false, // 上传进度页面是否显示
  124.       isMin: false, // 上传进度页面是否最小化
  125.       deleteModel: false, // 删除提示框隐藏
  126.       fileShowUrl: window.SITE_CONFIG.fileShowURL,
  127.       diaPath: null, // 预览文件路径
  128.       diaHeight: 500, // 预览文件高度
  129.       isTip: true, // 控制是否提示用户无权限
  130.       fileStatusText: { // 上传列表状态提示
  131.         success: '成功',
  132.         error: '失败',
  133.         uploading: '上传中',
  134.         paused: '暂停',
  135.         waiting: '排队中'
  136.       },
  137.       columns: [
  138.         {
  139.           type: 'selection',
  140.           width: 60,
  141.           align: 'center'
  142.         },
  143.         {
  144.           title: '文件名',
  145.           key: 'fileName',
  146.           sortable: true,
  147.           sortMethod: (a, b, type) => type === 'asc' ? (a === null ? -1 : (b === null ? 1 : (a > b ? 1 : -1))) : (a === null ? -1 : (b === null ? 1 : (a < b ? 1 : -1))),
  148.           ellipsis: true,
  149.           render: (h, params) => {
  150.             let id = params.row.id
  151.             let fileType = params.row.fileType
  152.             let filePath = params.row.filePath
  153.             if(fileType === '1') { // 普通文件
  154.               let value = params.row.fileName
  155.               if (typeof (value) === 'undefined' || value === null || value === '') {
  156.                 value = '--'
  157.               }
  158.               return h('a', {
  159.                 attrs: {
  160.                   class: 'link ' + (/\.avi|\.mov|\.qt|\.asf|\.rm|\.navi|\.divx|\.mpeg|\.mpg|\.dat|\.mp4/.test(filePath.toLowerCase()) ? 'video-link' : (/\.ppt/.test(filePath.toLowerCase()) ? 'ppt-link' : (/\.txt/.test(filePath.toLowerCase()) ? 'txt-link' : (/\.png|\.jpg|\.jpeg|\.bmp/.test(filePath.toLowerCase()) ? 'picture-link' : (/\.pdf/.test(filePath.toLowerCase()) ? 'pdf-link' : (/\.doc|\.docx/.test(filePath.toLowerCase()) ? 'doc-link' : (/\.xls|\.xlsx/.test(filePath.toLowerCase()) ? 'xls-link' : (/\.zip|\.rar|\.7z/.test(filePath.toLowerCase()) ? 'zip-link' : 'file-link'))))))))
  161.                 },
  162.                 domProps: {
  163.                   title: value,
  164.                   innerHTML: value
  165.                 },
  166.                 on: {
  167.                   click: () => {
  168.                     if(/\.pdf|\.png|\.jpg|\.jpeg|\.bmp/.test(filePath.toLowerCase())) {
  169.                       this.filePreview(filePath.replace('c:/tomcat/static', ''))
  170.                     }else {
  171.                       this.downloadFile(filePath, value, 'file')
  172.                     }
  173.                   }
  174.                 }
  175.               })
  176.             }else if(fileType === '2') { // 文件夹
  177.               let value = params.row.docName
  178.               if (typeof (value) === 'undefined' || value === null || value === '') {
  179.                 value = '--'
  180.               }
  181.               return h('a', {
  182.                 attrs: {
  183.                   class: 'link folder-link'
  184.                 },
  185.                 domProps: {
  186.                   title: value,
  187.                   innerHTML: value
  188.                 },
  189.                 on: {
  190.                   click: () => {
  191.                     this.reloadById(id, value)
  192.                   }
  193.                 }
  194.               })
  195.             }
  196.           }
  197.         },
  198.         {
  199.           title: '大小',
  200.           sortable: true,
  201.           key: 'fileSize',
  202.           sortMethod: (a, b, type) => type === 'asc' ? (parseInt(a) > parseInt(b) ? 1 : -1) : (parseInt(a) < parseInt(b) ? 1 : -1),
  203.           render: (h, params) => {
  204.             let fileSize = params.row.fileSize
  205.             let value = '--'
  206.             if (typeof (fileSize) === 'undefined' || fileSize === null || fileSize === '') {
  207.             }else {
  208.               fileSize = parseInt(fileSize)
  209.               if(fileSize < 1024) {
  210.                 value = fileSize + 'B'
  211.               }else if(fileSize >= 1024 && fileSize < 1024 * 1024) {
  212.                 fileSize = parseFloat(fileSize / 1024).toFixed(1)
  213.                 value = fileSize + 'KB'
  214.               }else if(fileSize >= 1024 * 1024 && fileSize < 1024 * 1024 * 1024) {
  215.                 fileSize = parseFloat(fileSize / (1024 * 1024)).toFixed(1)
  216.                 value = fileSize + 'MB'
  217.               }else if(fileSize >= 1024 * 1024 * 1024 && fileSize < 1024 * 1024 * 1024 * 1024) {
  218.                 fileSize = parseFloat(fileSize / (1024 * 1024 * 1024)).toFixed(1)
  219.                 value = fileSize + 'GB'
  220.               }
  221.             }
  222.             return h('span', value + '')
  223.           }
  224.         },
  225.         {
  226.           title: '修改日期',
  227.           sortable: true,
  228.           key: 'createTime'
  229.         }
  230.       ],
  231.       options: {
  232.         target: 'url',
  233.         headers: {
  234.           token: this.$cookie.get('token')
  235.         },
  236.         allowDuplicateUploads: true,
  237.         query: {
  238.           flag: this.flag
  239.         },
  240.         parseTimeRemaining: function(timeRemaining, parsedTimeRemaining) {
  241.           return parsedTimeRemaining
  242.             .replace(/\syears?/, '年')
  243.             .replace(/\days?/, '天')
  244.             .replace(/\shours?/, '小时')
  245.             .replace(/\sminutes?/, '分钟')
  246.             .replace(/\sseconds?/, '秒')
  247.         },
  248.         chunkSize: 1024 * 1024 * 1024 * 1024,
  249.         testChunks: false
  250.       }
  251.     }
  252.   },
  253.   components: {
  254.     Dialog
  255.   },
  256.   props: {
  257.     height: {
  258.       type: Number,
  259.       default: 500
  260.     },
  261.     flag: {
  262.       type: String,
  263.       default: ''
  264.     },
  265.     isSee: { // 是否有操作权限
  266.       type: Boolean,
  267.       default: false
  268.     },
  269.     dataList: {
  270.       type: Array,
  271.       default: function() {
  272.         return []
  273.       }
  274.     }
  275.   },
  276.   created() {
  277.   },
  278.   computed: {
  279.     documentClientHeight: {
  280.       get() {
  281.         return this.$store.state.common.documentClientHeight
  282.       },
  283.       set(val) {
  284.         this.$store.commit('common/updateDocumentClientHeight', val)
  285.       }
  286.     }
  287.   },
  288.   methods: {
  289.     // 初始化预览框高度
  290.     initDialogHeight() {
  291.       this.diaHeight = this.documentClientHeight
  292.     },
  293.     // 改变页面布局
  294.     changeMode() {
  295.       if(this.mode === 'list') {
  296.         this.mode = 'grid'
  297.       }else if(this.mode === 'grid') {
  298.         this.mode = 'list'
  299.       }
  300.     },
  301.     // 列表某一项改变时触发
  302.     selectChange(selection) {
  303.       this.selectItems = selection
  304.     },
  305.     dragEnter(e) {
  306.       if(this.isTip) {
  307.         if(this.isSee) {
  308.           this.$Message.error('您没有上传权限')
  309.         }
  310.         this.isTip = false
  311.         setTimeout(() => {
  312.           this.isTip = true
  313.         }, 3000)
  314.       }
  315.     },
  316.     // 文件上传验证
  317.     onFileAdded(file) {
  318.       if(file.ignored) {
  319.       }else if(this.isSee) {
  320.         file.ignored = true
  321.       }else {
  322.         this.isshow = true
  323.       }
  324.     },
  325.     // 文件夹/多文件上传验证
  326.     onFilesAdded(files, fileList) {
  327.       if(this.isSee) {
  328.         files.ignored = true
  329.       }else {
  330.         this.isshow = true
  331.       }
  332.     },
  333.     onFileProgress() {
  334.       // 上传时自动弹出
  335.       this.isMin = false
  336.       this.isshow = true
  337.     },
  338.     // 文件上传成功
  339.     onComplete() {
  340.       // this.$Message.success('上传完毕')
  341.       this.fileInput = ''
  342.       const _this = this
  343.       _this.$emit('reloadList', {
  344.         id: '1',
  345.         fileName: this.fileInput
  346.       })
  347.       this.linkIds = [{id: '1', name: '全部文件'}]
  348.       setTimeout(() => {
  349.         _this.isMin = true
  350.       }, 1000)
  351.     },
  352.     inputSearch(value) {
  353.       this.$emit('reloadList', {
  354.         id: this.linkIds[this.linkIds.length - 1].id,
  355.         fileName: value
  356.       })
  357.     },
  358.     // 下载按钮
  359.     multiDownload() {
  360.       if(this.selectItems.length === 0) {
  361.         this.$Message.warning('请选择至少一个文件或文件夹')
  362.       }else {
  363.         let url = ''
  364.         let fileName = ''
  365.         if(this.selectItems.length === 1) {
  366.           let item = this.selectItems[0]
  367.           url = item.filePath
  368.           fileName = item.fileType === '2' ? (item.docName + '.zip') : item.fileName
  369.           this.downloadFile(url, fileName, item.fileType === '2' ? 'folder' : 'file')
  370.         }else {
  371.           this.selectItems.forEach((item, index) => {
  372.             url += item.filePath + ','
  373.           })
  374.           this.downloadMultiFile(url, '批量下载.zip')
  375.         }
  376.       }
  377.     },
  378.     multiDelete() {
  379.       if(this.selectItems.length === 0) {
  380.         this.$Message.warning('请选择至少一个文件或文件夹')
  381.       }else {
  382.         this.deleteModel = true
  383.       }
  384.     },
  385.     handleDelete() {
  386.       if(this.selectItems.length === 0) {
  387.         this.$Message.warning('请选择至少一个文件或文件夹')
  388.       }else {
  389.         let ids = ''
  390.         this.selectItems.forEach(item => {
  391.           ids += item.id + ','
  392.         })
  393.         let params = {
  394.           ids: ids,
  395.           flag: this.flag
  396.         }
  397.         yunFileDelete(params).then(res => {
  398.           if (res.status) {
  399.             // 删除成功状态
  400.             this.selectItems = []
  401.             this.$Message.success('成功删除信息')
  402.             // 刷新数据
  403.             this.$emit('reloadList', {
  404.               id: this.linkIds[this.linkIds.length - 1].id,
  405.               fileName: this.fileInput
  406.             })
  407.           }
  408.         })
  409.       }
  410.     },
  411.     filePreview(url) {
  412.       this.diaPath = url // 附件路径
  413.       this.$refs.dialog.open()
  414.     },
  415.     // 导航跳转
  416.     linkTo(id) {
  417.       this.fileInput = ''
  418.       this.$emit('reloadList', { // 刷新数据
  419.         id: id,
  420.         fileName: this.fileInput
  421.       })
  422.       this.selectItems = [] // 清空已选择文件
  423.       for(let i = 0; i < this.linkIds.length; i++) {
  424.         if(this.linkIds[i].id === id) {
  425.           this.linkIds.splice(i + 1, this.linkIds.length - 1 - i)
  426.           break
  427.         }
  428.       }
  429.     },
  430.     // 文件层级跳转 及拼接导航
  431.     reloadById(id, name) {
  432.       this.linkIds.push({'id': id, 'name': name})
  433.       this.selectItems = [] // 清空已选择文件
  434.       this.fileInput = ''
  435.       this.$emit('reloadList', { // 刷新数据
  436.         id: id,
  437.         fileName: this.fileInput
  438.       })
  439.     },
  440.     reloadGridById(id, type, name, path) {
  441.       if(type === '1') { // 文件下载
  442.         this.downloadFile(path, name, 'file')
  443.       }else if(type === '2') { // 文件夹下载
  444.         this.reloadById(id, name)
  445.       }
  446.     },
  447.     // 平铺面板的移入移出事件
  448.     mouseoverGrid(e) {
  449.       // e.target.$el.addClass('abc')
  450.       e.currentTarget.className += ' isMove'
  451.     },
  452.     mouseoutGrid(e) {
  453.       // e.target.$el.addClass('abc')
  454.       e.currentTarget.className = e.currentTarget.className.replace(/ isMove/g, '')
  455.     },
  456.     // 平铺面板的选中/取消事件
  457.     panelSelect(item) {
  458.       item._checked = !item._checked
  459.       if(item._checked) {
  460.         this.selectItems.push(item)
  461.       }else {
  462.         for(let i = 0; i < this.selectItems.length; i++) {
  463.           if(this.selectItems[i].id === item.id) {
  464.             this.selectItems.splice(i, 1)
  465.             break
  466.           }
  467.         }
  468.       }
  469.     },
  470.     // 平铺面板全选按钮事件
  471.     gridSelectAll(bool) {
  472.       if(bool) {
  473.         this.selectItems = JSON.parse(JSON.stringify(this.listData))
  474.       }else {
  475.         this.selectItems = []
  476.       }
  477.     },
  478.     minOrMax() {
  479.       this.isMin = !this.isMin
  480.     },
  481.     // 上传列表最大最小化公共方法
  482.     minChange() {
  483.       if(this.isMin) {
  484.         this.$refs.mmodal.$el.children[0].children[0].style.top = this.height + 168 + 'px'
  485.         // this.$refs.mmodal.$children[2].$el.style.height = '0px'
  486.         // this.$refs.mmodal.$children[2].$el.parentElement.style.padding = '0px'
  487.       }else {
  488.         this.$refs.mmodal.$el.children[0].children[0].style.top = (this.height + 168) * 0.6 + 'px'
  489.         // this.$refs.mmodal.$children[2].$el.style.height = (this.height + 190) * 0.4 - 76 + 'px'
  490.         // this.$refs.mmodal.$children[2].$el.parentElement.style.padding = '0.21333rem'
  491.       }
  492.       this.$refs.mmodal.$children[2].$el.style.height = (this.height + 168) * 0.4 - 27 + 'px'
  493.     },
  494.     // 模拟上传文件按钮
  495.     uploadClick() {
  496.       this.$refs.btnUpload.$el.click()
  497.     },
  498.     uploadMouseOver() {
  499.       this.panelShow = true
  500.     },
  501.     uploadMouseLeave() {
  502.       this.panelShow = false
  503.     },
  504.     // 仅用于单个文件下载
  505.     downloadFile(url, fileName, flag) {
  506.       const _this = this
  507.       _this.percent = 0
  508.       _this.$Spin.show({
  509.         render: (h) => {
  510.           return h('div', [
  511.             h('Progress', {
  512.               style: {
  513.                 width: '300px'
  514.               },
  515.               props: {
  516.                 percent: _this.percent
  517.               }
  518.             }, fileName.slice(0, 10) + '...' + fileName.slice(-10) + '下载中...' + _this.percent + '%')
  519.           ])
  520.         }
  521.       })
  522.       if (/\.pdf|\.PDF/.test(url)) {
  523.         const interval = setInterval(() => {
  524.           if (_this.percent === 10) {
  525.             _this.downloadMethod(url, fileName, flag)
  526.           }
  527.           if (_this.percent >= 80) {
  528.             clearInterval(interval)
  529.             return
  530.           }
  531.           _this.percent += 10
  532.         }, 500)
  533.       } else {
  534.         const interval = setInterval(() => {
  535.           if (_this.percent === 50) {
  536.             _this.downloadMethod(url, fileName, flag)
  537.           }
  538.           if (_this.percent >= 50) {
  539.             clearInterval(interval)
  540.             return
  541.           }
  542.           _this.percent += 10
  543.         }, 100)
  544.       }
  545.     },
  546.     downloadMethod(url, fileName, flag) {
  547.       const _this = this
  548.       url = url.replace(/\\/g, '/')
  549.       // 下载pdf
  550.       let params = {
  551.         path: url,
  552.         flag: flag
  553.       }
  554.       yunFileDownload(params).then(res => {
  555.         _this.closeProgress()
  556.         let blob = new Blob([res.data])
  557.         let objectUrl = URL.createObjectURL(blob)
  558.         let link = document.createElement('a')
  559.         link.href = objectUrl
  560.         link.setAttribute('download', fileName) // 下载文件的名字
  561.         document.body.appendChild(link)
  562.         link.style.display = 'none'
  563.         link.click()
  564.         document.body.removeChild(link)
  565.       })
  566.     },
  567.     closeProgress() {
  568.       const _this = this
  569.       const interval = setInterval(() => {
  570.         if (_this.percent >= 100) {
  571.           clearInterval(interval)
  572.           _this.$Message.success('文件下载成功')
  573.           _this.$Spin.hide()
  574.           return
  575.         }
  576.         _this.percent += 10
  577.       }, 100)
  578.     },
  579.     // 仅用于多个文件下载
  580.     downloadMultiFile(url, fileName) {
  581.       const _this = this
  582.       _this.percent = 0
  583.       _this.$Spin.show({
  584.         render: (h) => {
  585.           return h('div', [
  586.             h('Progress', {
  587.               style: {
  588.                 width: '300px'
  589.               },
  590.               props: {
  591.                 percent: _this.percent
  592.               }
  593.             }, fileName.slice(0, 10) + '...' + fileName.slice(-10) + '下载中...' + _this.percent + '%')
  594.           ])
  595.         }
  596.       })
  597.       const interval = setInterval(() => {
  598.         if (_this.percent === 10) {
  599.           _this.downloadMultiMethod(url, fileName)
  600.         }
  601.         if (_this.percent >= 80) {
  602.           clearInterval(interval)
  603.           return
  604.         }
  605.         _this.percent += 10
  606.       }, 500)
  607.     },
  608.     downloadMultiMethod(url, fileName) {
  609.       const _this = this
  610.       url = url.replace(/\\/g, '/')
  611.       // 下载pdf
  612.       let params = {
  613.         paths: url
  614.       }
  615.       yunMultiFileDownload(params).then(res => {
  616.         _this.closeProgress()
  617.         let blob = new Blob([res.data])
  618.         let objectUrl = URL.createObjectURL(blob)
  619.         let link = document.createElement('a')
  620.         link.href = objectUrl
  621.         link.setAttribute('download', fileName) // 下载文件的名字
  622.         document.body.appendChild(link)
  623.         link.style.display = 'none'
  624.         link.click()
  625.         document.body.removeChild(link)
  626.       })
  627.     }
  628.     // 23232
  629.     // initDragEvent() {
  630.     //   window.ondragleave = (e) => {
  631.     //     e.preventDefault()
  632.     //   }
  633.     //   window.ondrop = (e) => {
  634.     //     this.uploadFunc(e)
  635.     //   }
  636.     //   window.ondragenter = (e) => {
  637.     //     e.preventDefault() // 阻止拖入时的浏览器默认行为
  638.     //   }
  639.     //   window.ondragover = (e) => {
  640.     //     e.preventDefault() // 阻止拖来拖去的浏览器默认行为
  641.     //   }
  642.     // },
  643.     // uploadFunc(event) {
  644.     //   event.preventDefault()
  645.     //   let files = []
  646.     //   if (event.type === 'drop') {
  647.     //     let fileList = event.dataTransfer.files
  648.     //     let len = fileList.length
  649.     //     for (let i = 0; i < len; i++) {
  650.     //       files[i] = fileList[i]
  651.     //     }
  652.     //     if (files.length) {
  653.     //       let items = event.dataTransfer.items
  654.     //       if (items && items.length && items[0].webkitGetAsEntry != null) {
  655.     //         console.log(1)
  656.     //         this.addFilesItems(items)
  657.     //       }
  658.     //     }
  659.     //   }
  660.     // },
  661.     // addFilesItems(items) {
  662.     //   var ret = []
  663.     //   for (var i = 0; i < items.length; i++) {
  664.     //     var item = items[i]
  665.     //     var entry
  666.     //     if (item.webkitGetAsEntry && (entry = item.webkitGetAsEntry())) {
  667.     //       console.log(entry)
  668.     //       if (entry.isFile) {
  669.     //         // 把文件对象放到结果数组中  这里的addFile方法要单独写 我没有写上 这个不是重点
  670.     //         ret.push(this.addFile(item.getAsFiles()))
  671.     //       } else if (entry.isDirectory) {
  672.     //         ret.push(this.addFilesFormDirectory(entry, entry.name))
  673.     //       }
  674.     //     }
  675.     //   }
  676.     //   console.log(ret)
  677.     // },
  678.     // addFile(xx) {},
  679.     // // 读取文件夹下的文件
  680.     // addFilesFormDirectory(directory, path) {
  681.     //   const dirReader = directory.createReader()
  682.     //   const readEntries = () => {
  683.     //     return dirReader.readEntries((entries) => {
  684.     //       entries.forEach((entry) => {
  685.     //         console.log(entry)
  686.     //         if (entry.isFile) {
  687.     //           // 如果是文件
  688.     //           entry.file((file) => {
  689.     //             file.fullPath = path + '/' + file.name
  690.     //             console.log(path + '/' + file.name)
  691.     //             // 那么暴露出去的就是'文件夹/q.jpg'这种形式
  692.     //             return this.addFile(file)
  693.     //           })
  694.     //           // return this.addFile(file)
  695.     //         } else if (entry.isDirectory) {
  696.     //           // 递归处理
  697.     //           this.addFilesFormDirectory(entry, path + '/' + entry.name)
  698.     //         }
  699.     //       })
  700.     //     })
  701.     //   }
  702.     //   return readEntries()
  703.     // },
  704.   },
  705.   watch: {
  706.     'dataList': function() {
  707.       this.listData = this.dataList
  708.     },
  709.     'selectItems': function(array) {
  710.       if(this.listData.length > 0) {
  711.         this.listData.forEach(item => {
  712.           item._checked = false
  713.           for(let i = 0; i < array.length; i++) {
  714.             if(item.id === array[i].id) {
  715.               item._checked = true
  716.             }
  717.           }
  718.         })
  719.         if(this.listData.length === array.length) {
  720.           this.selectAll = true
  721.         }else {
  722.           this.selectAll = false
  723.         }
  724.       }
  725.     },
  726.     'height': function(h) {
  727.       this.minChange()
  728.     },
  729.     'isMin': function() {
  730.       this.minChange()
  731.     },
  732.     'documentClientHeight': function() {
  733.       this.initDialogHeight()
  734.     }
  735.   },
  736.   mounted() {
  737.     this.listData = this.dataList
  738.     this.minChange()
  739.     this.initDialogHeight()
  740.     // this.initDragEvent()
  741.   }
  742. }
  743. </script>
  744.  
  745. <style lang="less" scoped>
  746. .upload-container {
  747.   .uploader-drop {
  748.     padding: 0;
  749.     border: none;
  750.     background-color: inherit;
  751.   }
  752.   .upload-toolbox {
  753.     padding: 10px 20px 10px 10px;
  754.     position: relative;
  755.     .btn-upload {
  756.       color: #FFF;
  757.       background-color: #00A0E9;
  758.       width: 78PX;
  759.     }
  760.     .panel-upload {
  761.       position: absolute;
  762.       top: 53px;
  763.       left: 10px;
  764.       z-index: 1000;
  765.       background-color: #FFF;
  766.       border: 1px solid #00A0E9;
  767.       width: 78PX;
  768.       text-align: center;
  769.       .uploader-btn {
  770.         display: block;
  771.         color: #00A0E9;
  772.         border: none;
  773.         padding: 6px 8px;
  774.         &:hover {
  775.           background-color: #e0e8f3;
  776.         }
  777.       }
  778.     }
  779.     .btn-newFolder {
  780.       color: #00A0E9;
  781.     }
  782.     .toolbox-contain {
  783.       display: inline-block;
  784.       button {
  785.         color: #00A0E9;
  786.       }
  787.     }
  788.     .btn-change {
  789.       // float: right;
  790.       padding-top: 2px;
  791.     }
  792.     .input-search {
  793.       /deep/.ivu-input-icon {
  794.         right: 40PX;
  795.       }
  796.       /deep/.ivu-input {
  797.         padding-right: 23PX;
  798.       }
  799.     }
  800.   }
  801.   .upload-contain {
  802.     .contain-head {
  803.       padding: 3px 20px 5px 10px;
  804.       .contain-head-link {
  805.         float: left;
  806.       }
  807.       .contain-head-num {
  808.         float: right;
  809.       }
  810.     }
  811.     .contain-body {
  812.       .panel-list {
  813.         /deep/.ivu-table-wrapper {
  814.           border: 0px solid #dcdee2;
  815.           .ivu-table th {
  816.             background-color: #FFF;
  817.           }
  818.           .ivu-table td {
  819.             height: 55px;
  820.             position: relative;
  821.           }
  822.           .ivu-table:after {
  823.             width: 0;
  824.           }
  825.         }
  826.       }
  827.       .grid-check {
  828.         margin: 7px 0 7px 25PX;
  829.         /deep/.ivu-checkbox {
  830.           margin-right: 5px;
  831.         }
  832.       }
  833.       .panel-grid {
  834.         .grid-content {
  835.           height: 129PX;
  836.           width: 123PX;
  837.           float: left;
  838.           display: block;
  839.           margin: 1px;
  840.           padding-top: 20px;
  841.           cursor: pointer;
  842.           border-radius: 8px;
  843.           position: relative;
  844.           z-index: 200;
  845.           border: 1px solid #FFF;
  846.           .panel-img {
  847.             display: block;
  848.             width: 70px;
  849.             height: 70px;
  850.             margin: 15PX auto 16PX;
  851.           }
  852.           .panel-img1 {
  853.             display: block;
  854.             width: 90px;
  855.             height: 100px;
  856.             margin: 0px auto 10px;
  857.           }
  858.           .panel-title {
  859.             display: block;
  860.             // width: 100%;
  861.             margin: 0 10px;
  862.             text-align: center;
  863.             font-size: 12px;
  864.             white-space: nowrap;
  865.             overflow: hidden;
  866.             text-overflow: ellipsis;
  867.           }
  868.           &:hover {
  869.             background-color: #f6f6f6;
  870.             .panel-title {
  871.               color: #00A0E9;
  872.             }
  873.           }
  874.           .select-img {
  875.             position: absolute;
  876.             left: 8PX;
  877.             top: 8PX;
  878.             width: 22PX;
  879.             height: 22PX;
  880.             z-index: 300;
  881.             display: none;
  882.           }
  883.         }
  884.         .isMove {
  885.           .select-img {
  886.             opacity: .4;
  887.             display: block;
  888.             &:hover {
  889.               opacity: .5;
  890.             }
  891.           }
  892.         }
  893.         .actived {
  894.           border: 1px solid #00A0E9;
  895.           background-color: #f6f6f6;
  896.           .select-img {
  897.             opacity: 1;
  898.             display: block;
  899.             &:hover {
  900.               opacity: 1;
  901.             }
  902.           }
  903.         }
  904.       }
  905.     }
  906.   }
  907. }
  908. /deep/.ivu-table-sort {
  909.   width: 15PX;
  910.   height: 12PX;
  911.   i {
  912.     font-size: 14PX;
  913.   }
  914. }
  915. /deep/.ivu-checkbox-inner {
  916.   width: 11px;
  917. }
  918. /deep/.link {
  919.   color: #666666;
  920.   cursor: pointer;
  921.   padding-left: 30PX;
  922.   &:hover {
  923.     color: #00A0E9 !important;
  924.   }
  925. }
  926. /deep/.file-link {
  927.   &::before {
  928.     content: '';
  929.     background-image: url('~assets/images/common/file.png');
  930.     background-size: 24PX 24PX;
  931.     width: 24PX;
  932.     height: 24PX;
  933.     position: absolute;
  934.     margin-left: -32PX;
  935.     margin-top: -6PX;
  936.   }
  937. }
  938. /deep/.picture-link {
  939.   &::before {
  940.     content: '';
  941.     background-image: url('~assets/images/common/picture.png');
  942.     background-size: 24PX 24PX;
  943.     width: 24PX;
  944.     height: 24PX;
  945.     position: absolute;
  946.     margin-left: -32PX;
  947.     margin-top: -6PX;
  948.   }
  949. }
  950. /deep/.doc-link {
  951.   &::before {
  952.     content: '';
  953.     background-image: url('~assets/images/common/doc.png');
  954.     background-size: 24PX 24PX;
  955.     width: 24PX;
  956.     height: 24PX;
  957.     position: absolute;
  958.     margin-left: -32PX;
  959.     margin-top: -6PX;
  960.   }
  961. }
  962. /deep/.xls-link {
  963.   &::before {
  964.     content: '';
  965.     background-image: url('~assets/images/common/xls.png');
  966.     background-size: 24PX 24PX;
  967.     width: 24PX;
  968.     height: 24PX;
  969.     position: absolute;
  970.     margin-left: -32PX;
  971.     margin-top: -6PX;
  972.   }
  973. }
  974. /deep/.pdf-link {
  975.   &::before {
  976.     content: '';
  977.     background-image: url('~assets/images/common/pdf.png');
  978.     background-size: 24PX 24PX;
  979.     width: 24PX;
  980.     height: 24PX;
  981.     position: absolute;
  982.     margin-left: -32PX;
  983.     margin-top: -6PX;
  984.   }
  985. }
  986. /deep/.zip-link {
  987.   &::before {
  988.     content: '';
  989.     background-image: url('~assets/images/common/zip.png');
  990.     background-size: 24PX 24PX;
  991.     width: 24PX;
  992.     height: 24PX;
  993.     position: absolute;
  994.     margin-left: -32PX;
  995.     margin-top: -6PX;
  996.   }
  997. }
  998. /deep/.ppt-link {
  999.   &::before {
  1000.     content: '';
  1001.     background-image: url('~assets/images/common/ppt.png');
  1002.     background-size: 24PX 24PX;
  1003.     width: 24PX;
  1004.     height: 24PX;
  1005.     position: absolute;
  1006.     margin-left: -32PX;
  1007.     margin-top: -6PX;
  1008.   }
  1009. }
  1010. /deep/.txt-link {
  1011.   &::before {
  1012.     content: '';
  1013.     background-image: url('~assets/images/common/txt.png');
  1014.     background-size: 24PX 24PX;
  1015.     width: 24PX;
  1016.     height: 24PX;
  1017.     position: absolute;
  1018.     margin-left: -32PX;
  1019.     margin-top: -6PX;
  1020.   }
  1021. }
  1022. /deep/.video-link {
  1023.   &::before {
  1024.     content: '';
  1025.     background-image: url('~assets/images/common/video.png');
  1026.     background-size: 24PX 24PX;
  1027.     width: 24PX;
  1028.     height: 24PX;
  1029.     position: absolute;
  1030.     margin-left: -32PX;
  1031.     margin-top: -6PX;
  1032.   }
  1033. }
  1034. /deep/.folder-link {
  1035.   &::before {
  1036.     content: '';
  1037.     background-image: url('~assets/images/common/folder.png');
  1038.     background-size: 26PX 26PX;
  1039.     width: 26PX;
  1040.     height: 26PX;
  1041.     position: absolute;
  1042.     margin-left: -34PX;
  1043.     margin-top: -6PX;
  1044.   }
  1045. }
  1046. .linkIds {
  1047.   color: #00A0E9 !important;
  1048.   cursor: pointer;
  1049. }
  1050. /deep/.ivu-progress-outer{
  1051.   margin-bottom: 5px;
  1052. }
  1053. /deep/.modalContain{
  1054.   overflow: hidden;
  1055.   .ivu-modal {
  1056.     transition: all 1s ease;
  1057.     -webkit-transition: all 1s ease;
  1058.     margin: 0 40px 0 0;
  1059.     float: right;
  1060.     .ivu-modal-content{
  1061.       box-shadow: 0 0px 10px rgba(0,0,0,.15);
  1062.       border-radius: 6px 6px 0 0;
  1063.       .ivu-modal-header {
  1064.         background-color: #00A0E9;
  1065.         border-radius: 6px 6px 0 0;
  1066.         .ivu-modal-header-inner {
  1067.           color: #FFF;
  1068.         }
  1069.       }
  1070.       .ivu-modal-body {
  1071.         .uploader-list {
  1072.           overflow-y: auto;
  1073.         }
  1074.       }
  1075.     }
  1076.   }
  1077. }
  1078. </style>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/66602
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。