import{d as T,a as k,p as M,b as h,w as r,e as i,ae as q,ao as P,ap as F,A as G,f as p,g as t,B as V,h as a,i as l,a0 as Y,t as N,k as C,u,v as K,q as Q,j as S,T as W,J as j,G as X,H as ee,_ as te}from"./index-DR0XdFJ5.js";import{S as se}from"./sortable.esm-Br3T5NCo.js";import{_ as oe}from"./form.vue_vue_type_script_setup_true_lang-Bijp3qeg.js";import{d as ne}from"./plus-C98eNXam.js";import"./mock-CgSSE0iA.js";const ae="/vue-pure-admin/static/jpg/1-CNu9tHLV.jpg",le="/vue-pure-admin/static/jpg/2-Dn7NyzRJ.jpg",ie="/vue-pure-admin/static/jpg/3-BNVYzMvF.jpg",re={width:24,height:24,body:'<path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9c-.94 5.12-5.427 9-10.819 9c-5.392 0-9.878-3.88-10.818-9C2.122 6.88 6.608 3 12 3Zm0 16a9.005 9.005 0 0 0 8.778-7a9.005 9.005 0 0 0-17.555 0A9.005 9.005 0 0 0 12 19Zm0-2.5a4.5 4.5 0 1 1 0-9a4.5 4.5 0 0 1 0 9Zm0-2a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5Z"/>'},pe={width:24,height:24,body:'<path fill="currentColor" d="M17 6h5v2h-2v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8H2V6h5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v3Zm1 2H6v12h12V8ZM9 4v2h6V4H9Z"/>'},de={class:"card-header"},ue={key:0,class:"mt-[35%] m-auto"},ce=["onMouseenter"],me=["src"],ve=["onClick"],ge=["onClick"],_e={title:"移除",class:"hover:text-[var(--el-color-danger)]"},fe={key:0,effect:"dark",round:"",size:"large",type:"info",class:"img-name"},xe={class:"text-[#fff] dark:text-black"},he={class:"flex justify-between"},ye={class:"flex flex-wrap"},be={class:"text-[red] text-[12px] flex flex-auto items-center justify-end"},we=T({name:"PureUpload",__name:"index",setup(ke){const o=k([]),B=q(),c=k(0),_=k(!1),L=M(()=>P(o.value,"url")),E=M(()=>F(o.value,"name","size")),U=s=>new URL(Object.assign({"./imgs/1.jpg":ae,"./imgs/2.jpg":le,"./imgs/3.jpg":ie})[`./imgs/${s}.jpg`],import.meta.url).href,I=Array.from({length:3}).map((s,e)=>U(e+1)),A=s=>{if(!["image/jpeg","image/png","image/gif"].includes(s.type))return j("只能上传图片"),!1;if(s.size/1024/1024>2)return j("单个图片大小不能超过2MB"),!1},Z=()=>{j("最多上传3张图片，请先删除在上传")},D=s=>{o.value.splice(o.value.indexOf(s),1)},H=s=>{c.value=o.value.findIndex(e=>e.uid===s.uid),_.value=!0},$=()=>document.querySelectorAll("#pure-upload-item"),O=s=>{var d,f,x;const e="el-upload-list",m=o.value.findIndex(v=>v.uid===s);(x=(f=(d=$())==null?void 0:d[m])==null?void 0:f.classList)==null||x.add(`${e}__item-actions`);const y=document.querySelector(`.${e}`);se.create(y,{handle:`.${e}__item`,onEnd:({newIndex:v,oldIndex:g})=>{const b=o.value[g];o.value.splice(g,1),o.value.splice(v,0,b),$().forEach(w=>{w.classList.remove(`${e}__item-actions`)})}})},J=()=>{[{name:"巴旦木.jpeg",type:"img"},{name:"恭喜发财.png",type:"img"},{name:"可爱动物.gif",type:"gif"},{name:"pure-upload.csv",type:"other"},{name:"pure-upload.txt",type:"other"}].forEach(s=>{X.get(`https://xiaoxian521.github.io/hyperlink/${s.type}/${s.name}`,{responseType:"blob"}).then(({data:e})=>{ee(e,s.name)})})};return(s,e)=>{const m=i("el-link"),y=i("el-button"),d=i("IconifyIconOffline"),f=i("el-progress"),x=i("el-upload"),v=i("el-image-viewer"),g=i("el-divider"),b=i("el-image"),w=i("el-card"),R=G("tippy");return p(),h(w,{shadow:"never"},{header:r(()=>[t("div",de,[V((p(),h(m,{href:"https://element-plus.org/zh-CN/component/upload.html",target:"_blank",style:{"font-size":"16px","font-weight":"800"}},{default:r(()=>e[4]||(e[4]=[a(" 文件上传 ")])),_:1})),[[R,{content:"点击查看详细文档"}]])]),l(m,{class:"mt-2",href:"https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/upload",target:"_blank"},{default:r(()=>e[5]||(e[5]=[a(" 代码位置 src/views/components/upload ")])),_:1})]),default:r(()=>[l(y,{class:"mb-4",text:"",bg:"",onClick:J},{default:r(()=>e[6]||(e[6]=[a(" 点击下载安全文件进行上传测试 ")])),_:1}),e[15]||(e[15]=t("p",{class:"mb-4"},[a(" 综合示例"),t("span",{class:"text-[14px]"},[a(" （ "),t("span",{class:"text-[red]"},"自动上传"),a(" 、拖拽上传、拖拽排序、设置请求头、上传进度、大图预览、多选文件、最大文件数量、文件类型限制、文件大小限制、删除文件） ")])],-1)),V(t("p",{class:"mb-4"},N(E.value),513),[[Y,o.value.length>0]]),l(x,{"file-list":o.value,"onUpdate:fileList":e[0]||(e[0]=n=>o.value=n),drag:"",multiple:"",class:"pure-upload","list-type":"picture-card",accept:"image/jpeg,image/png,image/gif",action:"https://run.mocky.io/v3/3aa761d7-b0b3-4a03-96b3-6168d4f7467b",limit:3,headers:{Authorization:"eyJhbGciOiJIUzUxMiJ9.admin"},"on-exceed":Z,"before-upload":A},{file:r(({file:n})=>[n.status=="ready"||n.status=="uploading"?(p(),C("div",ue,[e[7]||(e[7]=t("p",{class:"font-medium"},"文件上传中",-1)),l(f,{class:"mt-2","stroke-width":2,"text-inside":!0,"show-text":!1,percentage:n.percentage},null,8,["percentage"])])):(p(),C("div",{key:1,onMouseenter:Q(z=>O(n.uid),["stop"])},[t("img",{class:"el-upload-list__item-thumbnail select-none",src:n.url},null,8,me),t("span",{id:"pure-upload-item",class:K(["el-upload-list__item-actions",o.value.length>1&&"!cursor-move"])},[t("span",{title:"查看",class:"hover:text-primary",onClick:z=>H(n)},[l(d,{icon:u(re),class:"hover:scale-125 duration-100"},null,8,["icon"])],8,ve),t("span",{class:"el-upload-list__item-delete",onClick:z=>D(n)},[t("span",_e,[l(d,{icon:u(pe),class:"hover:scale-125 duration-100"},null,8,["icon"])])],8,ge)],2)],40,ce))]),default:r(()=>[l(d,{icon:u(ne),class:"m-auto mt-4",width:"30"},null,8,["icon"])]),_:1},8,["file-list"]),_.value?(p(),h(v,{key:0,initialIndex:c.value,"url-list":L.value,"zoom-rate":1.2,"max-scale":7,"min-scale":.2,onClose:e[1]||(e[1]=n=>_.value=!1),onSwitch:e[2]||(e[2]=n=>c.value=n)},null,8,["initialIndex","url-list"])):S("",!0),(p(),h(W,{to:"body"},[o.value[c.value]&&_.value?(p(),C("div",fe,[t("p",xe,N(o.value[c.value].name),1)])):S("",!0)])),e[16]||(e[16]=t("p",{class:"el-upload__tip"}," 可拖拽上传最多3张单个不超过2MB且格式为jpeg/png/gif的图片 ",-1)),l(g),e[17]||(e[17]=t("p",{class:"mb-4 mt-4"},[a(" 结合表单校验进行"),t("span",{class:"text-[red]"},"手动上传"),t("span",{class:"text-[14px]"}," （可先打开浏览器控制台找到Network，然后填写表单内容后点击点提交观察请求变化） ")],-1)),t("div",he,[l(oe),t("div",null,[e[8]||(e[8]=t("p",{class:"text-center"},"上传接口相关截图",-1)),l(b,{class:"w-[200px] rounded-md",src:u(I)[0],"preview-src-list":u(I),fit:"cover"},null,8,["src","preview-src-list"])])]),l(g),t("div",ye,[t("p",null,[e[9]||(e[9]=a(" 裁剪、上传头像请参考 ")),t("span",{class:"font-bold text-[18x] cursor-pointer hover:text-[red]",onClick:e[3]||(e[3]=n=>u(B).push({name:"SystemUser"}))}," 系统管理-用户管理 "),e[10]||(e[10]=a(" 表格操作栏中的上传头像功能 "))]),t("p",be,[e[12]||(e[12]=a(" 免责声明：上传接口使用免费开源的 ")),l(m,{href:"https://designer.mocky.io/",target:"_blank",style:{"font-size":"16px","font-weight":"800"}},{default:r(()=>e[11]||(e[11]=[a("  Mocky  ")])),_:1}),e[13]||(e[13]=t("span",{class:"font-bold text-[18x]"}," 请不要上传重要信息 ",-1)),e[14]||(e[14]=a("，如果造成任何损失，我们概不负责 "))])])]),_:1})}}}),Me=te(we,[["__scopeId","data-v-04dda22c"]]);export{Me as default};