fast-vue3-ui/lib/src/uploadImage/uploadImage.js

<h1 align="center"> fast-ui </h1>

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("./style/index.css");const b=require("vuedraggable"),o=require("element-plus"),v=require("@element-plus/icons-vue"),F=require("./types.js"),M=i=>i&&typeof i=="object"&&"default"in i?i:{default:i},N=M(b),H={class:"uploadImage-container"},W=["onClick"],k=e.createElementVNode("div",{class:"disabledShadow"},null,-1),z={class:"uploading"},R={key:0,class:"limitTxt"},U=e.defineComponent({name:"fast-upload-image"}),q=e.defineComponent({...U,props:F.uploadProps,emits:F.uploadEmits,setup(i,{emit:d}){const u=i;e.onMounted(()=>{console.log("\u540C\u6B65\u6570\u636E\u7684\u56DE\u663E",u.modelValue,u.modelValue.length),u.modelValue.length>0&&(m(),l.value=u.modelValue)});const r=e.ref(!1),f=e.ref(!0),p=e.ref(null),l=e.ref([]),E=e.computed(()=>u.limit===1);e.watch(()=>u.modelValue,(t,s)=>{!f.value||u.modelValue.length>0&&(m(),l.value=t)},{immediate:!0,deep:!0}),e.watchEffect(()=>{m(),l.value=u.modelValue});function m(t){const s=t||l.value;p.value&&(p.value.uploadFiles=s.map((a,c)=>({name:"pic"+c,percentage:100,status:"success",uid:123}))),f.value=!1}function D(t){return f.value=!1,u.maxSize?y(t):u.screenWidth||u.screenHeight||u.maxScreenWidth||u.maxScreenHeight?x(t):(r.value=!0,!0)}function w(t,s){var a;t.data?(!u.limit||u.limit>l.value.length)&&(l.value.push(t.data.url),d("update:modelValue",l),d("success",l),(a=p.value)==null||a.clearFiles()):(m(),o.ElMessage({type:"error",message:t.msg})),r.value=!1}function S(t,s){o.ElMessage({type:"error",message:s.name+" \u4E0A\u4F20\u5931\u8D25"}),r.value=!1,console.log(t)}function A(t){o.ElMessageBox.confirm("\u786E\u5B9A\u5220\u9664\u8BE5\u56FE\u7247?","\u63D0\u793A",{confirmButtonText:"\u786E\u5B9A",cancelButtonText:"\u53D6\u6D88",type:"warning"}).then(()=>{l.value.splice(t,1),m(),d("update:modelValue",l),d("success",l)}).catch(()=>{})}function C(){p.value.abort(),m(),o.ElMessage({type:"warning",message:`\u56FE\u7247\u8D85\u9650\uFF0C\u6700\u591A\u53EF\u4E0A\u4F20${u.limit}\u5F20\u56FE\u7247`})}function V(t){t.target.classList.add("hideShadow")}function _(t){t.target.classList.remove("hideShadow"),d("update:modelValue",l),d("success",l)}function y(t){console.log("\u6821\u9A8C\u56FE\u7247\u5360\u7528\u5927\u5C0F",t);const s=+u.maxSize;return t.size/1024>s?(o.ElMessage({type:"error",message:"\u4E0A\u4F20\u56FE\u7247\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7"+s*1024}),!1):(r.value=!0,!0)}function x(t){return new Promise((s,a)=>{const c=new FileReader;c.onload=h=>{const g=h.target.result,n=new Image;n.onload=()=>{u.screenWidth&&+n.width!=+u.screenWidth?(a(),o.ElMessage({type:"error",message:"\u4E0A\u4F20\u56FE\u7247\u5BBD\u5EA6\u9650\u5236\u53EA\u80FD\u4E3A"+u.screenWidth+"\u50CF\u7D20"})):u.screenHeight&&+n.height!=+u.screenHeight?(a(),o.ElMessage({type:"error",message:"\u4E0A\u4F20\u56FE\u7247\u9AD8\u5EA6\u9650\u5236\u53EA\u80FD\u4E3A"+u.screenHeight+"\u50CF\u7D20"})):u.maxScreenWidth&&+n.width>+u.maxScreenWidth?(a(),o.ElMessage({type:"error",message:"\u4E0A\u4F20\u56FE\u7247\u5BBD\u5EA6\u4E0D\u80FD\u8D85\u8FC7"+u.maxScreenWidth+"\u50CF\u7D20"})):u.maxScreenHeight&&+n.height>+u.maxScreenHeight?(a(),o.ElMessage({type:"error",message:"\u4E0A\u4F20\u56FE\u7247\u9AD8\u5EA6\u4E0D\u80FD\u8D85\u8FC7"+u.maxScreenHeight+"\u50CF\u7D20"})):(r.value=!0,s(!0))},n.src=g},c.readAsDataURL(t)})}const B=t=>{console.log("el-upload\u4E0A\u663E\u793A\u7684\u56FE\u7247\u79FB\u9664\u7684file.uid==>"+t)};return(t,s)=>{const a=e.resolveComponent("el-image"),c=e.resolveComponent("el-icon"),h=e.resolveComponent("el-upload");return e.openBlock(),e.createElementBlock("div",H,[e.createVNode(e.unref(N.default),{class:e.normalizeClass(["vue-draggable",{disabled:u.disabled}]),modelValue:l.value,"onUpdate:modelValue":s[0]||(s[0]=g=>l.value=g),onStart:V,onEnd:_,itemKey:"itemKey"},e.createSlots({item:e.withCtx(({element:g,index:n})=>[e.createElementVNode("div",{class:"draggable-item",style:e.normalizeStyle({width:t.showWidth+"px",height:t.showHeight+"px"})},[e.createVNode(a,{src:g,"preview-src-list":[g]},null,8,["src","preview-src-list"]),e.createElementVNode("div",{class:"shadow",onClick:L=>A(n)},[e.createVNode(c,null,{default:e.withCtx(()=>[e.createVNode(e.unref(v.Delete))]),_:1})],8,W)],4)]),footer:e.withCtx(()=>[e.withDirectives(e.createVNode(h,e.mergeProps({ref_key:"uploadRef",ref:p,class:"upload-image"},t.$attrs,{style:{width:t.showWidth+"px",height:t.showHeight+"px"},accept:".jpg,.jpeg,.png,.gif","show-file-list":!1,multiple:!e.unref(E),limit:u.limit||999,"before-upload":D,"on-success":w,"on-exceed":C,"on-error":S,"on-remove":B}),{default:e.withCtx(()=>[e.createVNode(c,{class:"uploadIcon"},{default:e.withCtx(()=>[e.createVNode(e.unref(v.Plus)),e.withDirectives(e.createElementVNode("span",z,"\u6B63\u5728\u4E0A\u4F20...",512),[[e.vShow,r.value]]),t.isShowLimit&&!r.value&&t.limit&&!e.unref(E)?(e.openBlock(),e.createElementBlock("span",R," \u6700\u591A"+e.toDisplayString(t.limit)+"\u5F20 ",1)):e.createCommentVNode("",!0)]),_:1})]),_:1},16,["style","multiple","limit"]),[[e.vShow,!u.limit||l.value.length<u.limit]])]),_:2},[u.disabled?{name:"header",fn:e.withCtx(()=>[k]),key:"0"}:void 0]),1032,["class","modelValue"])])}}});exports.default=q;