基于vue-simple-uploader 实现大文件分片上传（二）

最新推荐文章于 2024-09-19 09:39:08 发布

Best_卡卡

最新推荐文章于 2024-09-19 09:39:08 发布

阅读量2.4k

点赞数 2

分类专栏： vue 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_43909743/article/details/118929333

版权

vue 专栏收录该内容

28 篇文章 10 订阅

订阅专栏

前言

前面我们做了文件分片上传的前端步骤，已经把我们项目需求都可以实现了，
本章主要学习下vue-simple-uploader的秒传文件、断点续传、跨端续传

文件分片上传之后端PHP合成文件

参考地址：https://www.helloweba.net/php/634.html

基础-计算文件MD5值

MD5作用

1、计算MD5:对于超大文件，一次性的读取文件，有可能浏览器直接爆了。
我们借助分片上传的概念，一片一片的读取文件，即每次读取一个分片内容chunk，
之后再进行下一个分片内容继续计算，这样文件读取完毕，
md5的值也就计算好了，同时整个计算过程占有内存也比一次性读取文件要低低多。
2、唯一标识
秒传：
a.前端计算好文件md5，并将md5赋值给文件唯一标识：file.uniqueIdentifier。
b.前端向后端发送一个get请求，携带md5值，询问后端是否该秒传文件。
c.验证md5，即后端PHP从mysql表中查询是否含有该文件md5值的文件记录，如果有，则返回秒传标识。
d.如果mysql表中没有该文件md5值记录，则按正常上传流程继续上传文件。
e.上传完成后，将该文件md5值记录到数据表中，以便下次验证md5。
断点续传:
a、文件上传时，会携带文件唯一标识，也就是MD5值以及分片信息。
后端按照md5保存分片，即名称为同一md5的分片属于同一个文件。
（理论上也有md5值冲突的，但是几率很少）。
b.当某种原因导致上传中断后，后端会保存已经上传好的分片。
c.当前端发送继续上传请求时，后端会查找该文件是否有已经上传好的分片，如果有，
那么将这些分片id返回给前端，告诉前端这些分片不必再上传了，从断点处继续上传剩余的分片。
所有分片上传完毕，合并文件。

使用spark-md5计算本地文件md5
spark-md5.js号称是最适合前端最快的算法，能快速计算文件的md5.
安装：

npm install --save spark-md5

组件引入：

import SparkMD5 from 'spark-md5';

spark-md5提供了两个计算md5的方法。一种是用SparkMD5.hashBinary() 直接将整个
文件的二进制码传入，直接返回文件的md5。适用于小文件
另一种方法是利用js中File对象的slice()方法（File.prototype.slice）将文件分片后逐
个传入spark.appendBinary()方法来计算、最后通过spark.end()方法输出md5。很显然，
此方法就是我们前面讲到的分片计算md5。这种方法对于大文件和超大文件会非常有利，
不容易出错，不占用大内存，并且能够提供计算的进度信息。

vue-simple-uploader中添加“计算md5”状态

