fs-file-uploader-0c5a207a.CeGVQTFV.js 7.8 KB

1
  1. import{K as fe,R as de,M as me,H as ye}from"./index.DYFzjhQc.js";import{l as w}from"./elementPlus.CXoFsoPv.js";import{d as we,r as y,k as g,w as ge,o as v,c as ve,M as z,O as _,Q as I,ac as he,ad as be,K as H,a as xe,R as Le,I as Ue,n as Te}from"./vue.1RczIYhx.js";const Fe=we({name:"FsFileUploader",inheritAttrs:!1,props:{modelValue:{},limit:{type:Number},sizeLimit:{type:[Number,Object]},pixelLimit:{type:Object,required:!1},buildUrl:{default(){return o=>o}},buildUrls:{},button:{type:Object},listType:{type:String},beforeUpload:{type:Function},beforeUploadRequest:{type:Function},uploader:{type:Object},preview:{type:Object},valueType:{type:String,default:"url"},getFileName:{}},emits:["change","update:modelValue","success","exceed"],setup(o,n){const{ui:s}=de(),{t:c}=me(),r=y([]),h=y(),f=y(),Q=g(()=>o.getFileName||(async e=>{if(typeof e!="string")return console.warn("获取文件名失败,请配置getFileName"),e;const t=e.substring(e.lastIndexOf("/")+1),i=t.indexOf("?");return i>=0?t.substring(0,i):t}));function b(e){return o.valueType==="object"?e:e[o.valueType]}function G(e){const t=[];for(let i of e)t.push(b(i));return t}async function J(e){const t=[];for(let i of e){let l;typeof i=="string"||typeof i=="number"||typeof i=="boolean"||i instanceof Date?(l={url:void 0,key:i,value:i},o.valueType!=="object"&&(l[o.valueType]=i)):l=i,l[s.upload.id]||(l[s.upload.id]=Math.random()+""),l.status||(l.status=s.upload.status.success),t.push(l)}await B(t);for(const i of t)if(!i.name){const l=i.url||i.value;i.name=await Q.value(l,i)}return t}async function j(e){const t=[];for(let i of e){const l=i.response||i.fsRes,a={size:i.size,name:i.name,uid:i.uid,...l??i};t.push(a)}return await B(t),G(t)}async function x(e){const t=[];if(e==null||e.length===0){r.value=t;return}if(e instanceof Array)for(let l of e)t.push(l);else t.push(e);const i=await J(t);N(i)}async function W(){await S.onChange(),await S.onBlur()}async function X(e){let t=await Y(e);V(t),Te(async()=>{await W()})}async function Y(e){if(e==null||e.length===0)return o.limit===1?null:[];if(o.limit===1)return(await j(e))[0];const t=[];for(let i of e)s.upload.isSuccess(i)&&t.push(i);return await j(t)}async function B(e){let t=e.filter(i=>i.url==null);if(o.buildUrls){const i=t.map(a=>b(a)),l=await o.buildUrls(i);for(let a=0;a<t.length;a++)t[a].url=l[a]}else if(o.buildUrl)for(let i of t)i.url=await o.buildUrl(b(i));else for(let i of t)i.url=i.value||i.key}function O(e){n.emit("change",e)}function V(e){h.value=e,n.emit("update:modelValue",e)}const S=s.formItem.injectFormItemContext();ge(()=>o.modelValue,async e=>{O(e),e!==h.value&&await x(e)}),x(o.modelValue);function Z(){return r.value.filter(e=>e.status===s.upload.status.uploading).length>0}function d(e,t){N(t),X(t)}function L(e,t,i){n.emit("success",{res:e,file:t,fileList:i}),d(t,i)}function k(e){let t;return e>1024*1024*1024?t=(e/(1024*1024*1024)).toFixed(2)+"G":e>1024*1024?t=(e/(1024*1024)).toFixed(2)+"M":t=Math.round(e/1024)+"K",t}const E=(e=!1)=>{const t=e?s.upload.limitAdd:0;return o.limit>0&&r.value.length>=o.limit+t};function $(){s.message.warn(c("fs.extends.fileUploader.limitTip",[o.limit]))}function U(){if(E(!0))throw $(),new Error("文件数量超限")}function ee(e){if(o.sizeLimit!=null){let t=o.sizeLimit,i=null;if(typeof o.sizeLimit=="number"?i=(l,a)=>{const p=k(a),u=k(e.size);s.message.warn(c("fs.extends.fileUploader.sizeLimitTip",[p,u]))}:(t=o.sizeLimit.limit,i=o.sizeLimit.tip),e.size>t){let l="文件大小超过限制,当前文件大小:"+e.size/1024+"k";throw i(e.size,t),new Error(l)}}}const te=e=>{let t=0,i=0,l="";if(o.pixelLimit)Array.isArray(o.pixelLimit)?(t=o.pixelLimit[0],i=o.pixelLimit[1]||o.pixelLimit[0]||0,l=o.pixelLimit[2]||""):typeof o.pixelLimit=="object"&&(t=o.pixelLimit.width||0,i=o.pixelLimit.height||0,l=o.pixelLimit.tip||"");else return Promise.resolve(!0);let a=l||c("fs.extends.fileUploader.pixelLimitTip",[t,i]);return new Promise((p,u)=>{let D=new FileReader;D.onload=pe=>{var M;let K=(M=pe.target)==null?void 0:M.result,m=new Image;m.onload=function(){t&&m.width>t||i&&m.height>i?(s.message.warn(a),u(a)):p(!0)},m.onerror=function(Pe){s.message.warn(c("fs.extends.fileUploader.loadError")),u(c("fs.extends.fileUploader.loadError"))},K&&(m.src=K)},D.readAsDataURL(e)})},T=async(e,t=r.value)=>{if(!(o.beforeUpload&&await o.beforeUpload({file:e,fileList:r.value})===!1))try{U(),ee(e),R()&&await te(e)}catch{return!1}};function N(e){r.value=e}async function ie(e){e.options=o.uploader||{};const{getUploaderImpl:t}=ye();let i=await t(e.options.type);if(i==null)throw s.message.warn("Sorry,The uploader component is not ready yet"),new Error("Sorry,The component is not ready yet");return await(i==null?void 0:i.upload(e))}async function F(e){o.beforeUploadRequest&&await o.beforeUploadRequest(e);const{file:t,onProgress:i,onSuccess:l,onError:a}=e,p={file:t,fileName:t.name,onProgress:i};try{const u=await ie(p);l(u)}catch(u){console.error("上传失败",u),a(u)}}const oe=g(()=>ae()?{is:"FsIcon",icon:s.icons.plus}:{is:"FsButton",icon:s.icons.upload,text:c("fs.extends.fileUploader.text"),...o.button}),q=y(!1),A=y(),le=g(()=>({...s.dialog.footer(),...o.preview}));function se(e){return new Promise((t,i)=>{const l=new FileReader;l.readAsDataURL(e),l.onload=()=>t(l.result),l.onerror=a=>i(a)})}function R(){return o.listType===s.upload.typeImageCard||o.listType===s.upload.typeImage}function ae(){return o.listType===s.upload.typeImageCard}const C=async e=>{var t,i;if(!R()){let l;e.url?l=e.url:s.type==="antdv"?l=(t=e.response)==null?void 0:t.url:s.type==="element"?l=(i=e.fsRes)==null?void 0:i.url:l=e.url,window.open(l,"_blank")}!e.url&&!e.preview&&e.originFileObj&&(e.preview=await se(e.originFileObj)),A.value=e.url||e.preview,q.value=!0};function ne(){const e={customRequest:F,beforeUpload:T,listType:o.listType,onChange:t=>{const{file:i,fileList:l}=t;d(i,l),i.status==="done"&&L(i.response,i,l)},onPreview:C};return o.limit!=null&&n.attrs.maxCount==null&&(e.maxCount=o.limit),e}function re(){return{action:"",listType:o.listType,beforeUpload:T,httpRequest:F,onExceed:()=>{U(),n.emit("exceed",{fileList:r.value})},onRemove:(e,t)=>{d(e,t)},onChange:(e,t)=>{d(e,t)},onSuccess:(e,t,i)=>{e!=null&&(t.response=e,t.fsRes=e,L(e,t,i))},onPreview:C}}const P={};function ue(){function e(t){let i=t.value||t;i=w.cloneDeep(i);for(let l of i){const a=P[l.id];a&&w.merge(l,a)}return i}return{action:"",listType:o.listType,onBeforeUpload:async({file:t,fileList:i})=>T(t,i),customRequest:t=>{const i=t.file;F({...t,file:i.file,onSuccess:async l=>{const a=o.valueType==="object"?l:l[o.valueType];l.url=await o.buildUrl(a),w.merge(i,l),P[i.id]={...l,fsRes:l},t.onFinish(i)},onProgress:l=>{t.onProgress(l)}})},onExceed:()=>{U(),n.emit("exceed",{fileList:r.value})},onRemove:t=>{},onChange:t=>{const{event:i,file:l,fileList:a}=t,p=e(a);d(l,[...p])},onFinish:t=>{const i=P[t.id];i&&w.merge(t,i);const l=e(r);L(i,t,l)},onPreview:C}}const ce=g(()=>{let e=null;return s.type==="antdv"?e=ne():s.type==="element"?e=re():e=ue(),{...e,...n.attrs}});return{ui:s,fileList:r,fileUploaderRef:f,initValue:x,onChange:O,onInput:V,hasUploading:Z,isPicture:R,computedFileSelectBtn:oe,previewVisible:q,previewImage:A,computedPreview:le,computedOnLimit:E,computedBinding:ce}}}),Re=["src"];function Ce(o,n,s,c,r,h){return v(),ve("div",{class:Ue(["fs-file-uploader",{"fs-file-uploader-limit":o.computedOnLimit()}])},[(v(),z(I(o.ui.upload.name),H({ref:"fileUploaderRef",fileList:o.fileList,"onUpdate:fileList":n[0]||(n[0]=f=>o.fileList=f)},o.computedBinding),{default:_(()=>[(v(),z(I(o.computedFileSelectBtn.is),he(be(o.computedFileSelectBtn)),null,16))]),_:1},16,["fileList"])),o.isPicture()?(v(),z(I(o.ui.dialog.name),H({key:0,[o.ui.dialog.visible]:o.previewVisible,["onUpdate:"+o.ui.dialog.visible]:n[1]||(n[1]=f=>o.previewVisible=f)},o.computedPreview),{default:_(()=>[xe("img",{style:{"max-width":"100%","max-height":"100%"},src:o.previewImage},null,8,Re)]),_:1},16)):Le("",!0)],2)}const Be=fe(Fe,[["render",Ce]]);export{Be as default};