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

Vue结合webuploader实现文件分片断点续传_vue3 webuploader 分片

作者：知新_RL | 2024-02-07 17:53:36

赞

踩

vue3 webuploader 分片

根于公司业务，封装了底层的 文件分片断点续传底层能力组件 和 带有前端交互的UI组件

GitHub

  

目录

使用步骤

1. 基于vue-cli3，在public下创建webUploader目录

2. 引入jQuery

3. 文件分片断点续传底层能力组件

4. 文件分片断点续传UI组件

效果图

使用步骤

1. 基于vue-cli3，在public下创建webUploader目录

2. 引入jQuery

由于我司视频兼容能力业务需求，jQuery在index.html中引入。因此jQuery的引入方式有些简陋，多多包涵。。

3. 文件分片断点续传底层能力组件

大文件分片断点续传底层组件逻辑_五虎战画戟-CSDN博客基于 WebUploader，实例化 WebUploader，参数见文中注释this.uploader = WebUploader.create({ ...})注册 WebUploadernew WebUploader.Uploader.register({ beforeSend: (block) => { /** * 上传前，进行分片，分片后每一个片都有主键，然后接口验证是否已传过 * 若上传过则不再上传，若没有上传过则续传。 */ .https://blog.csdn.net/qq_41887214/article/details/114603949

  1. <template>
  2.   <div class="upload" />
  3. </template>
  4.  
  5. <script>
  6. import { fileUpload } from '@/api/upload-file'
  7. const qs = require('querystring')
  8. const md5 = window.md5
  9. const $ = window.$
  10.  
  11. export default {
  12.   name: 'VueWebuploader',
  13.   props: {
  14.     // 上传文件类型
  15.     accept: {
  16.       type: String,
  17.       default: null
  18.     },
  19.     // 上传地址
  20.     url: {
  21.       required: true,
  22.       type: String
  23.     },
  24.     // 上传文件总大小, 默认为100G
  25.     fileSizeLimit: {
  26.       type: Number,
  27.       default: 100 * 1024 * 1024 * 1024
  28.     },
  29.     // 上传最大数量 默认为100个
  30.     fileNumLimit: {
  31.       type: Number,
  32.       default: 100
  33.     },
  34.     // 大小限制 默认为100G
  35.     fileSingleSizeLimit: {
  36.       type: Number,
  37.       default: 100 * 1024 * 1024 * 1024
  38.     },
  39.     // 上传时传给后端的参数，一般为token，key等
  40.     formData: {
  41.       required: true,
  42.       type: Object
  43.     },
  44.     // 生成formData中文件的key，下面只是个例子，具体哪种形式和后端商议
  45.     keyGenerator: {
  46.       type: Function,
  47.       default(file) {
  48.         const currentTime = new Date().getTime()
  49.         const key = `${currentTime}.${file.name}`
  50.         return key
  51.       }
  52.     },
  53.     multiple: {
  54.       type: Boolean,
  55.       default: false
  56.     },
  57.     // 上传按钮{Seletor|dom}
  58.     uploadButton: {
  59.       required: true,
  60.       type: String
  61.     },
  62.     // 拖拽的容器{Selector}
  63.     uploadDndButton: {
  64.       type: String,
  65.       default: ''
  66.     }
  67.   },
  68.   data() {
  69.     return {
  70.       uploader: null,
  71.       publicOption: {},
  72.       uploadContCommon: {
  73.         onUploadFileErr: null,
  74.         onUploadFileSuccess: null,
  75.         callbackDate: null
  76.       },
  77.       chunkSize: 5 * 1024 * 1024, // 分块大小
  78.       fileMd5MarkMap: new Map(),
  79.       uniqueFileNameMap: new Map()
  80.     }
  81.   },
  82.   mounted() {
  83.     this.initWebUpload()
  84.   },
  85.   methods: {
  86.     initWebUpload() {
  87.       const that = this
  88.       new WebUploader.Uploader.register(
  89.         {
  90.           'before-send-file': 'beforeSendFile',
  91.           'before-send': 'beforeSend',
  92.           'after-send-file': 'afterSendFile'
  93.         },
  94.         {
  95.           // // 上传文件开始前触发MD5校验，用了这个会很慢很慢，因此注掉
  96.           // beforeSendFile: function(file) {
  97.           //   if (that.publicOption.uploadProgress) {
  98.           //     that.publicOption.beforeSendFile(file)
  99.           //   }
  100.           //   console.log('上传文件前触发')
  101.           //   // return false
  102.           //   // 秒传验证
  103.           //   // const task = new $.Deferred()
  104.           //   that.uploader.md5File(file).progress(percentage => {
  105.           //     // 及时显示进度
  106.           //     console.log('percentage', percentage)
  107.           //   }).then(function(val) {
  108.           //     // 完成
  109.           //     console.log('上传文件前触发完成', val)
  110.           //     // $('#' + file.id + ' .operate .del_btn').show()
  111.           //     // $("#" + file.id + " .operate .pause_btn").show();
  112.           //     // console.log("总耗时: "+ ((new Date().getTime()) - start)/ 1E3);
  113.           //     // md5Mark = val
  114.           //     that.fileMd5MarkMap.set(file.id, val)
  115.           //     fileUpload(qs.stringify({ status: 'md5Check', md5: val }), that.url).then(res => {
  116.           //       const { data } = res
  117.           //       if (data.ifExist) {
  118.           //         that.uploader.skipFile(file)
  119.           //         file.path = res.path
  120.           //         that.UploadComlate(file, this.fileMd5MarkMap.get(file.id))
  121.           //       }
  122.           //     })
  123.           //   })
  124.           // },
  125.           // 开始上传分片触发
  126.           beforeSend: function(block) {
  127.             // 分片验证是否已传过，用于断点续传
  128.             var task = new $.Deferred()
  129.             var file = block.file
  130.             var id = file.id
  131.  
  132.             that.uploader.md5File(file, block.start, block.end).then(val => {
  133.               var params = {
  134.                 status: 'chunkCheck',
  135.                 name: that.uniqueFileNameMap.get(id),
  136.                 chunkIndex: block.chunk,
  137.                 size: block.end - block.start,
  138.                 userId: that.formData.userId,
  139.                 companyId: that.formData.companyId,
  140.                 appCode: that.formData.appCode,
  141.                 blockmd5: val
  142.               }
  143.  
  144.               fileUpload(qs.stringify(params), that.url).then(res => {
  145.                 const { data } = res
  146.                 if (data.ifExist === 1) { // 若存在，返回失败给WebUploader，表明该分块不需要上传
  147.                   task.reject()
  148.                 } else {
  149.                   task.resolve()
  150.                 }
  151.               }, function(jqXHR, textStatus, errorThrown) { // 任何形式的验证失败，都触发重新上传
  152.                 task.reject()
  153.               })
  154.             })
  155.             return $.when(task)
  156.           },
  157.           // 上传文件完成触发
  158.           afterSendFile: function(file) {
  159.             var chunksTotal = Math.ceil(file.size / that.chunkSize)
  160.             // 合并请求
  161.             var task = new $.Deferred()
  162.             var params = {
  163.               status: 'chunksMerge',
  164.               name: that.uniqueFileNameMap.get(file.id),
  165.               chunks: chunksTotal,
  166.               ext: file.ext,
  167.               md5: that.fileMd5MarkMap.get(file.id),
  168.               userId: that.formData.userId,
  169.               companyId: that.formData.companyId,
  170.               appCode: that.formData.appCode
  171.             }
  172.  
  173.             fileUpload(qs.stringify(params), that.url).then(res => {
  174.               const { data } = res
  175.               if (data.path) {
  176.                 file.path = data.path
  177.                 // 最初的时候是在uploadSuccess发布的成功事件，后来发现有时取不到返回的file.path，因此换到了在merge文件碎片回调中发布上传成功事件
  178.                 that.$emit('success', file, res)
  179.               }
  180.               task.resolve()
  181.               that.uniqueFileNameMap.delete(file.id)
  182.               that.fileMd5MarkMap.delete(file.id)
  183.             }).catch(err => {
  184.               console.info(err)
  185.             })
  186.             return $.when(task)
  187.           }
  188.         })
  189.  
  190.       this.uploader = WebUploader.create({
  191.         auto: true, // {Boolean} [可选] [默认值：false] 设置为 true 后，不需要手动调用上传，有文件选择即开始上传（选完文件后，是否自动上传）
  192.         swf: '/public/webUploader/js/Uploader.swf', // swf文件路径
  193.         server: this.url + 'fileUpload', // 文件接收服务端
  194.         pick: { // 指定选择文件的按钮容器，不指定则不创建按钮
  195.           id: this.uploadButton, // {Seletor|dom} 指定选择文件的按钮容器，不指定则不创建按钮。注意 这里虽然写的是 id, 但是不是只支持 id, 还支持 class, 或者 dom 节点。
  196.           multiple: this.multiple, // {Boolean} 是否开启同时选择多个文件能力。
  197.           label: '', // {String} 请采用 innerHTML 代替
  198.           innerHTML: '' // {String} 指定按钮文字。不指定时优先从指定的容器中看是否自带文字
  199.         },
  200.         dnd: this.uploadDndButton, // {Selector} [可选] [默认值：undefined] 指定Drag And Drop拖拽的容器，如果不指定，则不启动。
  201.         disableWidgets: 'log', // {String, Array} [可选] [默认值：undefined] 默认所有 Uploader.register 了的 widget 都会被加载，如果禁用某一部分，请通过此 option 指定黑名单。
  202.         paste: document.body, // {Selector} [可选] [默认值：undefined] 指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为document.body.
  203.         disableGlobalDnd: true, // {Selector} [可选] [默认值：false] 是否禁掉整个页面的拖拽功能，如果不禁用，图片拖进来的时候会默认被浏览器打开。
  204.         thumb: { // {Object} [可选] 配置生成缩略图的选项。
  205.           width: 100,
  206.           height: 100,
  207.           quality: 100, // // 图片质量，只有type为`image/jpeg`的时候才有效。
  208.           allowMagnify: false, // // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
  209.           crop: true // 是否允许裁剪。
  210.           // type: 'image/jpeg' // 为空的话则保留原有图片格式，否则强制转换成指定的类型。
  211.         },
  212.         compress: false, // {Object} [可选] 配置压缩的图片的选项。如果此选项为false, 则图片在上传前不进行压缩。
  213.         prepareNextFile: true, // {Boolean} [可选] [默认值：false] 是否允许在文件传输时提前把下一个文件准备好。 对于一个文件的准备工作比较耗时，比如图片压缩，md5序列化。 如果能提前在当前文件传输期处理，可以节省总体耗时。
  214.         chunked: true, // {Boolean} [可选] [默认值：false] 是否要分片处理大文件上传。
  215.         chunkSize: this.chunkSize, // {Boolean} [可选] [默认值：5242880] 如果要分片，分多大一片？ 默认大小为5M.
  216.         threads: 5, // {Boolean} [可选] [默认值：3] 上传并发数。允许同时最大上传进程数。
  217.         formData: this.formData, // {Object} [可选] [默认值：{}] 文件上传请求的参数表，每次发送都会发送此对象中的参数。
  218.         fileSizeLimit: this.fileSizeLimit, // {int} [可选] [默认值：undefined] 验证文件总大小是否超出限制, 超出则不允许加入队列。
  219.         fileSingleSizeLimit: this.fileSingleSizeLimit, // {int} [可选] [默认值：undefined] 验证单个文件大小是否超出限制, 超出则不允许加入队列。
  220.         fileNumLimit: this.fileNumLimit, // {int} [可选] [默认值：undefined] 限制上传个数，验证文件总数量, 超出则不允许加入队列。
  221.         resize: false, // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
  222.         accept: this.getAccept(this.accept), // {Arroy} [可选] [默认值：null] 指定接受哪些类型的文件。 由于目前还有ext转mimeType表，所以这里需要分开指定。
  223.         duplicate: true // {Boolean} [可选] [默认值：undefined] 去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.
  224.       })
  225.  
  226.       // 当有文件被添加进队列的时候，添加到页面预览
  227.       this.uploader.on('fileQueued', (file) => {
  228.         const that = this
  229.         // 将事件绑定到文件，保证在发生页面切换时之前已经开始上传的文件的回调事件不会发生变化
  230.         file.onUploadFileErr = that.uploadContCommon.onUploadFileErr
  231.         file.onUploadFileSuccess = that.uploadContCommon.onUploadFileSuccess
  232.         file.callbackDate = that.uploadContCommon.callbackDate
  233.  
  234.         that.uploader.sort(function(a, b) { return a.size - b.size })// 多文件同时加入时小文件优先上传
  235.         var uniqueFileName = md5(file.name + file.size + file.type + that.formData.userId)// 文件唯一标识
  236.         that.uniqueFileNameMap.set(file.id, uniqueFileName)
  237.         that.uploader.makeThumb(file, function(error, ret) {
  238.           if (error) {
  239.             // console.log('预览错误，上传的不是图片吧？')
  240.           } else {
  241.             // console.log('预览成功 base64')
  242.           }
  243.         })
  244.         that.$emit('fileChange', file)
  245.       })
  246.  
  247.       this.uploader.on('uploadStart', (file) => {
  248.         // 在这里可以准备好formData的数据
  249.         // this.uploader.options.formData.key = this.keyGenerator(file);
  250.       })
  251.  
  252.       // 文件上传过程中创建进度条实时显示。
  253.       this.uploader.on('uploadProgress', (file, percentage) => {
  254.         this.$emit('progress', file, percentage)
  255.       })
  256.  
  257.       this.uploader.on('uploadSuccess', (file, response) => {
  258.         // this.$emit('success', file, response)
  259.         // 最初的时候是在此处发布的成功事件，后来发现有时取不到返回的file.path，因此换到了在merge文件碎片回调中发布上传成功事件
  260.       })
  261.  
  262.       this.uploader.on('uploadError', (file, reason) => {
  263.         this.$emit('uploadError', file, reason)
  264.       })
  265.  
  266.       this.uploader.on('error', (type) => {
  267.         let errorMessage = ''
  268.         if (type === 'F_EXCEED_SIZE') {
  269.           errorMessage = `文件大小不能超过${this.fileSingleSizeLimit / (1024 * 1000)}M`
  270.         } else if (type === 'Q_EXCEED_NUM_LIMIT') {
  271.           errorMessage = '文件上传已达到最大上限数'
  272.         } else {
  273.           errorMessage = `上传出错！请检查后重新上传！错误代码${type}`
  274.         }
  275.         this.$emit('error', errorMessage)
  276.       })
  277.  
  278.       this.uploader.on('uploadComplete', (file, response) => {
  279.         this.$emit('complete', file, response)
  280.       })
  281.     },
  282.  
  283.     upload(file) {
  284.       this.uploader.upload(file)
  285.     },
  286.     stop(file) {
  287.       this.uploader.stop(file)
  288.     },
  289.     // 取消并中断文件上传
  290.     cancelFile(file) {
  291.       this.uploader.cancelFile(file)
  292.     },
  293.     // 在队列中移除文件
  294.     removeFile(file, bool) {
  295.       this.uploader.removeFile(file, bool)
  296.     },
  297.  
  298.     // 获取上传文件类型
  299.     getAccept(accept) {
  300.       switch (accept) {
  301.         case 'text':
  302.           return {
  303.             title: 'Texts',
  304.             exteensions: 'doc,docx,xls,xlsx,ppt,pptx,pdf,txt', // {String} 允许的文件后缀，不带点，多个用逗号分割。
  305.             mimeTypes: '.doc,docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt' // {String} 多个用逗号分割。
  306.           }
  307.         case 'video':
  308.           return {
  309.             title: 'Videos',
  310.             exteensions: 'mp4',
  311.             mimeTypes: '.mp4'
  312.           }
  313.         case 'image':
  314.           return {
  315.             title: 'Images',
  316.             exteensions: 'gif,jpg,jpeg,bmp,png',
  317.             mimeTypes: '.gif,.jpg,.jpeg,.bmp,.png'
  318.           }
  319.         default: return accept
  320.       }
  321.     }
  322.   }
  323. }
  324. </script>
  325.  
  326. <style lang="scss">
  327.   .webuploader-container {
  328.     position: relative;
  329.   }
  330.   .webuploader-element-invisible {
  331.     position: absolute !important;
  332.     clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  333.     clip: rect(1px,1px,1px,1px);
  334.   }
  335.   .webuploader-pick {
  336.     position: relative;
  337.     display: inline-block;
  338.     cursor: pointer;
  339.     background: #00b7ee;
  340.     padding: 10px 15px;
  341.     text-align: center;
  342.     border-radius: 3px;
  343.     overflow: hidden;
  344.   }
  345.   .webuploader-pick-hover {
  346.     background: #00a2d4;
  347.   }
  348.  
  349.   .webuploader-pick-disable {
  350.     opacity: 0.6;
  351.     pointer-events:none;
  352.   }
  353. </style>

4. 文件分片断点续传UI组件

  1. <!--/**-->
  2. <!--* @Author: YanHuaKang-->
  3. <!--* @Date: 2019/11/21-->
  4. <!--* @Description: 文件分片断点续传UI组件-->
  5. <!--* @remarks:-->
  6. <!--*/-->
  7. <template>
  8.   <transition :name="transitionName">
  9.     <div id="mainFileUpload" :style="visibility">
  10.       <div id="header" class="clearfix">
  11.         <p class="fl title">上传资料</p>
  12.         <div class="fr icons">
  13.           <span
  14.             v-if="!isMinimality"
  15.             @click="minimality"
  16.           ><i
  17.             class="minimality iconfont iconjianhao"
  18.           /></span>
  19.           <span
  20.             v-if="isMinimality"
  21.             @click="open"
  22.           ><i
  23.             class="spread iconfont iconjiahao"
  24.           /></span>
  25.           <span @click="close"><i class="close iconfont iconguanbi" /></span>
  26.         </div>
  27.       </div>
  28.       <div class="content">
  29.         <div id="filePicker">
  30.           <div class="drag-upload">
  31.             <i class="iconfont iconshangchuan" />
  32.             <p>可拖拽文件至此直接上传</p>
  33.           </div>
  34.         </div>
  35.         <div id="file-panel">
  36.           <div id="file-list">
  37.             <el-scrollbar wrap-class="scrollbar-wrapper">
  38.               <ul
  39.                 v-for="(file, index) in fileList"
  40.                 :key="file.id"
  41.                 class="file-item"
  42.                 :class="`file-${file.id}`"
  43.               >
  44.                 <li class="file-type" :icon="fileCategory(file.ext)">
  45.                   <svg v-if="fileCategory(file.ext) === 'image'" class="icon" aria-hidden="true">
  46.                     <use xlink:href="#icontupian" />
  47.                   </svg>
  48.                   <svg v-else-if="fileCategory(file.ext) === 'video'" class="icon" aria-hidden="true">
  49.                     <use xlink:href="#iconvideo-" />
  50.                   </svg>
  51.                   <svg v-else-if="fileCategory(file.ext) === 'audio'" class="icon" aria-hidden="true">
  52.                     <use xlink:href="#iconaudio" />
  53.                   </svg>
  54.                   <svg v-else-if="fileCategory(file.ext) === 'text'" class="icon" aria-hidden="true">
  55.                     <use xlink:href="#icontext" />
  56.                   </svg>
  57.                   <svg v-else-if="fileCategory(file.ext) === 'excel'" class="icon" aria-hidden="true">
  58.                     <use xlink:href="#iconex" />
  59.                   </svg>
  60.                   <svg v-else-if="fileCategory(file.ext) === 'ppt'" class="icon" aria-hidden="true">
  61.                     <use xlink:href="#iconppt" />
  62.                   </svg>
  63.                   <svg v-else-if="fileCategory(file.ext) === 'pdf'" class="icon" aria-hidden="true">
  64.                     <use xlink:href="#iconpdf1" />
  65.                   </svg>
  66.                   <svg v-else-if="fileCategory(file.ext) === 'compressed'" class="icon" aria-hidden="true">
  67.                     <use xlink:href="#iconyasuobao" />
  68.                   </svg>
  69.                   <svg v-else class="icon" aria-hidden="true">
  70.                     <use xlink:href="#iconyemian" />
  71.                   </svg>
  72.                 </li>
  73.                 <el-tooltip
  74.                   class="file-name-tip"
  75.                   effect="dark"
  76.                   :content="file.name"
  77.                   placement="top-start"
  78.                 >
  79.                   <li class="file-name singleLineOmission">{{ file.name }}</li>
  80.                 </el-tooltip>
  81.                 <li class="progress">
  82.                   <el-progress :key="index" :percentage="progress[file.id]" :color="customColors" />
  83.                 </li>
  84.                 <li class="file-size">{{ fileSize(file.size) }}</li>
  85.                 <!--<li class="file-status">上传中...</li>-->
  86.                 <li class="file-operate">
  87.                   <!--<a title="开始" @click="resume(file)"><i class="iconfont iconkaishi" /></a>-->
  88.                   <!--<a title="暂停" @click="stop(file)"><i class="iconfont iconzanting1" /></a>-->
  89.                   <span
  90.                     class="pointer file-remove"
  91.                     title="移除"
  92.                     @click="remove(file)"
  93.                   ><i
  94.                     class=" iconfont iconguanbi"
  95.                   /></span>
  96.                 </li>
  97.               </ul>
  98.               <div v-if="!fileList.length" class="no-file">
  99.                 <i class="iconfont icon-empty-file" /> 暂无待上传文件
  100.               </div>
  101.             </el-scrollbar>
  102.           </div>
  103.         </div>
  104.       </div>
  105.       <div class="clearfix btnGroup">
  106.         <div id="btnGroup" class="fr">
  107.           <el-button type="primary" @click="clear()">清空上传</el-button>
  108.         </div>
  109.       </div>
  110.       <vue-webuploader
  111.         ref="uploader"
  112.         upload-button="#filePicker"
  113.         upload-dnd-button="#filePicker"
  114.         multiple
  115.         :form-data="formData"
  116.         :url="url"
  117.         @fileChange="fileChange"
  118.         @progress="onProgress"
  119.         @success="onSuccess"
  120.       />
  121.     </div>
  122.   </transition>
  123. </template>
  124.  
  125. <script>
  126. import store from '@/store'
  127. import { mapGetters } from 'vuex'
  128. import VueWebuploader from '@/components/VueWebuploader/VueWebuploader.vue'
  129. import { deskAddFile, knowledgeCreateFile } from '@/api/upload-file'
  130. const WebUploader = window.WebUploader
  131. export default {
  132.   name: 'FileUploader',
  133.   components: {
  134.     VueWebuploader
  135.   },
  136.   props: {
  137.     customStyle: {
  138.       type: Object,
  139.       default: function() {
  140.         return {
  141.           right: '50px',
  142.           bottom: '0px'
  143.         }
  144.       }
  145.     },
  146.     transitionName: {
  147.       type: String,
  148.       default: 'fade'
  149.     }
  150.   },
  151.   data() {
  152.     return {
  153.       uploadButton: 'filePicker',
  154.       fileList: [], // 上传列表
  155.       url: this.$store.state.user.applicationInfo.uploadUrl, // 租户上传路径
  156.       formData: {
  157.         // 参数
  158.         userId: this.$store.state.user.applicationInfo.userId,
  159.         companyId: this.$store.state.user.applicationInfo.companyId,
  160.         appCode: this.$store.state.user.applicationInfo.appCode
  161.       },
  162.       fileQueued: new Map(), // 上传队列
  163.       customColors: [
  164.         { color: '#f56c6c', percentage: 20 },
  165.         { color: '#e6a23c', percentage: 40 },
  166.         { color: '#5cb87a', percentage: 60 },
  167.         { color: '#1989fa', percentage: 80 },
  168.         { color: '#20c7b3', percentage: 100 }
  169.       ],
  170.       progress: {} // 进度
  171.     }
  172.   },
  173.   computed: {
  174.     ...mapGetters(['visibility', 'isMinimality', 'belongs'])
  175.   },
  176.   watch: {},
  177.   mounted() {
  178.     store.dispatch('fileUpload/isVisibility', 2)
  179.   },
  180.   created() {},
  181.   methods: {
  182.     // 关闭
  183.     close() {
  184.       store.dispatch('fileUpload/isVisibility', 2)
  185.     },
  186.     // 最小化
  187.     minimality() {
  188.       store.dispatch('fileUpload/isVisibility', 3)
  189.     },
  190.     // 展开
  191.     open() {
  192.       store.dispatch('fileUpload/isVisibility', 1)
  193.     },
  194.  
  195.     // 上传变化
  196.     fileChange(file) {
  197.       if (!file.size) return
  198.       file.progress = 10
  199.       this.fileList.push(file)
  200.       this.$set(this.progress, file.id, 0)
  201.       const sourceUid = file.source.uid // 文件上传文件唯一id
  202.       const belongs = {
  203.         data_type: this.belongs.data_type,
  204.         ownerId: this.belongs.ownerId,
  205.         parentId: this.belongs.parentId,
  206.         selectCompanyId: this.belongs.selectCompanyId
  207.       }
  208.       this.fileQueued.set(sourceUid, belongs)
  209.     },
  210.  
  211.     // 上传进度
  212.     onProgress(file, percent) {
  213.       const progress = (Math.ceil(percent * 100 * 100) / 100)
  214.       this.$set(this.progress, file.id, progress)
  215.     },
  216.  
  217.     // 上传成功
  218.     onSuccess(file, response) {
  219.       // console.log('file', file)
  220.       // console.log('response', response)
  221.       // console.log('上传成功', file)
  222.       // console.log(this.belongs)
  223.       // console.log('file.path', file.path)
  224.       file.path = file.path || ''
  225.       const fileId = file.path.split('ZmlsZUlk=')[1]
  226.       const sourceUid = file.source.uid // 文件上传文件唯一id
  227.       var currentFile = this.fileQueued.get(sourceUid)
  228.       // console.log('sourceUid', sourceUid)
  229.       // console.log('currentFile', currentFile)
  230.       // console.log('this.fileQueued', this.fileQueued)
  231.       // console.log('fileId', fileId)
  232.       if (currentFile.data_type === 3) {
  233.         const params = {
  234.           fileFormat: file.ext,
  235.           fileName: file.name,
  236.           fileSize: file.size,
  237.           fileUrl: file.path,
  238.           resourceFileId: fileId
  239.         }
  240.         deskAddFile(params).then(res => {
  241.           console.log(res)
  242.           this.$message.success('上传成功！')
  243.           store.dispatch('fileUpload/deskAddFileSuccess', res.data)
  244.         })
  245.       } else {
  246.         // const currentFile = this.fileQueued.get(sourceUid)
  247.         const params = {
  248.           format: file.ext,
  249.           name: file.name,
  250.           size: file.size,
  251.           url: file.path,
  252.           data_type: currentFile.data_type,
  253.           ownerId: currentFile.ownerId,
  254.           parentId: currentFile.parentId,
  255.           selectCompanyId: currentFile.selectCompanyId,
  256.           fileId: fileId
  257.         }
  258.         knowledgeCreateFile(params).then(res => {
  259.           // console.log(res)
  260.           this.$message.success('上传成功！')
  261.           store.dispatch('fileUpload/createFileSuccess', res.data)
  262.         })
  263.       }
  264.     },
  265.  
  266.     // 开始
  267.     resume(file) {
  268.       this.$refs.uploader.upload(file)
  269.     },
  270.     // 暂停
  271.     stop(file) {
  272.       this.$refs.uploader.stop(file)
  273.     },
  274.  
  275.     // 移除
  276.     remove(file) {
  277.       this.$confirm('确定要删除此上传任务吗？', '删除任务', {
  278.         confirmButtonText: '确定',
  279.         cancelButtonText: '取消',
  280.         type: 'warning'
  281.       })
  282.         .then(() => {
  283.           // 取消并中断文件上传
  284.           this.$refs.uploader.cancelFile(file)
  285.           // 在队列中移除文件
  286.           this.$refs.uploader.removeFile(file, true)
  287.  
  288.           // 在ui上移除
  289.           const index = this.fileList.findIndex(ele => ele.id === file.id)
  290.           this.fileList.splice(index, 1)
  291.         })
  292.         .catch(() => {})
  293.     },
  294.  
  295.     // 清空
  296.     clear() {
  297.       var that = this
  298.       if (this.fileList.length) {
  299.         this.$confirm('确定要清空上传任务吗？', '清空上传', {
  300.           confirmButtonText: '确定',
  301.           cancelButtonText: '取消',
  302.           type: 'warning'
  303.         })
  304.           .then(() => {
  305.             for (
  306.               var index = 0, len = that.fileList.length;
  307.               index < len;
  308.               index++
  309.             ) {
  310.               var file = that.fileList[index]
  311.               that.$refs.uploader.cancelFile(file)
  312.               that.$refs.uploader.removeFile(file, true)
  313.               that.fileList.splice(index--, 1)
  314.             }
  315.           })
  316.           .catch(() => {})
  317.       }
  318.     },
  319.  
  320.     // 文件大小
  321.     fileSize(size) {
  322.       return WebUploader.Base.formatSize(size)
  323.     },
  324.  
  325.     // 文件类别
  326.     fileCategory(ext) {
  327.       let type = ''
  328.  
  329.       const typeMap = {
  330.         image: ['gif', 'jpg', 'jpeg', 'png', 'bmp', 'webp'],
  331.         video: ['mp4', 'm3u8', 'rmvb', 'avi', 'swf', '3gp', 'mkv', 'flv'],
  332.         audio: ['mp3', 'wma', 'rm', 'wav', 'midi', 'ape', 'flac'],
  333.         text: [
  334.           'doc',
  335.           'txt',
  336.           'docx',
  337.           'pages',
  338.           'epub'
  339.         ],
  340.         excel: ['numbers', 'csv', 'xls', 'xlsx'],
  341.         ppt: ['keynote', 'ppt', 'pptx'],
  342.         compressed: ['zip', 'rar'],
  343.         pdf: ['pdf']
  344.       }
  345.  
  346.       Object.keys(typeMap).forEach(_type => {
  347.         const extensions = typeMap[_type]
  348.         if (extensions.indexOf(ext) > -1) {
  349.           type = _type
  350.         }
  351.       })
  352.  
  353.       return type
  354.     }
  355.   }
  356. }
  357. </script>
  358.  
  359. <style lang="scss" scoped>
  360. @import "~@/styles/theme.scss";
  361.  
  362. #mainFileUpload {
  363.   visibility: hidden;
  364.   width: 38%;
  365.   height: 60vh;
  366.   position: fixed;
  367.   bottom: -522px;
  368.   right: 20px;
  369.   z-index: 100;
  370.   border: 1px solid #e0e0e0;
  371.   border-radius: 5px;
  372.   background: #ffffff;
  373.   overflow: hidden;
  374.   transition: bottom 1s;
  375.  
  376.   > #header {
  377.     height: 40px;
  378.     line-height: 40px;
  379.     padding: 0 20px;
  380.     background-color: $themeColor;
  381.  
  382.     > .title {
  383.       color: #ffffff;
  384.       margin: 0;
  385.       font-size: 14px;
  386.     }
  387.  
  388.     > .fr.icons span {
  389.       width: 14px;
  390.       height: 14px;
  391.       background-color: #ffffff;
  392.       color: $themeColor;
  393.       cursor: pointer;
  394.     }
  395.  
  396.     > .fr.icons span i {
  397.       font-size: 14px;
  398.     }
  399.   }
  400.  
  401.   > .content {
  402.     padding: 1.5vh 20px;
  403.  
  404.     > #filePicker {
  405.       width: 100%;
  406.       height: 15vh;
  407.       background-color: #fafafa;
  408.       border-radius: 5px;
  409.     }
  410.   }
  411.  
  412.   .drag-upload {
  413.     width: 200px;
  414.     margin: 0 auto;
  415.     margin-top: 18px;
  416.     color: #bbbbbb;
  417.  
  418.     > .iconfont {
  419.       font-size: 50px;
  420.     }
  421.   }
  422.  
  423.   #file-panel {
  424.     margin-top: 1.5vh;
  425.   }
  426.  
  427.   #file-panel .el-scrollbar {
  428.     height: 29vh;
  429.   }
  430.  
  431.   #file-list {
  432.     position: relative;
  433.     overflow-y: auto;
  434.   }
  435.  
  436.   .file-item {
  437.     position: relative;
  438.     height: 30px;
  439.     line-height: 30px;
  440.     padding: 0 10px;
  441.     margin-bottom: 10px;
  442.     border-bottom: 1px solid #ccc;
  443.     background-color: #fff;
  444.     z-index: 1;
  445.     color: #575757;
  446.  
  447.     > li {
  448.       display: inline-block;
  449.     }
  450.  
  451.     > .file-type {
  452.       width: 24px;
  453.       height: 30px;
  454.       vertical-align: top;
  455.  
  456.       > i {
  457.         display: table-cell;
  458.       }
  459.     }
  460.     > .file-name {
  461.       width: 18%;
  462.       vertical-align: top;
  463.     }
  464.     > .progress {
  465.       width: 70%;
  466.  
  467.       > /deep/ .el-progress {
  468.         width: 100%;
  469.         height: 30px;
  470.         line-height: 30px;
  471.         display: table;
  472.       }
  473.     }
  474.  
  475.     > .file-size {
  476.       width: 80px;
  477.       position: absolute;
  478.       left: 0px;
  479.       right: 0px;
  480.       bottom: 0px;
  481.       top: 0px;
  482.       margin: 0 auto;
  483.       font-size: 14px;
  484.       text-align: center;
  485.     }
  486.   }
  487.  
  488.   .file-remove {
  489.     display: table-cell;
  490.   }
  491.  
  492.   .no-file {
  493.     text-align: center;
  494.     color: #575757;
  495.     font-size: 14px;
  496.   }
  497. }
  498. .btnGroup {
  499.   margin-right: 20px;
  500. }
  501.  
  502. .file-item .progress /deep/ .el-progress-bar {
  503.   width: 95%;
  504. }
  505.  
  506. #filePicker /deep/ .webuploader-pick {
  507.   width: 100% !important;
  508.   height: 100% !important;
  509.   background-color: #fafafa !important;
  510. }
  511.  
  512. #filePicker /deep/ .webuploader-pick-hover {
  513.   background-color: #fafafa !important;
  514. }
  515. #mainFileUpload > #header > .fr.icons span {
  516.   padding: 0 1px;
  517.   border-radius: 2px;
  518. }
  519. </style>

效果图

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

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

  

闽ICP备14008679号