在上传文件前，需要检查文件状态，计算文件md5值。在上传列表中，
其实是暂停状态，而我们不希望用户看到是暂停状态，
我们应该友好的告诉用户正在计算md5，或者正在预处理文件，准备上传的状态,
需要改动vue-simple-uploader，
将下面代码替换你的项目下\node_modules\vue-simple-uploader\dist\vue-uploader.js，然后再重新npm run dev即可

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["vue-uploader"]=t():e["vue-uploader"]=t()}(this,function(){return function(e){function t(n){if(i[n])return i[n].exports;var r=i[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var i={};return t.m=e,t.c=i,t.i=function(e){return e},t.d=function(e,i,n){t.o(e,i)||Object.defineProperty(e,i,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var i=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(i,"a",i),i},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="./",t(t.s=26)}([function(e,t){function i(e,t){var i=e[1]||"",r=e[3];if(!r)return i;if(t&&"function"==typeof btoa){var s=n(r);return[i].concat(r.sources.map(function(e){return"/*# sourceURL="+r.sourceRoot+e+" */"})).concat([s]).join("\n")}return[i].join("\n")}function n(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n=i(t,e);return t[2]?"@media "+t[2]+"{"+n+"}":n}).join("")},t.i=function(e,i){"string"==typeof e&&(e=[[null,e,""]]);for(var n={},r=0;r<this.length;r++){var s=this[r][0];"number"==typeof s&&(n[s]=!0)}for(r=0;r<e.length;r++){var o=e[r];"number"==typeof o[0]&&n[o[0]]||(i&&!o[2]?o[2]=i:i&&(o[2]="("+o[2]+") and ("+i+")"),t.push(o))}},t}},function(e,t){e.exports=function(e,t,i,n,r){var s,o=e=e||{},a=typeof e.default;"object"!==a&&"function"!==a||(s=e,o=e.default);var u="function"==typeof o?o.options:o;t&&(u.render=t.render,u.staticRenderFns=t.staticRenderFns),n&&(u._scopeId=n);var l;if(r?(l=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),i&&i.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(r)},u._ssrRegister=l):i&&(l=i),l){var p=u.functional,f=p?u.render:u.beforeCreate;p?u.render=function(e,t){return l.call(t),f(e,t)}:u.beforeCreate=f?[].concat(f,l):[l]}return{esModule:s,exports:o,options:u}}},function(e,t,i){function n(e){for(var t=0;t<e.length;t++){var i=e[t],n=p[i.id];if(n){n.refs++;for(var r=0;r<n.parts.length;r++)n.parts[r](i.parts[r]);for(;r<i.parts.length;r++)n.parts.push(s(i.parts[r]));n.parts.length>i.parts.length&&(n.parts.length=i.parts.length)}else{for(var o=[],r=0;r<i.parts.length;r++)o.push(s(i.parts[r]));p[i.id]={id:i.id,refs:1,parts:o}}}}function r(){var e=document.createElement("style");return e.type="text/css",f.appendChild(e),e}function s(e){var t,i,n=document.querySelector("style["+g+'~="'+e.id+'"]');if(n){if(h)return A;n.parentNode.removeChild(n)}if(m){var s=c++;n=d||(d=r()),t=o.bind(null,n,s,!1),i=o.bind(null,n,s,!0)}else n=r(),t=a.bind(null,n),i=function(){n.parentNode.removeChild(n)};return t(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap)return;t(e=n)}else i()}}function o(e,t,i,n){var r=i?"":n.css;if(e.styleSheet)e.styleSheet.cssText=C(t,r);else{var s=document.createTextNode(r),o=e.childNodes;o[t]&&e.removeChild(o[t]),o.length?e.insertBefore(s,o[t]):e.appendChild(s)}}function a(e,t){var i=t.css,n=t.media,r=t.sourceMap;if(n&&e.setAttribute("media",n),v.ssrId&&e.setAttribute(g,t.id),r&&(i+="\n/*# sourceURL="+r.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),e.styleSheet)e.styleSheet.cssText=i;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(i))}}var u="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!u)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var l=i(86),p={},f=u&&(document.head||document.getElementsByTagName("head")[0]),d=null,c=0,h=!1,A=function(){},v=null,g="data-vue-ssr-id",m="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,t,i,r){h=i,v=r||{};var s=l(e,t);return n(s),function(t){for(var i=[],r=0;r<s.length;r++){var o=s[r],a=p[o.id];a.refs--,i.push(a)}t?(s=l(e,t),n(s)):s=[];for(var r=0;r<i.length;r++){var a=i[r];if(0===a.refs){for(var u=0;u<a.parts.length;u++)a.parts[u]();delete p[a.id]}}}};var C=function(){var e=[];return function(t,i){return e[t]=i,e.filter(Boolean).join("\n")}}()},function(e,t,i){var n,r,s;!function(i,o){r=[t],n=o,void 0!==(s="function"==typeof n?n.apply(t,r):n)&&(e.exports=s)}(0,function(e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.uploaderMixin={inject:["uploader"]},e.supportMixin={data:function(){return{support:!0}},mounted:function(){this.support=this.uploader.uploader.support}}})},function(e,t,i){function n(e){i(81)}var r=i(1)(i(29),i(74),n,null,null);e.exports=r.exports},function(e,t){var i=e.exports={version:"2.5.3"};"number"==typeof __e&&(__e=i)},function(e,t,i){e.exports=!i(8)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,t){var i=Object.prototype,n=Array.prototype,r=i.toString,s=function(e){return"[object Function]"===r.call(e)},o=Array.isArray||function(e){return"[object Array]"===r.call(e)},a=function(e){return"[object Object]"===r.call(e)&&Object.getPrototypeOf(e)===i},u=0,l={uid:function(){return++u},noop:function(){},bind:function(e,t){return function(){return e.apply(t,arguments)}},preventEvent:function(e){e.preventDefault()},stop:function(e){e.preventDefault(),e.stopPropagation()},nextTick:function(e,t){setTimeout(l.bind(e,t),0)},toArray:function(e,t,i){return void 0===t&&(t=0),void 0===i&&(i=e.length),n.slice.call(e,t,i)},isPlainObject:a,isFunction:s,isArray:o,isObject:function(e){return Object(e)===e},isString:function(e){return"string"==typeof e},isUndefined:function(e){return void 0===e},isDefined:function(e){return void 0!==e},each:function(e,t,i){if(l.isDefined(e.length))for(var n=0,r=e.length;n<r&&!1!==t.call(i,e[n],n,e);n++);else for(var s in e)if(!1===t.call(i,e[s],s,e))break},evalOpts:function(e,t){return l.isFunction(e)&&(t=l.toArray(arguments),e=e.apply(null,t.slice(1))),e},extend:function(){var e,t,i,n,r,u,p=arguments[0]||{},f=1,d=arguments.length,c=!1;for("boolean"==typeof p&&(c=p,p=arguments[1]||{},f++),"object"==typeof p||s(p)||(p={}),f===d&&(p=this,f--);f<d;f++)if(null!=(e=arguments[f]))for(t in e)i=p[t],n=e[t],p!==n&&(c&&n&&(a(n)||(r=o(n)))?(r?(r=!1,u=i&&o(i)?i:[]):u=i&&a(i)?i:{},p[t]=l.extend(c,u,n)):void 0!==n&&(p[t]=n));return p},formatSize:function(e){return e<1024?e.toFixed(0)+" bytes":e<1048576?(e/1024).toFixed(0)+" KB":e<1073741824?(e/1024/1024).toFixed(1)+" MB":(e/1024/1024/1024).toFixed(1)+" GB"},defineNonEnumerable:function(e,t,i){Object.defineProperty(e,t,{enumerable:!1,configurable:!0,writable:!0,value:i})}};e.exports=l},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t){var i=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=i)},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t,i){function n(e){i(85)}var r=i(1)(i(27),i(78),n,null,null);e.exports=r.exports},function(e,t,i){function n(e){i(83)}var r=i(1)(i(28),i(76),n,null,null);e.exports=r.exports},function(e,t,i){function n(e){i(84)}var r=i(1)(i(30),i(77),n,null,null);e.exports=r.exports},function(e,t,i){function n(e){i(80)}var r=i(1)(i(31),i(73),n,null,null);e.exports=r.exports},function(e,t,i){function n(e){i(79)}var r=i(1)(i(32),i(72),n,null,null);e.exports=r.exports},function(e,t,i){var n,r,s;!function(i,o){r=[t],n=o,void 0!==(s="function"==typeof n?n.apply(t,r):n)&&(e.exports=s)}(0,function(e){"use strict";function t(e){function t(e){return e>1?"s":""}var i=Math.floor(e/31536e3);if(i)return i+" year"+t(i);var n=Math.floor((e%=31536e3)/86400);if(n)return n+" day"+t(n);var r=Math.floor((e%=86400)/3600);if(r)return r+" hour"+t(r);var s=Math.floor((e%=3600)/60);if(s)return s+" minute"+t(s);var o=e%60;return o+" second"+t(o)}function i(e){return e.replace(/[A-Z]/g,function(e){return"-"+e.toLowerCase()})}Object.defineProperty(e,"__esModule",{value:!0}),e.secondsToStr=t,e.kebabCase=i})},function(e,t){e.exports=function(e){if(void 0==e)throw TypeError("Can't call method on  "+e);return e}},function(e,t,i){var n=i(9),r=i(5),s=i(43),o=i(47),a=function(e,t,i){var u,l,p,f=e&a.F,d=e&a.G,c=e&a.S,h=e&a.P,A=e&a.B,v=e&a.W,g=d?r:r[t]||(r[t]={}),m=g.prototype,C=d?n:c?n[t]:(n[t]||{}).prototype;d&&(i=t);for(u in i)(l=!f&&C&&void 0!==C[u])&&u in g||(p=l?C[u]:i[u],g[u]=d&&"function"!=typeof C[u]?i[u]:A&&l?s(p,n):v&&C[u]==p?function(e){var t=function(t,i,n){if(this instanceof e){switch(arguments.length){case 0:return new e;case 1:return new e(t);case 2:return new e(t,i)}return new e(t,i,n)}return e.apply(this,arguments)};return t.prototype=e.prototype,t}(p):h&&"function"==typeof p?s(Function.call,p):p,h&&((g.virtual||(g.virtual={}))[u]=p,e&a.R&&m&&!m[u]&&o(m,u,p)))};a.F=1,a.G=2,a.S=4,a.P=8,a.B=16,a.W=32,a.U=64,a.R=128,e.exports=a},function(e,t,i){var n=i(40),r=i(48),s=i(59),o=Object.defineProperty;t.f=i(6)?Object.defineProperty:function(e,t,i){if(n(e),t=s(t,!0),n(i),r)try{return o(e,t,i)}catch(e){}if("get"in i||"set"in i)throw TypeError("Accessors not supported!");return"value"in i&&(e[t]=i.value),e}},function(e,t){var i=Math.ceil,n=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(e>0?n:i)(e)}},function(e,t,i){var n=i(49),r=i(17);e.exports=function(e){return n(r(e))}},function(e,t,i){function n(e,t,i){r.defineNonEnumerable(this,"uploader",e),r.defineNonEnumerable(this,"file",t),r.defineNonEnumerable(this,"bytes",null),this.offset=i,this.tested=!1,this.retries=0,this.pendingRetry=!1,this.preprocessState=0,this.readState=0,this.loaded=0,this.total=0,this.chunkSize=this.uploader.opts.chunkSize,this.startByte=this.offset*this.chunkSize,this.endByte=this.computeEndByte(),this.xhr=null}var r=i(7),s=n.STATUS={PENDING:"pending",UPLOADING:"uploading",READING:"reading",SUCCESS:"success",ERROR:"error",COMPLETE:"complete",PROGRESS:"progress",RETRY:"retry"};r.extend(n.prototype,{_event:function(e,t){t=r.toArray(arguments),t.unshift(this),this.file._chunkEvent.apply(this.file,t)},computeEndByte:function(){var e=Math.min(this.file.size,(this.offset+1)*this.chunkSize);return this.file.size-e<this.chunkSize&&!this.uploader.opts.forceChunkSize&&(e=this.file.size),e},getParams:function(){return{chunkNumber:this.offset+1,chunkSize:this.uploader.opts.chunkSize,currentChunkSize:this.endByte-this.startByte,totalSize:this.file.size,identifier:this.file.uniqueIdentifier,filename:this.file.name,relativePath:this.file.relativePath,totalChunks:this.file.chunks.length}},getTarget:function(e,t){return t.length?(e.indexOf("?")<0?e+="?":e+="&",e+t.join("&")):e},test:function(){function e(e){var t=n.status(!0);t===s.ERROR?(n._event(t,n.message()),n.uploader.uploadNextChunk()):t===s.SUCCESS?(n._event(t,n.message()),n.tested=!0):n.file.paused||(n.tested=!0,n.send())}this.xhr=new XMLHttpRequest,this.xhr.addEventListener("load",e,!1),this.xhr.addEventListener("error",e,!1);var t=r.evalOpts(this.uploader.opts.testMethod,this.file,this),i=this.prepareXhrRequest(t,!0);this.xhr.send(i);var n=this},preprocessFinished:function(){this.endByte=this.computeEndByte(),this.preprocessState=2,this.send()},readFinished:function(e){this.readState=2,this.bytes=e,this.send()},send:function(){function e(e){e.lengthComputable&&(u.loaded=e.loaded,u.total=e.total),u._event(s.PROGRESS,e)}function t(e){var t=u.message();u.processingResponse=!0,u.uploader.opts.processResponse(t,function(e,t){if(u.processingResponse=!1,u.xhr){u.processedState={err:e,res:t};var i=u.status();if(i===s.SUCCESS||i===s.ERROR)delete this.data,u._event(i,t),i===s.ERROR&&u.uploader.uploadNextChunk();else{u._event(s.RETRY,t),u.pendingRetry=!0,u.abort(),u.retries++;var n=u.uploader.opts.chunkRetryInterval;null!==n?setTimeout(function(){u.send()},n):u.send()}}},u.file,u)}var i=this.uploader.opts.preprocess,n=this.uploader.opts.readFileFn;if(r.isFunction(i))switch(this.preprocessState){case 0:return this.preprocessState=1,void i(this);case 1:return}switch(this.readState){case 0:return this.readState=1,void n(this.file,this.file.fileType,this.startByte,this.endByte,this);case 1:return}if(this.uploader.opts.testChunks&&!this.tested)return void this.test();this.loaded=0,this.total=0,this.pendingRetry=!1,this.xhr=new XMLHttpRequest,this.xhr.upload.addEventListener("progress",e,!1),this.xhr.addEventListener("load",t,!1),this.xhr.addEventListener("error",t,!1);var o=r.evalOpts(this.uploader.opts.uploadMethod,this.file,this),a=this.prepareXhrRequest(o,!1,this.uploader.opts.method,this.bytes);this.xhr.send(a);var u=this},abort:function(){var e=this.xhr;this.xhr=null,this.processingResponse=!1,this.processedState=null,e&&e.abort()},status:function(e){if(1===this.readState)return s.READING;if(this.pendingRetry||1===this.preprocessState)return s.UPLOADING;if(this.xhr){if(this.xhr.readyState<4||this.processingResponse)return s.UPLOADING;var t;this.uploader.opts.successStatuses.indexOf(this.xhr.status)>-1?t=s.SUCCESS:this.uploader.opts.permanentErrors.indexOf(this.xhr.status)>-1||!e&&this.retries>=this.uploader.opts.maxChunkRetries?t=s.ERROR:(this.abort(),t=s.PENDING);var i=this.processedState;return i&&i.err&&(t=s.ERROR),t}return s.PENDING},message:function(){return this.xhr?this.xhr.responseText:""},progress:function(){if(this.pendingRetry)return 0;var e=this.status();return e===s.SUCCESS||e===s.ERROR?1:e===s.PENDING?0:this.total>0?this.loaded/this.total:0},sizeUploaded:function(){var e=this.endByte-this.startByte;return this.status()!==s.SUCCESS&&(e=this.progress()*e),e},prepareXhrRequest:function(e,t,i,n){var s=r.evalOpts(this.uploader.opts.query,this.file,this,t);s=r.extend(this.getParams(),s),s=this.uploader.opts.processParams(s,this.file,this,t);var o=r.evalOpts(this.uploader.opts.target,this.file,this,t),a=null;if("GET"===e||"octet"===i){var u=[];r.each(s,function(e,t){u.push([encodeURIComponent(t),encodeURIComponent(e)].join("="))}),o=this.getTarget(o,u),a=n||null}else a=new FormData,r.each(s,function(e,t){a.append(t,e)}),void 0!==n&&a.append(this.uploader.opts.fileParameterName,n,this.file.name);return this.xhr.open(e,o,!0),this.xhr.withCredentials=this.uploader.opts.withCredentials,r.each(r.evalOpts(this.uploader.opts.headers,this.file,this,t),function(e,t){this.xhr.setRequestHeader(t,e)},this),a}}),e.exports=n},function(e,t,i){function n(e){this.support=p,this.support&&(this.supportDirectory=f,r.defineNonEnumerable(this,"filePaths",{}),this.opts=r.extend({},n.defaults,e||{}),this.preventEvent=r.bind(this._preventEvent,this),o.call(this,this))}var r=i(7),s=i(70),o=i(71),a=i(22),u="undefined"==typeof window,l=!u&&window.navigator.msPointerEnabled,p=function(){if(u)return!1;var e="slice",t=r.isDefined(window.File)&&r.isDefined(window.Blob)&&r.isDefined(window.FileList),i=null;return t&&(i=window.Blob.prototype,r.each(["slice","webkitSlice","mozSlice"],function(t){if(i[t])return e=t,!1}),t=!!i[e]),t&&(n.sliceName=e),i=null,t}(),f=function(){if(u)return!1;var e=window.document.createElement("input");e.type="file";var t="webkitdirectory"in e||"directory"in e;return e=null,t}(),d=function(e,t,i,r,s){s.readFinished(e.file[n.sliceName](i,r,t))};n.version="__VERSION__",n.defaults={chunkSize:1048576,forceChunkSize:!1,simultaneousUploads:3,singleFile:!1,fileParameterName:"file",progressCallbacksInterval:500,speedSmoothingFactor:.1,query:{},headers:{},withCredentials:!1,preprocess:null,method:"multipart",testMethod:"GET",uploadMethod:"POST",prioritizeFirstAndLastChunk:!1,allowDuplicateUploads:!1,target:"/",testChunks:!0,generateUniqueIdentifier:null,maxChunkRetries:0,chunkRetryInterval:null,permanentErrors:[404,415,500,501],successStatuses:[200,201,202],onDropStopPropagation:!1,initFileFn:null,readFileFn:d,checkChunkUploadedByResponse:null,initialPaused:!1,processResponse:function(e,t){t(null,e)},processParams:function(e){return e}},n.utils=r,n.event=s,n.File=o,n.Chunk=a,n.prototype=r.extend({},o.prototype),r.extend(n.prototype,s),r.extend(n.prototype,{constructor:n,_trigger:function(e){var t=r.toArray(arguments),i=!this.trigger.apply(this,arguments);return"catchAll"!==e&&(t.unshift("catchAll"),i=!this.trigger.apply(this,t)||i),!i},_triggerAsync:function(){var e=arguments;r.nextTick(function(){this._trigger.apply(this,e)},this)},addFiles:function(e,t){var i=[],n=this.fileList.length;r.each(e,function(e){if((!l||l&&e.size>0)&&(e.size%4096!=0||"."!==e.name&&"."!==e.fileName)){var n=this.generateUniqueIdentifier(e);if(this.opts.allowDuplicateUploads||!this.getFromUniqueIdentifier(n)){var r=new o(this,e,this);r.uniqueIdentifier=n,this._trigger("fileAdded",r,t)?i.push(r):o.prototype.removeFile.call(this,r)}}},this);var s=this.fileList.slice(n);this._trigger("filesAdded",i,s,t)?(r.each(i,function(e){this.opts.singleFile&&this.files.length>0&&this.removeFile(this.files[0]),this.files.push(e)},this),this._trigger("filesSubmitted",i,s,t)):r.each(s,function(e){o.prototype.removeFile.call(this,e)},this)},addFile:function(e,t){this.addFiles([e],t)},cancel:function(){for(var e=this.fileList.length-1;e>=0;e--)this.fileList[e].cancel()},removeFile:function(e){o.prototype.removeFile.call(this,e),this._trigger("fileRemoved",e)},generateUniqueIdentifier:function(e){var t=this.opts.generateUniqueIdentifier;if(r.isFunction(t))return t(e);var i=e.relativePath||e.webkitRelativePath||e.fileName||e.name;return e.size+"-"+i.replace(/[^0-9a-zA-Z_-]/gim,"")},getFromUniqueIdentifier:function(e){var t=!1;return r.each(this.files,function(i){if(i.uniqueIdentifier===e)return t=i,!1}),t},uploadNextChunk:function(e){var t=!1,i=a.STATUS.PENDING,n=this.uploader.opts.checkChunkUploadedByResponse;if(this.opts.prioritizeFirstAndLastChunk&&(r.each(this.files,function(e){if(!e.paused&&(!n||e._firstResponse||!e.isUploading()))return e.chunks.length&&e.chunks[0].status()===i?(e.chunks[0].send(),t=!0,!1):e.chunks.length>1&&e.chunks[e.chunks.length-1].status()===i?(e.chunks[e.chunks.length-1].send(),t=!0,!1):void 0}),t))return t;if(r.each(this.files,function(e){if(!e.paused){if(n&&!e._firstResponse&&e.isUploading())return;r.each(e.chunks,function(e){if(e.status()===i)return e.send(),t=!0,!1})}if(t)return!1}),t)return!0;var s=!1;return r.each(this.files,function(e){if(!e.isComplete())return s=!0,!1}),s||e||!this.files.length||this._triggerAsync("complete"),s},upload:function(e){var t=this._shouldUploadNext();if(!1!==t){!e&&this._trigger("uploadStart");for(var i=!1,n=1;n<=this.opts.simultaneousUploads-t&&((i=this.uploadNextChunk(!e)||i)||!e);n++);i||e||this._triggerAsync("complete")}},_shouldUploadNext:function(){var e=0,t=!0,i=this.opts.simultaneousUploads,n=a.STATUS.UPLOADING;return r.each(this.files,function(s){return r.each(s.chunks,function(r){if(r.status()===n&&++e>=i)return t=!1,!1}),t}),t&&e},assignBrowse:function(e,t,i,n){void 0===e.length&&(e=[e]),r.each(e,function(e){var s;"INPUT"===e.tagName&&"file"===e.type?s=e:(s=document.createElement("input"),s.setAttribute("type","file"),r.extend(s.style,{visibility:"hidden",position:"absolute",width:"1px",height:"1px"}),e.appendChild(s),e.addEventListener("click",function(t){"label"!==e.tagName.toLowerCase()&&s.click()},!1)),t&&s.setAttribute("webkitdirectory","webkitdirectory"),n&&r.each(n,function(e,t){s.setAttribute(t,e)});var o=this;s.addEventListener("change",function(e){o._trigger(e.type,e),e.target.value&&(o.addFiles(e.target.files,e),e.target.value="")},!1)},this)},onDrop:function(e){this._trigger(e.type,e),this.opts.onDropStopPropagation&&e.stopPropagation(),e.preventDefault(),this._parseDataTransfer(e.dataTransfer,e)},_parseDataTransfer:function(e,t){e.items&&e.items[0]&&e.items[0].webkitGetAsEntry?this.webkitReadDataTransfer(e,t):this.addFiles(e.files,t)},webkitReadDataTransfer:function(e,t){function i(e){e.readEntries(function(t){t.length?(u+=t.length,r.each(t,function(e){if(e.isFile){var t=e.fullPath;e.file(function(e){n(e,t)},s)}else e.isDirectory&&i(e.createReader())}),i(e)):o()},s)}function n(e,t){e.relativePath=t.substring(1),l.push(e),o()}function s(e){throw e}function o(){0==--u&&a.addFiles(l,t)}var a=this,u=e.items.length,l=[];r.each(e.items,function(e){var t=e.webkitGetAsEntry();if(!t)return void o();t.isFile?n(e.getAsFile(),t.fullPath):i(t.createReader())})},_assignHelper:function(e,t,i){void 0===e.length&&(e=[e]);var n=i?"removeEventListener":"addEventListener";r.each(e,function(e){r.each(t,function(t,i){e[n](i,t,!1)},this)},this)},_preventEvent:function(e){r.preventEvent(e),this._trigger(e.type,e)},assignDrop:function(e){this._onDrop=r.bind(this.onDrop,this),this._assignHelper(e,{dragover:this.preventEvent,dragenter:this.preventEvent,dragleave:this.preventEvent,drop:this._onDrop})},unAssignDrop:function(e){this._assignHelper(e,{dragover:this.preventEvent,dragenter:this.preventEvent,dragleave:this.preventEvent,drop:this._onDrop},!0),this._onDrop=null}}),e.exports=n},function(e,t,i){function n(e){i(82)}var r=i(1)(i(33),i(75),n,null,null);e.exports=r.exports},function(e,t,i){var n,r,s;!function(i,o){r=[e,t],n=o,void 0!==(s="function"==typeof n?n.apply(t,r):n)&&(e.exports=s)}(0,function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=["fileProgress","fileSuccess","fileComplete","fileError"];t.default=i,e.exports=t.default})},function(e,t,i){var n,r,s;!function(o,a){r=[e,t,i(24),i(11),i(12),i(15),i(14),i(13),i(4)],n=a,void 0!==(s="function"==typeof n?n.apply(t,r):n)&&(e.exports=s)}(0,function(e,t,i,n,r,s,o,a,u){"use strict";function l(e){return e&&e.__esModule?e:{default:e}}function p(e){p.installed||(e.component(f.default.name,f.default),e.component(d.default.name,d.default),e.component(c.default.name,c.default),e.component(h.default.name,h.default),e.component(A.default.name,A.default),e.component(v.default.name,v.default),e.component(g.default.name,g.default))}Object.defineProperty(t,"__esModule",{value:!0});var f=l(i),d=l(n),c=l(r),h=l(s),A=l(o),v=l(a),g=l(u),m={version:"0.7.4",install:p,Uploader:f.default,UploaderBtn:d.default,UploaderDrop:c.default,UploaderUnsupport:h.default,UploaderList:A.default,UploaderFiles:v.default,UploaderFile:g.default};"undefined"!=typeof window&&window.Vue&&window.Vue.use(p),t.default=m,e.exports=t.default})},function(e,t,i){var n,r,s;!function(o,a){r=[e,t,i(3)],n=a,void 0!==(s="function"==typeof n?n.apply(t,r):n)&&(e.exports=s)}(0,function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.default={name:"uploader-btn",mixins:[i.uploaderMixin,i.supportMixin],props:{directory:{type:Boolean,default:!1},single:{type:Boolean,default:!1},attrs:{type:Object,default:function(){return{}}}},mounted:function(){var e=this;this.$nextTick(function(){e.uploader.uploader.assignBrowse(e.$refs.btn,e.directory,e.single,e.attrs)})}},e.exports=t.default})},function(e,t,i){var n,r,s;!function(o,a){r=[e,t,i(3)],n=a,void 0!==(s="function"==typeof n?n.apply(t,r):n)&&(e.exports=s)}(0,function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.default={name:"uploader-drop",mixins:[i.uploaderMixin,i.supportMixin],data:function(){return{dropClass:""}},methods:{onDragEnter:function(){this.dropClass="uploader-dragover"},onDragLeave:function(){this.dropClass=""},onDrop:function(){this.dropClass="uploader-droped"}},mounted:function(){var e=this;this.$nextTick(function(){var t=e.$refs.drop,i=e.uploader.uploader;i.assignDrop(t),i.on("dragenter",e.onDragEnter),i.on("dragleave",e.onDragLeave),i.on("drop",e.onDrop)})},beforeDestroy:function(){var e=this.$refs.drop,t=this.uploader.uploader;t.off("dragenter",this.onDragEnter),t.off("dragleave",this.onDragLeave),t.off("drop",this.onDrop),t.unAssignDrop(e)}},e.exports=t.default})},function(e,t,i){var n,r,s;!function(o,a){r=[e,t,i(35),i(23),i(25),i(16)],n=a,void 0!==(s="function"==typeof n?n.apply(t,r):n)&&(e.exports=s)}(0,function(e,t,i,n,r,s){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var a=o(i),u=o(n),l=o(r);t.default={name:"uploader-file",props:{file:{type:Object,default:function(){return{}}},list:{type:Boolean,default:!1}},data:function(){return{response:null,paused:!1,cmd5:!1,error:!1,averageSpeed:0,currentSpeed:0,isComplete:!1,isUploading:!1,size:0,formatedSize:"",uploadedSize:0,progress:0,timeRemaining:0,type:"",extension:"",progressingClass:""}},computed:{fileCategory:function(){var e=this.extension,t=this.file.isFolder,i=t?"folder":"unknown",n=this.file.uploader.opts.categoryMap,r=n||{image:["gif","jpg","jpeg","png","bmp","webp"],video:["mp4","m3u8","rmvb","avi","swf","3gp","mkv","flv"],audio:["mp3","wav","wma","ogg","aac","flac"],document:["doc","txt","docx","pages","epub","pdf","numbers","csv","xls","xlsx","keynote","ppt","pptx"],zip:["zip","rar","gz","tar","7z"]};return(0,a.default)(r).forEach(function(t){r[t].indexOf(e)>-1&&(i=t)}),i},progressStyle:function(){var e=Math.floor(99*this.progress),t="translateX("+Math.floor(e-100)+"%)";return{progress:e+"%",webkitTransform:t,mozTransform:t,msTransform:t,transform:t}},formatedAverageSpeed:function(){return u.default.utils.formatSize(this.averageSpeed)+" / s"},status:function(){var e=this.isUploading,t=this.isComplete,i=this.error,n=this.paused,r=this.cmd5;return t?"success":i?"error":e?"uploading":r?"cmd5":n?"paused":"waiting"},statusText:function(){var e=this.status,t=this.file.uploader.fileStatusText;return("function"==typeof t?t(e,this.response):t[e])||e},formatedTimeRemaining:function(){var e=this.timeRemaining,t=this.file;if(e===Number.POSITIVE_INFINITY||0===e)return"";var i=(0,s.secondsToStr)(e),n=t.uploader.opts.parseTimeRemaining;return n&&(i=n(e,i)),i}},watch:{status:function(e,t){var i=this;t&&"uploading"===e&&"uploading"!==t?this.tid=setTimeout(function(){i.progressingClass="uploader-file-progressing"},200):(clearTimeout(this.tid),this.progressingClass="")}},methods:{_actionCheck:function(){this.paused=this.file.paused,this.cmd5=this.file.cmd5,this.error=this.file.error,this.isUploading=this.file.isUploading()},pause:function(){this.file.pause(),this._actionCheck(),this._fileProgress()},resume:function(){this.file.resume(),this._actionCheck()},remove:function(){this.file.cancel()},retry:function(){this.file.retry(),this._actionCheck()},processResponse:function(e){var t=e;try{t=JSON.parse(e)}catch(e){}this.response=t},fileEventsHandler:function(e,t){var i=t[0],n=t[1],r=this.list?i:n;if(this.file===r){if(this.list&&"fileSuccess"===e)return void this.processResponse(t[2]);this["_"+e].apply(this,t)}},_fileProgress:function(){this.progress=this.file.progress(),this.averageSpeed=this.file.averageSpeed,this.currentSpeed=this.file.currentSpeed,this.timeRemaining=this.file.timeRemaining(),this.uploadedSize=this.file.sizeUploaded(),this._actionCheck()},_fileSuccess:function(e,t,i){e&&this.processResponse(i),this._fileProgress(),this.error=!1,this.isComplete=!0,this.isUploading=!1},_fileComplete:function(){this._fileSuccess()},_fileError:function(e,t,i){this._fileProgress(),this.processResponse(i),this.error=!0,this.isComplete=!1,this.isUploading=!1}},mounted:function(){var e=this,t=["paused","error","averageSpeed","currentSpeed","cmd5"],i=["isComplete","isUploading",{key:"size",fn:"getSize"},{key:"formatedSize",fn:"getFormatSize"},{key:"uploadedSize",fn:"sizeUploaded"},"progress","timeRemaining",{key:"type",fn:"getType"},{key:"extension",fn:"getExtension"}];t.forEach(function(t){e[t]=e.file[t]}),i.forEach(function(t){"string"==typeof t?e[t]=e.file[t]():e[t.key]=e.file[t.fn]()});var n=this._handlers={},r=function(t){return n[t]=function(){for(var i=arguments.length,n=Array(i),r=0;r<i;r++)n[r]=arguments[r];e.fileEventsHandler(t,n)},n[t]};l.default.forEach(function(t){e.file.uploader.on(t,r(t))})},destroyed:function(){var e=this;l.default.forEach(function(t){e.file.uploader.off(t,e._handlers[t])}),this._handlers=null}},e.exports=t.default})},function(e,t,i){var n,r,s;!function(o,a){r=[e,t,i(3),i(4)],n=a,void 0!==(s="function"==typeof n?n.apply(t,r):n)&&(e.exports=s)}(0,function(e,t,i,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default={name:"uploader-files",mixins:[i.uploaderMixin],computed:{files:function(){return this.uploader.files}},components:{UploaderFile:r.default}},e.exports=t.default})},function(e,t,i){var n,r,s;!function(o,a){r=[e,t,i(3),i(4)],n=a,void 0!==(s="function"==typeof n?n.apply(t,r):n)&&(e.exports=s)}(0,function(e,t,i,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default={name:"uploader-list",mixins:[i.uploaderMixin],computed:{fileList:function(){return this.uploader.fileList}},components:{UploaderFile:r.default}},e.exports=t.default})},function(e,t,i){var n,r,s;!function(o,a){r=[e,t,i(3)],n=a,void 0!==(s="function"==typeof n?n.apply(t,r):n)&&(e.exports=s)}(0,function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.default={name:"uploader-unsupport",mixins:[i.uploaderMixin,i.supportMixin]},e.exports=t.default})},function(e,t,i){var n,r,s;!function(o,a){r=[e,t,i(36),i(23),i(16),i(11),i(12),i(15),i(14),i(13),i(4)],n=a,void 0!==(s="function"==typeof n?n.apply(t,r):n)&&(e.exports=s)}(0,function(e,t,i,n,r,s,o,a,u,l,p){"use strict";function f(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var d=f(i),c=f(n),h=f(s),A=f(o),v=f(a),g=f(u),m=f(l),C=f(p);t.default={name:"uploader",provide:function(){return{uploader:this}},props:{options:{type:Object,default:function(){return{}}},autoStart:{type:Boolean,default:!0},fileStatusText:{type:[Object,Function],default:function(){return{success:"success",error:"error",uploading:"uploading",paused:"paused",waiting:"waiting",cmd5:"cmd5"}}}},data:function(){return{started:!1,files:[],fileList:[]}},methods:{uploadStart:function(){},fileAdded:function(e){if(this.$emit((0,r.kebabCase)("fileAdded"),e),e.ignored)return!1},filesAdded:function(e,t){if(this.$emit((0,r.kebabCase)("filesAdded"),e,t),e.ignored||t.ignored)return!1},fileRemoved:function(e){this.files=this.uploader.files,this.fileList=this.uploader.fileList},filesSubmitted:function(e,t){this.files=this.uploader.files,this.fileList=this.uploader.fileList,this.autoStart&&this.uploader.upload()},allEvent:function(){for(var e,t=arguments.length,i=Array(t),n=0;n<t;n++)i[n]=arguments[n];var s=i[0],o=(e={},(0,d.default)(e,"fileAdded",!0),(0,d.default)(e,"filesAdded",!0),(0,d.default)(e,"uploadStart","uploadStart"),e),a=o[s];if(a){if(!0===a)return;this[a].apply(this,i.slice(1))}i[0]=(0,r.kebabCase)(s),this.$emit.apply(this,i)}},created:function(){this.options.initialPaused=!this.autoStart;var e=new c.default(this.options);this.uploader=e,this.uploader.fileStatusText=this.fileStatusText,e.on("catchAll",this.allEvent),e.on("fileAdded",this.fileAdded),e.on("filesAdded",this.filesAdded),e.on("fileRemoved",this.fileRemoved),e.on("filesSubmitted",this.filesSubmitted)},destroyed:function(){var e=this.uploader;e.off("catchAll",this.allEvent),e.off("fileAdded",this.fileAdded),e.off("filesAdded",this.filesAdded),e.off("fileRemoved",this.fileRemoved),e.off("filesSubmitted",this.filesSubmitted),this.uploader=null},components:{UploaderBtn:h.default,UploaderDrop:A.default,UploaderUnsupport:v.default,UploaderList:g.default,UploaderFiles:m.default,UploaderFile:C.default}},e.exports=t.default})},function(e,t,i){e.exports={default:i(37),__esModule:!0}},function(e,t,i){e.exports={default:i(38),__esModule:!0}},function(e,t,i){"use strict";t.__esModule=!0;var n=i(34),r=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default=function(e,t,i){return t in e?(0,r.default)(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}},function(e,t,i){i(61);var n=i(5).Object;e.exports=function(e,t,i){return n.defineProperty(e,t,i)}},function(e,t,i){i(62),e.exports=i(5).Object.keys},function(e,t){e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,t,i){var n=i(10);e.exports=function(e){if(!n(e))throw TypeError(e+" is not an object!");return e}},function(e,t,i){var n=i(21),r=i(57),s=i(56);e.exports=function(e){return function(t,i,o){var a,u=n(t),l=r(u.length),p=s(o,l);if(e&&i!=i){for(;l>p;)if((a=u[p++])!=a)return!0}else for(;l>p;p++)if((e||p in u)&&u[p]===i)return e||p||0;return!e&&-1}}},function(e,t){var i={}.toString;e.exports=function(e){return i.call(e).slice(8,-1)}},function(e,t,i){var n=i(39);e.exports=function(e,t,i){if(n(e),void 0===t)return e;switch(i){case 1:return function(i){return e.call(t,i)};case 2:return function(i,n){return e.call(t,i,n)};case 3:return function(i,n,r){return e.call(t,i,n,r)}}return function(){return e.apply(t,arguments)}}},function(e,t,i){var n=i(10),r=i(9).document,s=n(r)&&n(r.createElement);e.exports=function(e){return s?r.createElement(e):{}}},function(e,t){e.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(e,t){var i={}.hasOwnProperty;e.exports=function(e,t){return i.call(e,t)}},function(e,t,i){var n=i(19),r=i(53);e.exports=i(6)?function(e,t,i){return n.f(e,t,r(1,i))}:function(e,t,i){return e[t]=i,e}},function(e,t,i){e.exports=!i(6)&&!i(8)(function(){return 7!=Object.defineProperty(i(44)("div"),"a",{get:function(){return 7}}).a})},function(e,t,i){var n=i(42);e.exports=Object("z").propertyIsEnumerable(0)?Object:function(e){return"String"==n(e)?e.split(""):Object(e)}},function(e,t,i){var n=i(46),r=i(21),s=i(41)(!1),o=i(54)("IE_PROTO");e.exports=function(e,t){var i,a=r(e),u=0,l=[];for(i in a)i!=o&&n(a,i)&&l.push(i);for(;t.length>u;)n(a,i=t[u++])&&(~s(l,i)||l.push(i));return l}},function(e,t,i){var n=i(50),r=i(45);e.exports=Object.keys||function(e){return n(e,r)}},function(e,t,i){var n=i(18),r=i(5),s=i(8);e.exports=function(e,t){var i=(r.Object||{})[e]||Object[e],o={};o[e]=t(i),n(n.S+n.F*s(function(){i(1)}),"Object",o)}},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,i){var n=i(55)("keys"),r=i(60);e.exports=function(e){return n[e]||(n[e]=r(e))}},function(e,t,i){var n=i(9),r=n["__core-js_shared__"]||(n["__core-js_shared__"]={});e.exports=function(e){return r[e]||(r[e]={})}},function(e,t,i){var n=i(20),r=Math.max,s=Math.min;e.exports=function(e,t){return e=n(e),e<0?r(e+t,0):s(e,t)}},function(e,t,i){var n=i(20),r=Math.min;e.exports=function(e){return e>0?r(n(e),9007199254740991):0}},function(e,t,i){var n=i(17);e.exports=function(e){return Object(n(e))}},function(e,t,i){var n=i(10);e.exports=function(e,t){if(!n(e))return e;var i,r;if(t&&"function"==typeof(i=e.toString)&&!n(r=i.call(e)))return r;if("function"==typeof(i=e.valueOf)&&!n(r=i.call(e)))return r;if(!t&&"function"==typeof(i=e.toString)&&!n(r=i.call(e)))return r;throw TypeError("Can't convert object to primitive value")}},function(e,t){var i=0,n=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++i+n).toString(36))}},function(e,t,i){var n=i(18);n(n.S+n.F*!i(6),"Object",{defineProperty:i(19).f})},function(e,t,i){var n=i(58),r=i(51);i(52)("keys",function(){return function(e){return r(n(e))}})},function(e,t,i){t=e.exports=i(0)(!0),t.push([e.i,".uploader-unsupport{position:relative;z-index:10;overflow:hidden}","",{version:3,sources:["D:/github/vue-uploader/src/components/unsupport.vue"],names:[],mappings:"AACA,oBACE,kBAAmB,AACnB,WAAY,AACZ,eAAiB,CAClB",file:"unsupport.vue",sourcesContent:["\n.uploader-unsupport {\n  position: relative;\n  z-index: 10;\n  overflow: hidden;\n}\n"],sourceRoot:""}])},function(e,t,i){t=e.exports=i(0)(!0),t.push([e.i,".uploader-list{position:relative}.uploader-list>ul{list-style:none;margin:0;padding:0}","",{version:3,sources:["D:/github/vue-uploader/src/components/list.vue"],names:[],mappings:"AACA,eACE,iBAAmB,CACpB,AACD,kBACE,gBAAiB,AACjB,SAAU,AACV,SAAU,CACX",file:"list.vue",sourcesContent:["\n.uploader-list {\n  position: relative;\n}\n.uploader-list > ul {\n  list-style: none;\n  margin: 0;\n  padding: 0\n}\n"],sourceRoot:""}])},function(e,t,i){t=e.exports=i(0)(!0),t.push([e.i,'.uploader-file{position:relative;height:49px;line-height:49px;overflow:hidden;border-bottom:1px solid #cdcdcd}.uploader-file[status=error] .uploader-file-retry,.uploader-file[status=paused] .uploader-file-resume,.uploader-file[status=uploading] .uploader-file-pause,.uploader-file[status=waiting] .uploader-file-pause{display:block}.uploader-file[status=success] .uploader-file-remove{display:none}.uploader-file[status=error] .uploader-file-progress{background:#ffe0e0}.uploader-file-progress{position:absolute;width:100%;height:100%;background:#e2eeff;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.uploader-file-progressing{-webkit-transition:all .4s linear;transition:all .4s linear}.uploader-file-info{position:relative;z-index:1;height:100%;overflow:hidden}.uploader-file-info:hover{background-color:hsla(0,0%,94%,.2)}.uploader-file-info em,.uploader-file-info i{font-style:normal}.uploader-file-actions,.uploader-file-meta,.uploader-file-name,.uploader-file-size,.uploader-file-status{float:left;position:relative;height:100%}.uploader-file-name{width:45%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-indent:14px}.uploader-file-icon{width:24px;height:24px;display:inline-block;vertical-align:top;margin-top:13px;margin-right:8px}.uploader-file-icon:before{content:"\\1F4C3";display:block;height:100%;font-size:24px;line-height:1;text-indent:0}.uploader-file-size{width:18%;text-indent:2px}.uploader-file-status{width:24%;text-indent:2px}.uploader-file-actions{width:12%}.uploader-file-actions>span{display:none;float:left;width:16px;height:16px;margin-top:16px;margin-right:10px;cursor:pointer;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAYAAAD0ZHJ6AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAJcEhZcwAACxMAAAsTAQCanBgAAARkSURBVGje7ZnfS1NRHMAH4ptPkvQSuAdBkCxD8FUQJMEULUgzy1KyyPVQ4JMiiP4Bvg6EwUQQfMmwhwRDshwaKUjDVCgoSdDNHkzTJZ6+Z37Purve8+PeTb2TM/ggu+ew89l33x8H9BBCPG7GowXTJej3+wnDvEm0JuLC04+EYWftVAUv+fiCvDUdQR1BHUEdQR3BTIygvixoQS14XgTtthLVdpNWwXRLqvQ724LplFRtyrYF0yVpFLQrKRVMh6RZ0I6kkmCqklaCqpKZH0FX56Crq9jVfdDVk0RfFrSgFsxkQVmLcdKCVrKySCrryhPEyYShhzOcrFtG0EoilfHHk1CRU5rF6ZjNZhlVOW6RnMSVyyilKies4pO41diVy8wIujoHXV3FGdMHXTtJKLFYTLhZtq4vC1rwXApCZTIqgR6g1PBMCO9DL3bMMSqBHqDU8EyISDAHiGKvWwcCQG2KgjlAFCDAOhAAap0K5gKLphk8mqJgLrCIgoxRJ4J5wKpJ7gAoMkn5EBXBPGDVJHcAFJmkfIhQcAql1oBpTvTol9gG9pm4RHAKpdaAaU706JfYBvaZuJVgPQrt4sFlnOh5MC/p3lmJYD0K7eLBZZzoeTAv6d5ZnuAYHjpgEOnk5F0ufhG6v1ggOIaHDhhEOjl5l4tfhO4vthLcwAMrFNvLJO5vEwhu4IEViu1lEve3WQmyoihQFBzG/V0CQVYUBYqCw7i/SxTBcpsRbFeIYLnNCLZbCY5b5KAnxRwct8hBj9McZFVMW0ihRNBuFdMWUigRlFaxuQ9WWYjRMTiIe5z0wSoLMToGB3GPsA9aTZIJoB+nRgBnM1tzOkkmgH6cGgGczWzNpzqLx3n/aULJJgezeNw07oxQySbVywKjBOgFRnDs+VEsx8FlgVEC9AIjOPb8KJYjvSzoG7UW1IJaUAtqQS14toLNM5fN5APdwBJA8G83Pk/aK/rgzVvXzeQD3cASQPBvNz5P2ssTzAaGUIrHEO6zI5gNDKEUjyHcxxWkh4Ylcowwk1QQpIeGJXKMMJO0EgwqyjGCioJBJvDrxRMSuVOTJEXfbz1/bHwWtBL0yoQehK6RucgE+bGzanzulQh6E3IgQV+xpc8kcrfuSO7eTfJ3ZYmQw0Oy9azVKOk1C/bJ5D5F38YPeLfx0rjWJxHsS0SqsSYuxySjj5qO5Oj7xQWy2VBtFOwzCy6ryH3YfE3uh64Y1xckgstJPydEjkkeHv07Iy4Xaao15+KCWTBx6M/db+T9xivSErqaJDdzXI6yLRE8Vgg0coex/SPJvT0SbWu0KpZtbgSpCH3NRt7I5OxHkObc6heU+/M/J5vrpBFM5GBLqCQux14COXs5CNXK5OjPGm1tSMrJSOMNYQ4mVTGV/L6zTL7+DovkbFUxbSW0Wo05l8hJWsU+cRWfSh+Mt5Lb1ck/J1TvVsdDaR/MiEni+llsdZuZp62EViu+96bpNjNPWwmtVnzvFd5m9IVVC54x/wA7gNvqFG9vXQAAAABJRU5ErkJggg==") no-repeat 0 0}.uploader-file-actions>span:hover{background-position-x:-21px}.uploader-file-actions .uploader-file-pause{background-position-y:0}.uploader-file-actions .uploader-file-resume{background-position-y:-17px}.uploader-file-actions .uploader-file-retry{background-position-y:-53px}.uploader-file-actions .uploader-file-remove{display:block;background-position-y:-34px}',"",{version:3,sources:["D:/github/vue-uploader/src/components/file.vue"],names:[],mappings:"AACA,eACE,kBAAmB,AACnB,YAAa,AACb,iBAAkB,AAClB,gBAAiB,AACjB,+BAAiC,CAClC,AAQD,gNACE,aAAe,CAChB,AACD,qDACE,YAAc,CACf,AACD,qDACE,kBAAoB,CACrB,AACD,wBACE,kBAAmB,AACnB,WAAY,AACZ,YAAa,AACb,mBAAoB,AACpB,oCAAqC,AAC7B,2BAA6B,CACtC,AACD,2BACE,kCAAmC,AACnC,yBAA2B,CAC5B,AACD,oBACE,kBAAmB,AACnB,UAAW,AACX,YAAa,AACb,eAAiB,CAClB,AACD,0BACE,kCAA2C,CAC5C,AACD,6CAEE,iBAAmB,CACpB,AACD,yGAKE,WAAY,AACZ,kBAAmB,AACnB,WAAa,CACd,AACD,oBACE,UAAW,AACX,gBAAiB,AACjB,mBAAoB,AACpB,uBAAwB,AACxB,gBAAkB,CACnB,AACD,oBACE,WAAY,AACZ,YAAa,AACb,qBAAsB,AACtB,mBAAoB,AACpB,gBAAiB,AACjB,gBAAkB,CACnB,AACD,2BACE,iBAAc,AACd,cAAe,AACf,YAAa,AACb,eAAgB,AAChB,cAAe,AACf,aAAe,CAChB,AACD,oBACE,UAAW,AACX,eAAiB,CAClB,AAID,sBACE,UAAW,AACX,eAAiB,CAClB,AACD,uBACE,SAAW,CACZ,AACD,4BACE,aAAc,AACd,WAAY,AACZ,WAAY,AACZ,YAAa,AACb,gBAAiB,AACjB,kBAAmB,AACnB,eAAgB,AAChB,srDAAwrD,CACzrD,AACD,kCACE,2BAA6B,CAC9B,AACD,4CACE,uBAAyB,CAC1B,AACD,6CACE,2BAA6B,CAC9B,AACD,4CACE,2BAA6B,CAC9B,AACD,6CACE,cAAe,AACf,2BAA6B,CAC9B",file:"file.vue",sourcesContent:['\n.uploader-file {\n  position: relative;\n  height: 49px;\n  line-height: 49px;\n  overflow: hidden;\n  border-bottom: 1px solid #cdcdcd;\n}\n.uploader-file[status="waiting"] .uploader-file-pause,\n.uploader-file[status="uploading"] .uploader-file-pause {\n  display: block;\n}\n.uploader-file[status="paused"] .uploader-file-resume {\n  display: block;\n}\n.uploader-file[status="error"] .uploader-file-retry {\n  display: block;\n}\n.uploader-file[status="success"] .uploader-file-remove {\n  display: none;\n}\n.uploader-file[status="error"] .uploader-file-progress {\n  background: #ffe0e0;\n}\n.uploader-file-progress {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: #e2eeff;\n  -webkit-transform: translateX(-100%);\n          transform: translateX(-100%);\n}\n.uploader-file-progressing {\n  -webkit-transition: all .4s linear;\n  transition: all .4s linear;\n}\n.uploader-file-info {\n  position: relative;\n  z-index: 1;\n  height: 100%;\n  overflow: hidden;\n}\n.uploader-file-info:hover {\n  background-color: rgba(240, 240, 240, 0.2);\n}\n.uploader-file-info i,\n.uploader-file-info em {\n  font-style: normal;\n}\n.uploader-file-name,\n.uploader-file-size,\n.uploader-file-meta,\n.uploader-file-status,\n.uploader-file-actions {\n  float: left;\n  position: relative;\n  height: 100%;\n}\n.uploader-file-name {\n  width: 45%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-indent: 14px;\n}\n.uploader-file-icon {\n  width: 24px;\n  height: 24px;\n  display: inline-block;\n  vertical-align: top;\n  margin-top: 13px;\n  margin-right: 8px;\n}\n.uploader-file-icon::before {\n  content: "📃";\n  display: block;\n  height: 100%;\n  font-size: 24px;\n  line-height: 1;\n  text-indent: 0;\n}\n.uploader-file-size {\n  width: 18%;\n  text-indent: 2px;\n}\n/*.uploader-file-meta {\n  width: 8%;\n}*/\n.uploader-file-status {\n  width: 24%;\n  text-indent: 2px;\n}\n.uploader-file-actions {\n  width: 12%;\n}\n.uploader-file-actions > span {\n  display: none;\n  float: left;\n  width: 16px;\n  height: 16px;\n  margin-top: 16px;\n  margin-right: 10px;\n  cursor: pointer;\n  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAYAAAD0ZHJ6AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAJcEhZcwAACxMAAAsTAQCanBgAAARkSURBVGje7ZnfS1NRHMAH4ptPkvQSuAdBkCxD8FUQJMEULUgzy1KyyPVQ4JMiiP4Bvg6EwUQQfMmwhwRDshwaKUjDVCgoSdDNHkzTJZ6+Z37Purve8+PeTb2TM/ggu+ew89l33x8H9BBCPG7GowXTJej3+wnDvEm0JuLC04+EYWftVAUv+fiCvDUdQR1BHUEdQR3BTIygvixoQS14XgTtthLVdpNWwXRLqvQ724LplFRtyrYF0yVpFLQrKRVMh6RZ0I6kkmCqklaCqpKZH0FX56Crq9jVfdDVk0RfFrSgFsxkQVmLcdKCVrKySCrryhPEyYShhzOcrFtG0EoilfHHk1CRU5rF6ZjNZhlVOW6RnMSVyyilKies4pO41diVy8wIujoHXV3FGdMHXTtJKLFYTLhZtq4vC1rwXApCZTIqgR6g1PBMCO9DL3bMMSqBHqDU8EyISDAHiGKvWwcCQG2KgjlAFCDAOhAAap0K5gKLphk8mqJgLrCIgoxRJ4J5wKpJ7gAoMkn5EBXBPGDVJHcAFJmkfIhQcAql1oBpTvTol9gG9pm4RHAKpdaAaU706JfYBvaZuJVgPQrt4sFlnOh5MC/p3lmJYD0K7eLBZZzoeTAv6d5ZnuAYHjpgEOnk5F0ufhG6v1ggOIaHDhhEOjl5l4tfhO4vthLcwAMrFNvLJO5vEwhu4IEViu1lEve3WQmyoihQFBzG/V0CQVYUBYqCw7i/SxTBcpsRbFeIYLnNCLZbCY5b5KAnxRwct8hBj9McZFVMW0ihRNBuFdMWUigRlFaxuQ9WWYjRMTiIe5z0wSoLMToGB3GPsA9aTZIJoB+nRgBnM1tzOkkmgH6cGgGczWzNpzqLx3n/aULJJgezeNw07oxQySbVywKjBOgFRnDs+VEsx8FlgVEC9AIjOPb8KJYjvSzoG7UW1IJaUAtqQS14toLNM5fN5APdwBJA8G83Pk/aK/rgzVvXzeQD3cASQPBvNz5P2ssTzAaGUIrHEO6zI5gNDKEUjyHcxxWkh4Ylcowwk1QQpIeGJXKMMJO0EgwqyjGCioJBJvDrxRMSuVOTJEXfbz1/bHwWtBL0yoQehK6RucgE+bGzanzulQh6E3IgQV+xpc8kcrfuSO7eTfJ3ZYmQw0Oy9azVKOk1C/bJ5D5F38YPeLfx0rjWJxHsS0SqsSYuxySjj5qO5Oj7xQWy2VBtFOwzCy6ryH3YfE3uh64Y1xckgstJPydEjkkeHv07Iy4Xaao15+KCWTBx6M/db+T9xivSErqaJDdzXI6yLRE8Vgg0coex/SPJvT0SbWu0KpZtbgSpCH3NRt7I5OxHkObc6heU+/M/J5vrpBFM5GBLqCQux14COXs5CNXK5OjPGm1tSMrJSOMNYQ4mVTGV/L6zTL7+DovkbFUxbSW0Wo05l8hJWsU+cRWfSh+Mt5Lb1ck/J1TvVsdDaR/MiEni+llsdZuZp62EViu+96bpNjNPWwmtVnzvFd5m9IVVC54x/wA7gNvqFG9vXQAAAABJRU5ErkJggg==") no-repeat 0 0;\n}\n.uploader-file-actions > span:hover {\n  background-position-x: -21px;\n}\n.uploader-file-actions .uploader-file-pause {\n  background-position-y: 0;\n}\n.uploader-file-actions .uploader-file-resume {\n  background-position-y: -17px;\n}\n.uploader-file-actions .uploader-file-retry {\n  background-position-y: -53px;\n}\n.uploader-file-actions .uploader-file-remove {\n  display: block;\n  background-position-y: -34px;\n}\n'],sourceRoot:""}])},function(e,t,i){t=e.exports=i(0)(!0),t.push([e.i,".uploader{position:relative}","",{version:3,sources:["D:/github/vue-uploader/src/components/uploader.vue"],names:[],mappings:"AACA,UACE,iBAAmB,CACpB",file:"uploader.vue",sourcesContent:["\n.uploader {\n  position: relative;\n}\n"],sourceRoot:""}])},function(e,t,i){t=e.exports=i(0)(!0),t.push([e.i,".uploader-drop{position:relative;padding:10px;overflow:hidden;border:1px dashed #ccc;background-color:#f5f5f5}.uploader-dragover{border-color:#999;background-color:#f7f7f7}","",{version:3,sources:["D:/github/vue-uploader/src/components/drop.vue"],names:[],mappings:"AACA,eACE,kBAAmB,AACnB,aAAc,AACd,gBAAiB,AACjB,uBAAwB,AACxB,wBAA0B,CAC3B,AACD,mBACE,kBAAmB,AACnB,wBAA0B,CAC3B",file:"drop.vue",sourcesContent:["\n.uploader-drop {\n  position: relative;\n  padding: 10px;\n  overflow: hidden;\n  border: 1px dashed #ccc;\n  background-color: #f5f5f5;\n}\n.uploader-dragover {\n  border-color: #999;\n  background-color: #f7f7f7;\n}\n"],sourceRoot:""}])},function(e,t,i){t=e.exports=i(0)(!0),t.push([e.i,".uploader-files{position:relative}.uploader-files>ul{list-style:none;margin:0;padding:0}","",{version:3,sources:["D:/github/vue-uploader/src/components/files.vue"],names:[],mappings:"AACA,gBACE,iBAAmB,CACpB,AACD,mBACE,gBAAiB,AACjB,SAAU,AACV,SAAU,CACX",file:"files.vue",sourcesContent:["\n.uploader-files {\n  position: relative;\n}\n.uploader-files > ul {\n  list-style: none;\n  margin: 0;\n  padding: 0\n}\n"],sourceRoot:""}])},function(e,t,i){t=e.exports=i(0)(!0),t.push([e.i,".uploader-btn{display:inline-block;position:relative;padding:4px 8px;font-size:100%;line-height:1.4;color:#666;border:1px solid #666;cursor:pointer;border-radius:2px;background:none;outline:none}.uploader-btn:hover{background-color:rgba(0,0,0,.08)}","",{version:3,sources:["D:/github/vue-uploader/src/components/btn.vue"],names:[],mappings:"AACA,cACE,qBAAsB,AACtB,kBAAmB,AACnB,gBAAiB,AACjB,eAAgB,AAChB,gBAAiB,AACjB,WAAY,AACZ,sBAAuB,AACvB,eAAgB,AAChB,kBAAmB,AACnB,gBAAiB,AACjB,YAAc,CACf,AACD,oBACE,gCAAqC,CACtC",file:"btn.vue",sourcesContent:["\n.uploader-btn {\n  display: inline-block;\n  position: relative;\n  padding: 4px 8px;\n  font-size: 100%;\n  line-height: 1.4;\n  color: #666;\n  border: 1px solid #666;\n  cursor: pointer;\n  border-radius: 2px;\n  background: none;\n  outline: none;\n}\n.uploader-btn:hover {\n  background-color: rgba(0, 0, 0, .08);\n}\n"],sourceRoot:""}])},function(e,t,i){var n=i(7).each,r={_eventData:null,on:function(e,t){this._eventData||(this._eventData={}),this._eventData[e]||(this._eventData[e]=[]);var i=!1;n(this._eventData[e],function(e){if(e===t)return i=!0,!1}),i||this._eventData[e].push(t)},off:function(e,t){this._eventData||(this._eventData={}),this._eventData[e]&&this._eventData[e].length&&(t?n(this._eventData[e],function(i,n){if(i===t)return this._eventData[e].splice(n,1),!1},this):this._eventData[e]=[])},trigger:function(e){if(this._eventData||(this._eventData={}),!this._eventData[e])return!0;var t=this._eventData[e].slice.call(arguments,1),i=!1;return n(this._eventData[e],function(e){i=!1===e.apply(this,t)||i},this),!i}};e.exports=r},function(e,t,i){function n(e,t,i){s.defineNonEnumerable(this,"uploader",e),this.isRoot=this.isFolder=e===this,s.defineNonEnumerable(this,"parent",i||null),s.defineNonEnumerable(this,"files",[]),s.defineNonEnumerable(this,"fileList",[]),s.defineNonEnumerable(this,"chunks",[]),s.defineNonEnumerable(this,"_errorFiles",[]),s.defineNonEnumerable(this,"file",null),this.id=s.uid(),this.isRoot||!t?this.file=null:s.isString(t)?(this.isFolder=!0,this.file=null,this.path=t,this.parent.path&&(t=t.substr(this.parent.path.length)),this.name="/"===t.charAt(t.length-1)?t.substr(0,t.length-1):t):(this.file=t,this.fileType=this.file.type,this.name=t.fileName||t.name,this.size=t.size,this.relativePath=t.relativePath||t.webkitRelativePath||this.name,this._parseFile()),this.paused=e.opts.initialPaused,this.error=!1,this.allError=!1,this.aborted=!1,this.completed=!1,this.averageSpeed=0,this.currentSpeed=0,this._lastProgressCallback=Date.now(),this._prevUploadedSize=0,this._prevProgress=0,this.bootstrap()}function r(e){var t=[],i=e.split("/"),n=i.length,r=1;if(i.splice(n-1,1),n--,i.length)for(;r<=n;)t.push(i.slice(0,r++).join("/")+"/");return t}var s=i(7),o=i(22);s.extend(n.prototype,{_parseFile:function(){var e=r(this.relativePath);if(e.length){var t=this.uploader.filePaths;s.each(e,function(i,r){var s=t[i];s||(s=new n(this.uploader,i,this.parent),t[i]=s,this._updateParentFileList(s)),this.parent=s,s.files.push(this),e[r+1]||s.fileList.push(this)},this)}else this._updateParentFileList()},_updateParentFileList:function(e){e||(e=this);var t=this.parent;t&&t.fileList.push(e)},_eachAccess:function(e,t){if(this.isFolder)return void s.each(this.files,function(t,i){return e.call(this,t,i)},this);t.call(this,this)},bootstrap:function(){if(!this.isFolder){var e=this.uploader.opts;s.isFunction(e.initFileFn)&&e.initFileFn.call(this,this),this.abort(!0),this._resetError(),this._prevProgress=0;for(var t=e.forceChunkSize?Math.ceil:Math.floor,i=Math.max(t(this.size/e.chunkSize),1),n=0;n<i;n++)this.chunks.push(new o(this.uploader,this,n))}},_measureSpeed:function(){var e=this.uploader.opts.speedSmoothingFactor,t=Date.now()-this._lastProgressCallback;if(t){var i=this.sizeUploaded();this.currentSpeed=Math.max((i-this._prevUploadedSize)/t*1e3,0),this.averageSpeed=e*this.currentSpeed+(1-e)*this.averageSpeed,this._prevUploadedSize=i,this.parent&&this.parent._checkProgress()&&this.parent._measureSpeed()}},_checkProgress:function(e){return Date.now()-this._lastProgressCallback>=this.uploader.opts.progressCallbacksInterval},_chunkEvent:function(e,t,i){var n=this.uploader,r=o.STATUS,s=this,a=this.getRoot(),u=function(){s._measureSpeed(),n._trigger("fileProgress",a,s,e),s._lastProgressCallback=Date.now()};switch(t){case r.PROGRESS:this._checkProgress()&&u();break;case r.ERROR:this._error(),this.abort(!0),n._trigger("fileError",a,this,i,e);break;case r.SUCCESS:if(this._updateUploadedChunks(i,e),this.error)return;clearTimeout(this._progeressId),this._progeressId=0;var l=Date.now()-this._lastProgressCallback;l<n.opts.progressCallbacksInterval&&(this._progeressId=setTimeout(u,n.opts.progressCallbacksInterval-l)),this.isComplete()?(clearTimeout(this._progeressId),u(),this.currentSpeed=0,this.averageSpeed=0,n._trigger("fileSuccess",a,this,i,e),a.isComplete()&&n._trigger("fileComplete",a,this)):this._progeressId||u();break;case r.RETRY:n._trigger("fileRetry",a,this,e)}},_updateUploadedChunks:function(e,t){var i=this.uploader.opts.checkChunkUploadedByResponse;if(i){var n=t.xhr;s.each(this.chunks,function(r){if(!r.tested){var s=i.call(this,r,e);r!==t||s||(r.xhr=null),s&&(r.xhr=n),r.tested=!0}},this),this._firstResponse?this.uploader.uploadNextChunk():(this._firstResponse=!0,this.uploader.upload(!0))}else this.uploader.uploadNextChunk()},_error:function(){this.error=this.allError=!0;for(var e=this.parent;e&&e!==this.uploader;)e._errorFiles.push(this),e.error=!0,e._errorFiles.length===e.files.length&&(e.allError=!0),e=e.parent},_resetError:function(){this.error=this.allError=!1;for(var e=this.parent,t=-1;e&&e!==this.uploader;)t=e._errorFiles.indexOf(this),e._errorFiles.splice(t,1),e.allError=!1,e._errorFiles.length||(e.error=!1),e=e.parent},isComplete:function(){if(!this.completed){var e=!1;this._eachAccess(function(t){if(!t.isComplete())return e=!0,!1},function(){var t=o.STATUS;s.each(this.chunks,function(i){var n=i.status();if(n===t.PENDING||n===t.UPLOADING||n===t.READING||1===i.preprocessState||1===i.readState)return e=!0,!1})}),this.completed=!e}return this.completed},isUploading:function(){var e=!1;return this._eachAccess(function(t){if(t.isUploading())return e=!0,!1},function(){var t=o.STATUS.UPLOADING;s.each(this.chunks,function(i){if(i.status()===t)return e=!0,!1})}),e},resume:function(){this._eachAccess(function(e){e.resume()},function(){this.paused=!1,this.aborted=!1,this.uploader.upload()}),this.paused=!1,this.aborted=!1},pause:function(){this._eachAccess(function(e){e.pause()},function(){this.paused=!0,this.abort()}),this.paused=!0},cancel:function(){this.uploader.removeFile(this)},retry:function(e){var t=function(e){e.error&&e.bootstrap()};e?e.bootstrap():this._eachAccess(t,function(){this.bootstrap()}),this.uploader.upload()},abort:function(e){if(!this.aborted){this.currentSpeed=0,this.averageSpeed=0,this.aborted=!e;var t=this.chunks;e&&(this.chunks=[]);var i=o.STATUS.UPLOADING;s.each(t,function(e){e.status()===i&&(e.abort(),this.uploader.uploadNextChunk())},this)}},progress:function(){var e=0,t=0,i=0;return this._eachAccess(function(n,r){e+=n.progress()*n.size,t+=n.size,r===this.files.length-1&&(i=t>0?e/t:this.isComplete()?1:0)},function(){if(this.error)return void(i=1);if(1===this.chunks.length)return this._prevProgress=Math.max(this._prevProgress,this.chunks[0].progress()),void(i=this._prevProgress);var e=0;s.each(this.chunks,function(t){e+=t.progress()*(t.endByte-t.startByte)});var t=e/this.size;this._prevProgress=Math.max(this._prevProgress,t>.9999?1:t),i=this._prevProgress}),i},getSize:function(){var e=0;return this._eachAccess(function(t){e+=t.size},function(){e+=this.size}),e},getFormatSize:function(){var e=this.getSize();return s.formatSize(e)},getRoot:function(){if(this.isRoot)return this;for(var e=this.parent;e;){if(e.parent===this.uploader)return e;e=e.parent}return this},sizeUploaded:function(){var e=0;return this._eachAccess(function(t){e+=t.sizeUploaded()},function(){s.each(this.chunks,function(t){e+=t.sizeUploaded()})}),e},timeRemaining:function(){function e(e,t){return e&&!t?Number.POSITIVE_INFINITY:e||t?Math.floor(e/t):0}var t=0,i=0,n=0;return this._eachAccess(function(r,s){r.paused||r.error||(i+=r.size-r.sizeUploaded(),n+=r.averageSpeed),s===this.files.length-1&&(t=e(i,n))},function(){if(this.paused||this.error)return void(t=0);var i=this.size-this.sizeUploaded();t=e(i,this.averageSpeed)}),t},removeFile:function(e){if(e.isFolder)for(;e.files.length;){var t=e.files[e.files.length-1];this._removeFile(t)}this._removeFile(e)},_delFilePath:function(e){e.path&&this.filePaths&&delete this.filePaths[e.path],s.each(e.fileList,function(e){this._delFilePath(e)},this)},_removeFile:function(e){if(!e.isFolder){s.each(this.files,function(t,i){if(t===e)return this.files.splice(i,1),!1},this),e.abort();for(var t,i=e.parent;i&&i!==this;)t=i.parent,i._removeFile(e),i=t}e.parent===this&&s.each(this.fileList,function(t,i){if(t===e)return this.fileList.splice(i,1),!1},this),this.isRoot||!this.isFolder||this.files.length||(this.parent._removeFile(this),this.uploader._delFilePath(this)),e.parent=null},getType:function(){return this.isFolder?"folder":this.file.type&&this.file.type.split("/")[1]},getExtension:function(){return this.isFolder?"":this.name.substr(2+(~-this.name.lastIndexOf(".")>>>0)).toLowerCase()}}),e.exports=n},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{directives:[{name:"show",rawName:"v-show",value:!e.support,expression:"!support"}],staticClass:"uploader-unsupport"},[e._t("default",[e._m(0)])],2)},staticRenderFns:[function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("p",[e._v("\n      Your browser, unfortunately, is not supported by Uploader.js. The library requires support for "),i("a",{attrs:{href:"http://www.w3.org/TR/FileAPI/"}},[e._v("the HTML5 File API")]),e._v(" along with "),i("a",{attrs:{href:"http://www.w3.org/TR/FileAPI/#normalization-of-params"}},[e._v("file slicing")]),e._v(".\n    ")])}]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"uploader-list"},[e._t("default",[i("ul",e._l(e.fileList,function(e){return i("li",{key:e.id},[i("uploader-file",{attrs:{file:e,list:!0}})],1)}))],{fileList:e.fileList})],2)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"uploader-file",attrs:{status:e.status}},[e._t("default",[i("div",{staticClass:"uploader-file-progress",class:e.progressingClass,style:e.progressStyle}),e._v(" "),i("div",{staticClass:"uploader-file-info"},[i("div",{staticClass:"uploader-file-name"},[i("i",{class:"iconfont icon-"+e.fileCategory}),e._v("\n        "+e._s(e.file.name)+"\n      ")]),e._v(" "),i("div",{staticClass:"uploader-file-size"},[e._v(e._s(e.formatedSize))]),e._v(" "),i("div",{staticClass:"uploader-file-status"},[i("span",{directives:[{name:"show",rawName:"v-show",value:"uploading"!==e.status,expression:"status !== 'uploading'"}]},[e._v(e._s(e.statusText))]),e._v(" "),i("span",{directives:[{name:"show",rawName:"v-show",value:"uploading"===e.status,expression:"status === 'uploading'"}]},[i("span",[e._v(e._s(e.progressStyle.progress))]),e._v(" "),i("em",[e._v(e._s(e.formatedAverageSpeed))]),e._v(" "),i("i",[e._v(e._s(e.formatedTimeRemaining))])])]),e._v(" "),i("div",{staticClass:"uploader-file-actions"},[i("span",{staticClass:"uploader-file-pause",on:{click:e.pause}}),e._v(" "),i("span",{staticClass:"uploader-file-resume",on:{click:e.resume}},[e._v("️")]),e._v(" "),i("span",{staticClass:"uploader-file-retry",on:{click:e.retry}}),e._v(" "),i("span",{staticClass:"uploader-file-remove",on:{click:e.remove}})])])],{file:e.file,list:e.list,status:e.status,paused:e.paused,error:e.error,cmd5:e.cmd5,response:e.response,averageSpeed:e.averageSpeed,formatedAverageSpeed:e.formatedAverageSpeed,currentSpeed:e.currentSpeed,isComplete:e.isComplete,isUploading:e.isUploading,size:e.size,formatedSize:e.formatedSize,uploadedSize:e.uploadedSize,progress:e.progress,progressStyle:e.progressStyle,progressingClass:e.progressingClass,timeRemaining:e.timeRemaining,formatedTimeRemaining:e.formatedTimeRemaining,type:e.type,extension:e.extension,fileCategory:e.fileCategory})],2)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"uploader"},[e._t("default",[i("uploader-unsupport"),e._v(" "),i("uploader-drop",[i("p",[e._v("Drop files here to upload or")]),e._v(" "),i("uploader-btn",[e._v("select files")]),e._v(" "),i("uploader-btn",{attrs:{directory:!0}},[e._v("select folder")])],1),e._v(" "),i("uploader-list")],{files:e.files,fileList:e.fileList,started:e.started})],2)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{directives:[{name:"show",rawName:"v-show",value:e.support,expression:"support"}],ref:"drop",staticClass:"uploader-drop",class:e.dropClass},[e._t("default")],2)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"uploader-files"},[e._t("default",[i("ul",e._l(e.files,function(e){return i("li",{key:e.id},[i("uploader-file",{attrs:{file:e}})],1)}))],{files:e.files})],2)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("label",{directives:[{name:"show",rawName:"v-show",value:e.support,expression:"support"}],ref:"btn",staticClass:"uploader-btn"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){var n=i(63);"string"==typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);i(2)("524f9f74",n,!0,{})},function(e,t,i){var n=i(64);"string"==typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);i(2)("0eeb8305",n,!0,{})},function(e,t,i){var n=i(65);"string"==typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);i(2)("4e430fde",n,!0,{})},function(e,t,i){var n=i(66);"string"==typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);i(2)("abf27b38",n,!0,{})},function(e,t,i){var n=i(67);"string"==typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);i(2)("a80cc17e",n,!0,{})},function(e,t,i){var n=i(68);"string"==typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);i(2)("202ffdee",n,!0,{})},function(e,t,i){var n=i(69);"string"==typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);i(2)("49e3a141",n,!0,{})},function(e,t){e.exports=function(e,t){for(var i=[],n={},r=0;r<t.length;r++){var s=t[r],o=s[0],a=s[1],u=s[2],l=s[3],p={id:e+":"+r,css:a,media:u,sourceMap:l};n[o]?n[o].parts.push(p):i.push(n[o]={id:o,parts:[p]})}return i}}])});
//# sourceMappingURL=vue-uploader.js.map

