vue3-chunked-upload 1.0.4

package/dist/index.umd.js

@@ -0,0 +1,2 @@
+(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.mb-3{margin-bottom:.75rem}.mt-0\\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.flex{display:flex}.hidden{display:none}.h-1\\.5{height:.375rem}.h-10{height:2.5rem}.h-14{height:3.5rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-full{height:100%}.w-10{width:2.5rem}.w-14{width:3.5rem}.w-4{width:1rem}.w-5{width:1.25rem}.min-w-0{min-width:0px}.flex-1{flex:1 1 0%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-dashed{border-style:dashed}.border-blue-500{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.border-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.bg-blue-50{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.bg-indigo-50{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.bg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-yellow-500{--tw-bg-opacity: 1;background-color:rgb(234 179 8 / var(--tw-bg-opacity, 1))}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.text-center{text-align:center}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.text-indigo-600{--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-600{--tw-text-opacity: 1;color:rgb(202 138 4 / var(--tw-text-opacity, 1))}.opacity-50{opacity:.5}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\\:border-blue-400:hover{--tw-border-opacity: 1;border-color:rgb(96 165 250 / var(--tw-border-opacity, 1))}.hover\\:border-gray-300:hover{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.hover\\:bg-blue-600:hover{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.hover\\:bg-gray-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.hover\\:bg-gray-50:hover{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.hover\\:bg-red-50:hover{--tw-bg-opacity: 1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1))}.hover\\:text-gray-600:hover{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.hover\\:text-red-500:hover{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.hover\\:underline:hover{text-decoration-line:underline}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:bg-gray-400:disabled{--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.task-enter-active[data-v-372cc334],.task-leave-active[data-v-372cc334]{transition:all .3s ease}.task-enter-from[data-v-372cc334]{opacity:0;transform:translateY(-10px)}.task-leave-to[data-v-372cc334]{opacity:0;transform:translateY(10px)}.task-move[data-v-372cc334]{transition:transform .3s ease}.progress-bar[data-v-372cc334]{position:relative}.progress-bar-shimmer[data-v-372cc334]{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);animation:shimmer-372cc334 1.5s infinite}@keyframes shimmer-372cc334{0%{transform:translate(-100%)}to{transform:translate(100%)}}')),document.head.appendChild(t)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
+(function(w,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(w=typeof globalThis<"u"?globalThis:w||self,e(w.VueChunkUploader={},w.Vue))})(this,function(w,e){"use strict";function X(){return Date.now().toString(36)+Math.random().toString(36).substr(2)}function Q(d){return`${d.name}_${d.size}_${d.lastModified}`}function O(d){if(d===0)return"0 B";const C=1024,a=["B","KB","MB","GB","TB"],l=Math.floor(Math.log(d)/Math.log(C));return parseFloat((d/Math.pow(C,l)).toFixed(2))+" "+a[l]}function Y(d){return new Promise(C=>setTimeout(C,d))}function Z(d,C){const a=C.chunkSize||10485760,l=Math.ceil(d.size/a);return{id:X(),file:d,status:"pending",progress:0,chunkSize:a,totalChunks:l,uploadedChunks:new Set,currentChunk:0,fileId:Q(d),xhrList:[],retryCount:0,chunkStatus:new Map}}function J(d={}){const a={...{chunkSize:10485760,maxConcurrent:3,uploadUrl:"/api/chunkUpload/chunk",mergeUrl:"/api/chunkUpload/complete",maxFileSize:10737418240,autoStart:!0,retryTimes:3,retryDelay:1e3,draggable:!0,headers:{},accept:"",limit:0,onBeforeUpload:()=>!0,onProgress:()=>{},onSuccess:()=>{},onError:()=>{},onTaskAdd:()=>{},onTaskRemove:()=>{},onNotice:()=>{},onAllComplete:()=>{}},...d},l=e.ref([]),c=e.ref(!1),k=new Map,b=e.ref(0),R=e.computed(()=>l.value.length),v=e.computed(()=>l.value.filter(t=>t.status==="completed").length),H=e.computed(()=>{if(l.value.length===0)return 0;const t=l.value.reduce((o,r)=>o+r.progress,0);return Math.round(t/l.value.length)}),$=e.computed(()=>l.value.reduce((t,o)=>t+o.file.size,0)),q=e.computed(()=>{let t=0;return l.value.forEach(o=>{t+=o.uploadedChunks.size*o.chunkSize}),Math.min(t,$.value)}),B=()=>{b.value++,l.value=[...l.value]},N=(t,o)=>{const r=k.get(t);r&&(o(r),l.value=[...l.value])},E=t=>k.get(t),p=()=>{if(l.value.length===0)return;if(l.value.every(o=>o.status==="completed")){const o=l.value.filter(r=>r.status==="completed");a.onAllComplete(o)}},y=(t,o)=>new Promise((r,n)=>{const s=o*t.chunkSize,i=Math.min(s+t.chunkSize,t.file.size),m=t.file.slice(s,i),h={fileId:t.fileId,fileName:t.file.name,chunkIndex:o,totalChunks:t.totalChunks,chunk:m},g=new FormData;g.append("fileId",h.fileId),g.append("fileName",h.fileName),g.append("chunkIndex",String(h.chunkIndex)),g.append("totalChunks",String(h.totalChunks)),g.append("chunk",h.chunk);const u=new XMLHttpRequest;t.xhrList.push(u),u.open("POST",a.uploadUrl,!0),u.timeout=6e4,a.headers&&Object.entries(a.headers).forEach(([f,x])=>{u.setRequestHeader(f,x)}),u.onload=()=>{if(u.status===200)try{const f=JSON.parse(u.responseText);f.success?(t.uploadedChunks.add(o),t.chunkStatus.set(o,"completed"),r()):n(new Error(f.message||`上传分片 ${o} 失败`))}catch{t.uploadedChunks.add(o),t.chunkStatus.set(o,"completed"),r()}else n(new Error(`上传分片 ${o} 失败: ${u.status}`))},u.onerror=()=>{n(new Error(`上传分片 ${o} 网络错误`))},u.ontimeout=()=>{n(new Error(`上传分片 ${o} 超时`))},u.upload.onprogress=f=>{f.lengthComputable&&t.status==="uploading"&&t.chunkStatus.set(o,"uploading")},u.send(g)}),_=async t=>{const o=t.totalChunks;let n=(()=>{const f=[];for(let x=0;x<o;x++)t.uploadedChunks.has(x)||f.push(x);return f})();if(n.length===0){await z(t);return}const s=[...n];let i=!1;const m=async f=>{let x=null;for(let L=0;L<a.retryTimes;L++)try{if(t.status==="paused"||t.status==="completed")return;await y(t,f);const P=t.uploadedChunks.size;if(t.progress=Math.round(P/o*100),t.startTime){const K=(Date.now()-t.startTime)/1e3;if(K>0){const Te=P*t.chunkSize;t.speed=Math.round(Te/K/1024)}}if(a.onProgress(t),N(t.id,()=>{}),t.uploadedChunks.size===o){i||(i=!0,await z(t));return}await h();return}catch(P){x=P,t.retryCount++,L<a.retryTimes-1&&await Y(a.retryDelay*(L+1))}throw x||new Error(`上传分片 ${f} 失败`)},h=async()=>{if(s.length===0||t.status==="paused"||t.status==="completed")return;const f=s.shift();await m(f)},g=Math.min(a.maxConcurrent,s.length),u=[];for(let f=0;f<g;f++)u.push(h());await Promise.all(u)},z=async t=>{try{const o={"Content-Type":"application/json",...a.headers},r={fileId:t.fileId,fileName:t.file.name,totalChunks:t.totalChunks,fileSize:t.file.size},n=await fetch(a.mergeUrl,{method:"POST",headers:o,body:JSON.stringify(r)}),s=await n.json();if(n.ok&&s.success)t.status="completed",t.progress=100,t.endTime=Date.now(),s.data&&s.data.path&&(t.path=s.data.path),a.onSuccess(t),a.onNotice("success",`文件 "${t.file.name}" 上传成功`),N(t.id,()=>{}),p();else throw new Error(s.message||"合并文件失败")}catch(o){throw t.status="error",t.errorMessage=o instanceof Error?o.message:"合并文件失败",a.onError(t,o),o}},V=async t=>{const o=E(t);if(!o)throw new Error(`任务 ${t} 不存在`);if(o.status==="completed"){a.onNotice("info","文件已上传完成");return}if(o.status!=="uploading"){o.retryCount=0,o.status="uploading",o.startTime=Date.now(),c.value=!0;try{await _(o)}catch(r){console.error("Upload error:",r),o.status="error",o.errorMessage=r instanceof Error?r.message:"上传失败",a.onError(o,r),a.onNotice("error",`上传失败: ${o.errorMessage}`),N(o.id,()=>{})}finally{c.value=!1}}},A=t=>{const o=[],r=Array.from(t);for(const n of r){if(n.size>a.maxFileSize){a.onNotice("error",`文件 "${n.name}" 超过 ${O(a.maxFileSize)} 限制`);continue}if(l.value.some(m=>m.file.name===n.name&&m.file.size===n.size&&m.file.lastModified===n.lastModified)){a.onNotice("warning",`文件 "${n.name}" 已存在`);continue}const i=Z(n,a);l.value.push(i),k.set(i.id,i),o.push(i.id),a.onTaskAdd(i),a.autoStart&&e.nextTick(()=>{V(i.id)})}return B(),o},F=t=>{for(const o of t){if(l.value.some(g=>{var u;return g.id===o.id||((u=g.file)==null?void 0:u.name)===o.name}))continue;const n=a.chunkSize||10*1024*1024,s=Math.ceil(o.size/n),i=new Blob([],{type:""});Object.defineProperty(i,"size",{value:o.size});const m=i;Object.defineProperty(m,"name",{value:o.name});const h={id:o.id,file:m,status:"completed",progress:100,chunkSize:n,totalChunks:s,uploadedChunks:new Set(Array.from({length:s},(g,u)=>u)),currentChunk:s-1,fileId:`${o.name}_${o.size}`,xhrList:[],retryCount:0,chunkStatus:new Map,path:o.path};l.value.push(h),k.set(h.id,h)}B()},M=t=>{const o=E(t);if(!o||o.status!=="uploading")return;o.status="paused",o.xhrList.forEach(n=>n.abort()),o.xhrList=[],N(t,()=>{}),l.value.some(n=>n.status==="uploading")||(c.value=!1)},T=t=>{const o=E(t);!o||o.status!=="paused"&&o.status!=="pending"||V(t)},S=t=>{const o=E(t);return o?(o.xhrList.forEach(r=>r.abort()),k.delete(t),l.value=l.value.filter(r=>r.id!==t),a.onTaskRemove(o),B(),!0):!1},I=()=>{l.value.forEach(t=>{t.xhrList.forEach(o=>o.abort())}),l.value=[],k.clear(),c.value=!1,B()},D=t=>{const o=E(t);o&&(o.status==="error"||o.status==="pending")&&(o.retryCount=0,o.errorMessage=void 0,o.status="pending",o.chunkStatus.forEach((r,n)=>{r==="error"&&(o.chunkStatus.delete(n),o.uploadedChunks.delete(n))}),N(t,()=>{}),V(t))},j=()=>{l.value.forEach(t=>{t.status==="uploading"&&M(t.id)})},W=()=>{l.value.forEach(t=>{t.status==="paused"&&T(t.id)})},G=()=>{const t={pending:0,uploading:0,paused:0,completed:0,error:0,total:l.value.length};return l.value.forEach(o=>{t[o.status]=(t[o.status]||0)+1}),t},U=t=>{const o=E(t);return o?Array.from(o.uploadedChunks).sort((r,n)=>r-n):[]};return e.onUnmounted(()=>{l.value.forEach(t=>{t.xhrList.forEach(o=>o.abort())}),l.value=[],k.clear(),c.value=!1}),{config:a,tasks:l,isUploading:c,totalCount:R,completedCount:v,totalProgress:H,totalSize:$,uploadedSize:q,updateCounter:b,maxFileSize:a.maxFileSize,addFiles:A,addExistingFiles:F,startUpload:V,pauseUpload:M,resumeUpload:T,removeTask:S,clearAllTasks:I,retryTask:D,pauseAll:j,resumeAll:W,getTask:E,getTaskStats:G,getUploadedChunks:U,forceUpdate:B,formatFileSize:O}}const ee={key:0},te={class:"text-xs text-gray-400 mt-2"},oe={class:"flex flex-col items-center gap-3"},ne={class:"text-xs text-gray-400 mt-1"},re=["accept"],se={key:2,class:"upload-button"},le=["disabled"],ae={class:"text-xs text-gray-400 mt-2"},ie=["accept"],de={key:3,class:"mt-3"},ce={class:"space-y-2"},ue={key:0,class:"w-5 h-5 text-indigo-600",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},pe={key:1,class:"w-5 h-5 text-indigo-600",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},me={key:2,class:"w-5 h-5 text-gray-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},fe={class:"flex-1 min-w-0"},he={class:"text-sm font-medium text-gray-800 truncate"},ge={class:"flex items-center gap-3 mt-0.5"},ke={class:"text-xs text-gray-500"},ye={key:0,class:"text-xs text-blue-600"},Ce={key:1,class:"text-xs text-green-600"},we={key:2,class:"text-xs text-yellow-600"},Ee={key:3,class:"text-xs text-red-600"},xe={key:0,class:"mt-2"},be={class:"progress-bar-container h-1.5 bg-gray-200 rounded-full overflow-hidden"},Be={key:0,class:"progress-bar-shimmer"},Ne={class:"flex items-center gap-2"},Ve=["onClick"],ze=["onClick"],Se=["onClick"],_e=["onClick"],Me=((d,C)=>{const a=d.__vccOpts||d;for(const[l,c]of C)a[l]=c;return a})(e.defineComponent({__name:"ChunkUpload",props:{modelValue:{default:()=>[]},options:{},disabled:{type:Boolean,default:!1}},emits:["update:modelValue","success","error","progress","notice","allComplete","taskAdd","taskRemove"],setup(d,{expose:C,emit:a}){const l=d,c=a,k=e.ref(),b=e.ref(!1),R=(r,n)=>{c("notice",r,n)},v=r=>{c("success",r)},H=(r,n)=>{c("error",r,n)},$=r=>{c("progress",r)},q=r=>{c("allComplete",r)},B=r=>{c("taskAdd",r)},N=r=>{c("taskRemove",r)},E={...l.options,onNotice:R,onSuccess:v,onError:H,onProgress:$,onAllComplete:q,onTaskAdd:B,onTaskRemove:N},{config:p,tasks:y,maxFileSize:_,addFiles:z,addExistingFiles:V,pauseUpload:A,resumeUpload:F,removeTask:M,retryTask:T,formatFileSize:S}=J(E);e.onMounted(()=>{l.modelValue&&l.modelValue.length>0&&V(l.modelValue)}),e.watch(()=>l.modelValue,r=>{if(r&&r.length>0){const n=y.value.map(i=>i.id),s=r.filter(i=>!n.includes(i.id));s.length>0&&V(s)}},{immediate:!0,deep:!0});const I=r=>{if(!r.speed||r.speed===0)return"";const n=r.file.size-r.uploadedChunks.size*r.chunkSize,s=Math.ceil(n/(r.speed*1024));if(s<60)return`剩余 ${s} 秒`;const i=Math.floor(s/60),m=s%60;return`剩余 ${i} 分 ${m} 秒`},D=r=>[".mp4",".webm",".ogg",".mov",".avi",".wmv"].some(s=>r.toLowerCase().endsWith(s)),j=r=>[".mp3",".wav",".ogg",".flac",".aac",".m4a"].some(s=>r.toLowerCase().endsWith(s)),W=r=>D(r)||j(r)?"bg-indigo-50":"bg-gray-100",G=()=>{const r=y.value.filter(n=>n.status==="completed").map(n=>({id:n.id,name:n.file.name,size:n.file.size,path:n.path,status:n.status}));c("update:modelValue",r)};e.watch(()=>y.value,()=>{G()},{deep:!0});const U=()=>{var r;l.disabled||(r=k.value)==null||r.click()},t=async r=>{if(l.disabled)return;const n=r.target;if(n.files&&n.files.length>0){const s=n.files.length;if(p.limit&&y.value.length+s>p.limit){const m=p.limit-y.value.length;c("notice","warning",`最多只能上传 ${p.limit} 个文件，当前最多还能添加 ${m} 个`),n.value="";return}const i=Array.from(n.files);if(p.onBeforeUpload&&!await p.onBeforeUpload(i)){n.value="";return}z(n.files)}n.value=""},o=async r=>{var s;if(l.disabled)return;b.value=!1;const n=(s=r.dataTransfer)==null?void 0:s.files;if(n&&n.length>0){const i=n.length;if(p.limit&&y.value.length+i>p.limit){const g=p.limit-y.value.length;c("notice","warning",`最多只能上传 ${p.limit} 个文件，当前最多还能添加 ${g} 个`);return}const m=Array.from(n);if(p.onBeforeUpload&&!await p.onBeforeUpload(m))return;const h=z(n);h.length>0&&c("notice","success",`已添加 ${h.length} 个文件`)}};return C({tasks:y,addFiles:z,pauseUpload:A,resumeUpload:F,removeTask:M,retryTask:T}),(r,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["chunk-uploader",{"opacity-50 pointer-events-none":l.disabled}])},[r.$slots.trigger?(e.openBlock(),e.createElementBlock("div",ee,[e.createElementVNode("div",{onClick:n[0]||(n[0]=s=>!l.disabled&&U())},[e.renderSlot(r.$slots,"trigger",{},void 0,!0)]),e.createElementVNode("p",te,"最大文件大小 "+e.toDisplayString(e.unref(S)(e.unref(_))),1),e.createElementVNode("input",{ref_key:"fileInput",ref:k,type:"file",multiple:"",class:"hidden",onChange:t},null,544)])):e.unref(p).draggable?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["upload-zone border-2 border-dashed rounded-lg p-10 text-center cursor-pointer transition-all duration-300",{"border-blue-500 bg-blue-50":b.value&&!l.disabled,"border-gray-300 hover:border-blue-400 hover:bg-gray-50":!b.value&&!l.disabled,"border-gray-200 bg-gray-50 cursor-not-allowed":l.disabled}]),onClick:n[1]||(n[1]=s=>!l.disabled&&U()),onDragover:n[2]||(n[2]=e.withModifiers(s=>!l.disabled&&(b.value=!0),["prevent"])),onDragleave:n[3]||(n[3]=e.withModifiers(s=>!l.disabled&&(b.value=!1),["prevent"])),onDrop:e.withModifiers(o,["prevent"])},[e.createElementVNode("div",oe,[n[5]||(n[5]=e.createElementVNode("div",{class:"w-14 h-14 flex items-center justify-center"},[e.createElementVNode("svg",{class:"w-14 h-14",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{d:"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z",fill:"#DBEAFE",stroke:"#3B82F6","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),e.createElementVNode("path",{d:"M14 2v6h6M16 13H8M16 17H8M10 9H8",stroke:"#3B82F6","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})])],-1)),e.createElementVNode("div",null,[n[4]||(n[4]=e.createElementVNode("p",{class:"text-sm font-medium text-gray-700"},[e.createTextVNode(" 将文件拖放到此处或 "),e.createElementVNode("span",{class:"text-blue-600 cursor-pointer hover:underline"},"选择文件")],-1)),e.createElementVNode("p",ne,"最大文件大小 "+e.toDisplayString(e.unref(S)(e.unref(_)))+"。",1)])]),e.createElementVNode("input",{ref_key:"fileInput",ref:k,type:"file",multiple:"",accept:e.unref(p).accept,class:"hidden",onChange:t},null,40,re)],34)):(e.openBlock(),e.createElementBlock("div",se,[e.createElementVNode("button",{type:"button",class:"px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed",disabled:l.disabled,onClick:U}," 选择文件 ",8,le),e.createElementVNode("p",ae,"最大文件大小 "+e.toDisplayString(e.unref(S)(e.unref(_))),1),e.createElementVNode("input",{ref_key:"fileInput",ref:k,type:"file",multiple:"",accept:e.unref(p).accept,class:"hidden",onChange:t},null,40,ie)])),e.unref(y).length>0?(e.openBlock(),e.createElementBlock("div",de,[e.createElementVNode("div",ce,[e.createVNode(e.TransitionGroup,{name:"task"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(y),s=>(e.openBlock(),e.createElementBlock("div",{key:s.id,class:"file-item bg-white border border-gray-200 rounded-lg p-3 flex items-center gap-3 hover:border-gray-300 transition-colors"},[e.createElementVNode("div",{class:e.normalizeClass(["w-10 h-10 rounded-lg flex items-center justify-center",W(s.file.name)])},[D(s.file.name)?(e.openBlock(),e.createElementBlock("svg",ue,[...n[6]||(n[6]=[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"},null,-1),e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M21 12a9 9 0 11-18 0 9 9 0 0118 0z"},null,-1)])])):j(s.file.name)?(e.openBlock(),e.createElementBlock("svg",pe,[...n[7]||(n[7]=[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",me,[...n[8]||(n[8]=[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"},null,-1)])]))],2),e.createElementVNode("div",fe,[e.createElementVNode("p",he,e.toDisplayString(s.file.name),1),e.createElementVNode("div",ge,[e.createElementVNode("span",ke,e.toDisplayString(e.unref(S)(s.file.size)),1),s.status==="uploading"?(e.openBlock(),e.createElementBlock("span",ye,e.toDisplayString(s.progress)+"% · "+e.toDisplayString(I(s)),1)):e.createCommentVNode("",!0),s.status==="completed"?(e.openBlock(),e.createElementBlock("span",Ce," 已完成 ")):e.createCommentVNode("",!0),s.status==="paused"?(e.openBlock(),e.createElementBlock("span",we," 已暂停 ")):e.createCommentVNode("",!0),s.status==="error"?(e.openBlock(),e.createElementBlock("span",Ee," 失败 ")):e.createCommentVNode("",!0)]),s.status!=="completed"?(e.openBlock(),e.createElementBlock("div",xe,[e.createElementVNode("div",be,[e.createElementVNode("div",{class:e.normalizeClass(["progress-bar h-full rounded-full transition-all duration-300 ease-out",{"bg-blue-500":s.status==="uploading"||s.status==="pending","bg-yellow-500":s.status==="paused","bg-red-500":s.status==="error"}]),style:e.normalizeStyle({width:`${s.progress}%`})},[s.status==="uploading"?(e.openBlock(),e.createElementBlock("div",Be)):e.createCommentVNode("",!0)],6)])])):e.createCommentVNode("",!0)]),e.createElementVNode("div",Ne,[s.status==="uploading"?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:i=>e.unref(A)(s.id),class:"p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"},[...n[9]||(n[9]=[e.createElementVNode("svg",{class:"w-4 h-4",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"})],-1)])],8,Ve)):e.createCommentVNode("",!0),s.status==="paused"||s.status==="pending"?(e.openBlock(),e.createElementBlock("button",{key:1,onClick:i=>e.unref(F)(s.id),class:"p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"},[...n[10]||(n[10]=[e.createElementVNode("svg",{class:"w-4 h-4",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"}),e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})],-1)])],8,ze)):e.createCommentVNode("",!0),s.status==="error"?(e.openBlock(),e.createElementBlock("button",{key:2,onClick:i=>e.unref(T)(s.id),class:"p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"},[...n[11]||(n[11]=[e.createElementVNode("svg",{class:"w-4 h-4",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"})],-1)])],8,Se)):e.createCommentVNode("",!0),e.createElementVNode("button",{onClick:i=>e.unref(M)(s.id),class:"p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"},[...n[12]||(n[12]=[e.createElementVNode("svg",{class:"w-4 h-4",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M6 18L18 6M6 6l12 12"})],-1)])],8,_e)])]))),128))]),_:1})])])):e.createCommentVNode("",!0)],2))}}),[["__scopeId","data-v-372cc334"]]);w.Vue3ChunkedUpload=Me,w.formatFileSize=O,w.useChunkUpload=J,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "vue3-chunked-upload",
+  "version": "1.0.4",
+  "type": "module",
+  "description": "基于 Vue 3 的分片上传组件，支持断点续传、并发上传、失败重试等功能",
+  "author": "chenkai1993",
+  "license": "MIT",
+  "keywords": [
+    "vue",
+    "vue3",
+    "upload",
+    "chunked-upload",
+    "resumable",
+    "typescript"
+  ],
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "autoprefixer": "^10.5.3",
+    "postcss": "^8.5.19",
+    "tailwindcss": "^3.4.19",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-dts": "^3.0.0",
+    "vue": "^3.4.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  }
+}