2 lines
3.6 KiB
JavaScript
2 lines
3.6 KiB
JavaScript
|
import{d as A,c5 as v,P,r as i,cq as M,O as q,i as F,j as H,o as f,c as p,k as g,m as h,e as r,$ as K,y as _,Y as V,t as I,K as $,x as b,R as Q,Q as Y,a6 as G,I as J}from"./index-ce293e15.js";import{E as W}from"./el-upload-f5a4cf25.js";import"./el-progress-b748f709.js";import{l as X,d as Z}from"./index-da6bfb18.js";const ee={class:"component-upload-image"},le={key:0,class:"el-upload__tip"},ae={style:{color:"#f56c6c"}},se={style:{color:"#f56c6c"}},te=["src"],oe=A({__name:"index",props:{modelValue:[String,Object,Array],limit:v.number.def(5),fileSize:v.number.def(5),fileType:v.array.def(["png","jpg","jpeg"]),isShowTip:{type:Boolean,default:!0}},emits:["update:modelValue"],setup(d,{emit:y}){const o=d,{proxy:l}=P(),u=i(0),c=i([]),S=i(""),m=i(!1),w=i("/api"+"/resource/oss/upload"),U=i(M()),n=i([]),O=q(()=>o.isShowTip&&(o.fileType||o.fileSize)),z=i();F(()=>o.modelValue,async e=>{if(e){let s=[];Array.isArray(e)?s=e:s=(await X(e)).data,n.value=s.map(a=>{let t;return typeof a=="string"?t={name:a,url:a}:t={name:a.ossId,url:a.url,ossId:a.ossId},t})}else return n.value=[],[]},{deep:!0,immediate:!0});const B=e=>{let s=!1;if(o.fileType.length){let a="";e.name.lastIndexOf(".")>-1&&(a=e.name.slice(e.name.lastIndexOf(".")+1)),s=o.fileType.some(t=>!!(e.type.indexOf(t)>-1||a&&a.indexOf(t)>-1))}else s=e.type.indexOf("image")>-1;if(!s)return l==null||l.$modal.msgError(`文件格式不正确, 请上传${o.fileType.join("/")}图片格式文件!`),!1;if(o.fileSize&&!(e.size/1024/1024<o.fileSize))return l==null||l.$modal.msgError(`上传头像图片大小不能超过 ${o.fileSize} MB!`),!1;l==null||l.$modal.loading("正在上传图片，请稍候..."),u.value++},k=()=>{l==null||l.$modal.msgError(`上传文件数量不能超过 ${o.limit} 个!`)},C=(e,s)=>{var a;e.code===200?(c.value.push({name:e.data.fileName,url:e.data.url,ossId:e.data.ossId}),E()):(u.value--,l==null||l.$modal.closeLoading(),l==null||l.$modal.msgError(e.msg),(a=z.value)==null||a.handleRemove(s),E())},L=e=>{const s=n.value.map(a=>a.name).indexOf(e.name);if(s>-1&&c.value.length===u.value){let a=n.value[s].ossId;return Z(a),n.value.splice(s,1),y("update:modelValue",T(n.value)),!1}return!0},E=()=>{u.value>0&&c.value.length===u.value&&(n.value=n.value.filter(e=>e.url!==void 0).concat(c.value),c.value=[],u.value=0,y("update:modelValue",T(n.value)),l==null||l.$modal.closeLoading())},j=()=>{l==null||l.$modal.msgError("上传图片失败"),l==null||l.$modal.closeLoading()},x=e=>{S.value=e.url,m.value=!0},T=(e,s)=>{let a="";s=s||",";for(let t in e)e[t].ossId!==void 0&&e[t].url.indexOf("blob:")!==0&&(a+=e[t].ossId+s);return a!=""?a.substring(0,a.length-1):""};return(e,s)=>{const a=H("plus"),t=Y,N=W,D=G;return f(),p("div",ee,[g(N,{multiple:"",action:r(w),"list-type":"picture-card","on-success":C,"before-upload":B,limit:d.limit,"on-error":j,"on-exceed":k,ref:"imageUpload","before-remove":L,"show-file-list":!0,headers:r(U),"file-list":r(n),"on-preview":x,class:K({hide:r(n).length>=d.limit})},{default:h(()=>[g(t,{class:"avatar-uploader-icon"},{default:h(()=>[g(a)]),_:1})]),_:1},8,["action","limit","headers","file-list","class"]),r(O)?(f(),p("div",le,[_(" 请上传 "),d.fileSize?(f(),p(V,{key:0},[_(" 大小不超过 "),I("b",ae,$(d.fileSize)+"MB",1)],64)):b("",!0),d.fileType?(f(),p(V,{key:1},[_(" 格式为 "),I("b",se,$(d.fileType.join("/")),1)],64)):b("",!0),_(" 的文件 ")])):b("",!0),g(D,{modelValue:r(m),"onUpdate:modelValue":s[0]||(s[0]=R=>Q(m)?m.value=R:null),title:"预览",width:"800px","append-to-body":""},{default:h(()=>[I("img",{src:r(S),style:{display:"block","max-width":"100%",margin:"0 auto"}},null,8,te)]),_:1},8,["modelValue"])])}}});const ce=J(oe,[["__scopeId","data-v-80fe2097"]]);export{ce as _};
|