组件定义状态

tatusTextMap: {
   success: '上传成功',
   error: '上传出错了',
   uploading: '上传中...',
   paused: '暂停',
   waiting: '等待中...',
   cmd5: '计算md5...'
},

fileStatusText: (status, response) => {
   return this.statusTextMap[status];
},

4、计算文件md5

在选择文件准备上传时，触发onFileAdded()，先暂停上传，把md5计算出来后再上传。
暂停上传需要在uploader组件中设置:autoStart="false"即可。

<uploader
 ref="uploader1"
    :options="options"
    :file-status-text="fileStatusText"
++  :autoStart="false"
    @upload-start="onUploadStart"
    @file-added="onFileAdded"
    @file-progress="onFileProgress"
    @file-success="onFileSuccess"
    @file-error="onFileError"
    class="uploader-example">
      <uploader-unsupport></uploader-unsupport>
        <!-- <p>Drop files here to upload or</p> -->
        <el-button size="small" @click="beforeUploade">点击上传</el-button>
        <div>只能上传mp4,mov,avi格式</div>
        <uploader-btn :attrs="attrs" v-show="false" ref="upload">选择视频文件</uploader-btn>
        <!-- <uploader-btn :directory="true">select folder</uploader-btn> -->
      <uploader-list v-show="!form.videoUrl"></uploader-list>
      <div v-show="form.videoUrl">{{form.videoUrl}}</div>
    </uploader>

