2 lines
3.2 KiB
JavaScript
2 lines
3.2 KiB
JavaScript
import{d as b,m as E,f as U,o as _,g as x,w as p,c as w,h as i,a as n,ba as I,bb as k,ae as B,_ as M,r as g,U as P,i as R,V as $,a9 as F,a4 as A,a5 as C}from"./index-222cd32d.js";import{u as S,d as N}from"./index-3baf799f.js";const q=["src"],z=b({__name:"SingleUpload",props:{modelValue:{type:String,default:""}},emits:["update:modelValue"],setup(v,{emit:f}){const c=f,s=v,d=E({get(){return s.modelValue},set(o){c("update:modelValue",o)}});async function u(o){const{data:m}=await S(o.file);d.value=m.url}function a(o){return o.size>2*1048*1048?(B.warning("上传图片不能大于2M"),!1):!0}return(o,m)=>{const V=U("el-icon");return _(),x(n(k),{class:"single-uploader",modelValue:d.value,"onUpdate:modelValue":m[0]||(m[0]=y=>d.value=y),"show-file-list":!1,"list-type":"picture-card","before-upload":a,"http-request":u},{default:p(()=>[d.value?(_(),w("img",{key:0,src:d.value,class:"single"},null,8,q)):(_(),x(V,{key:1,class:"single-uploader-icon"},{default:p(()=>[i(n(I))]),_:1}))]),_:1},8,["modelValue"])}}});const D=M(z,[["__scopeId","data-v-69ed2cd7"]]),L=["src"],j=b({__name:"MultiUpload",props:{modelValue:{type:Array,default:[]},limit:{type:Number,default:5}},emits:["update:modelValue"],setup(v,{emit:f}){const c=f,s=v,d=g(""),u=g(!1),a=g([]);P(()=>s.modelValue,l=>{const e=a.value.map(t=>t.url);e.length>0&&e.length===l.length&&e.every(t=>l.some(r=>r===t))&&l.every(t=>e.some(r=>r===t))||(a.value=l.map(t=>({url:t})))},{immediate:!0});async function o(l){const{data:e}=await S(l.file),t=a.value.findIndex(r=>r.uid==l.file.uid);a.value.splice(t,1,{name:e.name,url:e.url}),c("update:modelValue",a.value.map(r=>r.url))}function m(l){const e=l.url;e&&N(e).then(()=>{c("update:modelValue",a.value.map(t=>t.url))})}function V(l){return l.size>2*1048*1048?(B.warning("上传图片不能大于2M"),!1):!0}const y=l=>{d.value=l.url||"",u.value=!0};return(l,e)=>{const t=U("el-icon"),r=U("el-dialog");return _(),w($,null,[i(n(k),{"file-list":a.value,"onUpdate:fileList":e[0]||(e[0]=h=>a.value=h),"list-type":"picture-card","before-upload":V,"http-request":o,"on-remove":m,"on-preview":y,limit:s.limit},{default:p(()=>[i(t,null,{default:p(()=>[i(n(I))]),_:1})]),_:1},8,["file-list","limit"]),i(r,{modelValue:u.value,"onUpdate:modelValue":e[1]||(e[1]=h=>u.value=h)},{default:p(()=>[R("img",{"w-full":"",src:d.value,alt:"Preview Image"},null,8,L)]),_:1},8,["modelValue"])],64)}}}),G={class:"app-container"},K=b({__name:"uploader",setup(v){const f=g(F),c=A({formData:{picUrl:"https://oss.youlai.tech/default/2022/11/20/18e206dae97b40329661537d1e433639.jpg",picUrls:["https://oss.youlai.tech/default/2022/11/20/8af5567816094545b53e76b38ae9c974.webp","https://oss.youlai.tech/default/2022/11/20/13dbfd7feaf848c2acec2b21675eb9d3.webp"]}}),{formData:s}=C(c);return(d,u)=>{const a=U("el-form-item");return _(),w("div",G,[i(n(F),{ref_key:"dataFormRef",ref:f,model:n(s)},{default:p(()=>[i(a,{label:"单图上传"},{default:p(()=>[i(D,{modelValue:n(s).picUrl,"onUpdate:modelValue":u[0]||(u[0]=o=>n(s).picUrl=o)},null,8,["modelValue"])]),_:1}),i(a,{label:"多图上传"},{default:p(()=>[i(j,{modelValue:n(s).picUrls,"onUpdate:modelValue":u[1]||(u[1]=o=>n(s).picUrls=o)},null,8,["modelValue"])]),_:1})]),_:1},8,["model"])])}}});export{K as default};
|