onFileAdded(file) { // 文件上传前的校验
        this.computeMD5(file);
    },
    //计算MD5
    computeMD5(file) {
        let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
            chunkSize = 1024*1024*5,
            chunks = Math.ceil(file.size / chunkSize),
            currentChunk = 0,
            spark = new SparkMD5.ArrayBuffer(),
            fileReader = new FileReader();
            let time = new Date().getTime();
            file.cmd5 = true;
            fileReader.onload = (e) => {
              spark.append(e.target.result);   // Append array buffer
              currentChunk++;
        
              if (currentChunk < chunks) {
                  //console.log(`第${currentChunk}分片解析完成, 开始第${currentChunk +1} / ${chunks}分片解析`);
                  let percent = Math.floor(currentChunk / chunks * 100);
                  file.cmd5progress = percent;
                  loadNext();
              } else {
                  console.log('finished loading');
                  let md5 = spark.end();
                  console.log(`MD5计算完成：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${file.size} 用时：${new Date().getTime() - time} ms`);
                  spark.destroy(); //释放缓存
                  file.uniqueIdentifier = md5; //将文件md5赋值给文件唯一标识
                  file.cmd5 = false; //取消计算md5状态
                  file.resume(); //开始上传
              }
          };
          fileReader.onerror = () => {
              console.warn('oops, something went wrong.');
              file.cancel();
          };
        
          let loadNext = () =>　{
              let start = currentChunk * chunkSize,
                  end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
        
              fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
          };
        
          loadNext();
    },

1、根据spark-md5.js官方的例子，我们设置分片计算，每个分片5MB，根据文件大小可以计算得出分片总数。
2、然后设置文件状态为计算md5，即file.cmd5 = true;。
3、接着一片片的一次读取分片信息，最后由spark.end()计算得出文件的md5值。
4、得到md5值后，我们要将此文件的md5值赋值给file.uniqueIdentifier = md5;
目的是为了后续的秒传和断点续传作为文件的唯一标识传给后端。
5、最后取消计算md5状态，即file.cmd5 = false;，并且立马开始上传文件：file.resume();

文件上传之秒传文件

原理：秒传文件其实是因为我们要上传的文件前，服务端已经查询到该文件已经存在，
没必须再传一份一模一样的文件，直接告诉前端文件已经传好了

准备

// 后端使用php+mysql，在mysql数据库中建立hw_file表，表结构如下：
DROP TABLE IF EXISTS `hw_file`;
CREATE TABLE `hw_file` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `filename` varchar(255) NOT NULL COMMENT '文件名',
  `filesize` int(11) NOT NULL DEFAULT '0' COMMENT '文件大小',
  `md5` varchar(32) NOT NULL COMMENT '文件md5',
  `type` varchar(10) NOT NULL COMMENT '文件类型',
  `filepath` varchar(128) NOT NULL COMMENT '文件保存路径',
  `created_at` datetime NOT NULL COMMENT '上传时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=43 DEFAULT CHARSET=utf8mb4;

前端发送秒传验证请求

首先，确保开启了服务端分片校验功能，这个功能在vue-simple-uploader的options选项中设置，testChunks: true, 默认是true开启状态的。

接着选中文件，准备上传前需要计算该文件的md5，关于md5的计算请查看上一节文章。

开启了分片校验功能，目的是每次在正式上传前先向后端发送个get请求，用来实现秒传、续传功能的。

在这里插入图片描述

在这个get请求中，在url中会携带文件的md5等相关信息一起传给后端。

在后端验证好文件md5后，会返回相应的是否秒传的标识isExist，前端要识别这个标识，
并及时更新文件上传状态。

在options选项中添加函数checkChunkUploadedByResponse()，该函数响应后台返回
message信息，同时检测分片信息是否上传完整，在后面的断点续传章节会讲到验证分片。

// 服务器分片校验函数
checkChunkUploadedByResponse: (chunk, message) => {
    let obj = JSON.parse(message);
    if (obj.isExist) {
        this.statusTextMap.success = '秒传文件';
        return true;
    }
},

很显然，当检测到obj.isExist是true的时候，则表明文件已经存在了，这是直接将文件的上传状态改成：“秒传文件”，并结束上传。

文件上传之断点续传和跨端续传

在vue-simple-uploader的options选项中添加函数checkChunkUploadedByResponse()，
该函数响应后台返回message信息，同时检测分片信息是否上传完整。
上传分片前，前端会携带文件md5等信息先向后端发送一个get请求，
这个checkChunkUploadedByResponse()就是用来响应这个get请求的。

// 服务器分片校验函数
  checkChunkUploadedByResponse: (chunk, message) => {
      let obj = JSON.parse(message);
      if (obj.isExist) {
          this.statusTextMap.success = '秒传文件';
          return true;
      }

      return (obj.uploaded || []).indexOf(chunk.offset + 1) >= 0
  },

很显然，如果返回obj.isExist则表示文件已经存在，应该是秒传文件，该文件的所有后续上传操作就没了。
如果返回的是文件分片信息，类似：{"uploaded":[1,2,3,4,5,6,7,8,9,10,...]}，表示已经上传过了该文件的这些分片。
注意这里是return true 是不需要上传，return false是需要上传

链接：

文章来源于helloweba.net
文章链接：https://www.helloweba.net/php/636.html

Best_卡卡

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录