vue-pure-admin/static/js/index-DTzobHeH.js

import{a1 as z,k as d,e as i,g as t,d as F,a as $,p as B,aF as G,aG as Y,b as y,w as p,f as l,z as E,i as N,j as a,h as r,$ as K,t as S,u,v as Q,q as W,T as X,ah as Z,J as j,G as ee,H as te,A as se,_ as ne}from"./index-DMqaFtX4.js";import{S as oe}from"./sortable.esm-VSgMS8pS.js";import{_ as le}from"./form.vue_vue_type_script_setup_true_lang-CUwVgYLv.js";import"./mock-CuTtXR3C.js";const ae="/vue-pure-admin/static/jpg/1-CNu9tHLV.jpg",ie="/vue-pure-admin/static/jpg/2-Dn7NyzRJ.jpg",re="/vue-pure-admin/static/jpg/3-BNVYzMvF.jpg",pe={viewBox:"0 0 1024 1024",width:"30",height:"30"};function ue(b,s){return i(),d("svg",pe,s[0]||(s[0]=[t("path",{fill:"currentColor",d:"M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z"},null,-1)]))}const de=z({name:"ep-plus",render:ue}),ce={viewBox:"0 0 24 24",width:"1em",height:"1em"};function me(b,s){return i(),d("svg",ce,s[0]||(s[0]=[t("path",{fill:"currentColor",d:"M12 3c5.392 0 9.878 3.88 10.819 9c-.94 5.12-5.427 9-10.819 9s-9.878-3.88-10.818-9C2.122 6.88 6.608 3 12 3m0 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 19m0-2.5a4.5 4.5 0 1 1 0-9a4.5 4.5 0 0 1 0 9m0-2a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5"},null,-1)]))}const ve=z({name:"ri-eye-line",render:me}),ge={viewBox:"0 0 24 24",width:"1em",height:"1em"};function _e(b,s){return i(),d("svg",ge,s[0]||(s[0]=[t("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 1zm1 2H6v12h12zM9 4v2h6V4z"},null,-1)]))}const fe=z({name:"ri-delete-bin-7-line",render:_e}),xe={class:"card-header"},he={key:0,class:"mt-[35%]! m-auto"},ye=["onMouseenter"],be=["src"],we=["onClick"],ke=["onClick"],Ce={title:"移除",class:"hover:text-[var(--el-color-danger)]"},$e={key:0,effect:"dark",round:"",size:"large",type:"info",class:"img-name"},je={class:"text-[#fff] dark:text-black"},ze={class:"flex justify-between"},Ie={class:"flex flex-wrap"},Me={class:"text-[red] text-[12px] flex flex-auto items-center justify-end"},Ve=F({name:"PureUpload",__name:"index",setup(b){const s=$([]),L=Z(),c=$(0),f=$(!1),U=B(()=>G(s.value,"url")),A=B(()=>Y(s.value,"name","size")),D=n=>new URL(Object.assign({"./imgs/1.jpg":ae,"./imgs/2.jpg":ie,"./imgs/3.jpg":re})[`./imgs/${n}.jpg`],import.meta.url).href,I=Array.from({length:3}).map((n,e)=>D(e+1)),H=n=>{if(!["image/jpeg","image/png","image/gif"].includes(n.type))return j("只能上传图片"),!1;if(n.size/1024/1024>2)return j("单个图片大小不能超过2MB"),!1},O=()=>{j("最多上传3张图片，请先删除在上传")},J=n=>{s.value.splice(s.value.indexOf(n),1)},R=n=>{c.value=s.value.findIndex(e=>e.uid===n.uid),f.value=!0},M=()=>document.querySelectorAll("#pure-upload-item"),T=n=>{var x,v,h;const e="el-upload-list",m=s.value.findIndex(g=>g.uid===n);(h=(v=(x=M())==null?void 0:x[m])==null?void 0:v.classList)==null||h.add(`${e}__item-actions`);const w=document.querySelector(`.${e}`);oe.create(w,{handle:`.${e}__item`,onEnd:({newIndex:g,oldIndex:_})=>{const k=s.value[_];s.value.splice(_,1),s.value.splice(g,0,k),M().forEach(C=>{C.classList.remove(`${e}__item-actions`)})}})},P=()=>{[{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(n=>{ee.get(`https://xiaoxian521.github.io/hyperlink/${n.type}/${n.name}`,{responseType:"blob"}).then(({data:e})=>{te(e,n.name)})})};return(n,e)=>{const m=r("el-link"),w=r("el-button"),x=r("el-progress"),v=r("IconifyIconOffline"),h=r("el-upload"),g=r("el-image-viewer"),_=r("el-divider"),k=r("el-image"),C=r("el-card"),q=se("tippy");return i(),y(C,{shadow:"never"},{header:p(()=>[t("div",xe,[E((i(),y(m,{href:"https://element-plus.org/zh-CN/component/upload.html",target:"_blank",style:{"font-size":"16px","font-weight":"800"}},{default:p(()=>e[4]||(e[4]=[a(" 文件上传 ")])),_:1})),[[q,{content:"点击查看详细文档"}]])]),l(m,{class:"mt-2",href:"https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/upload",target:"_blank"},{default:p(()=>e[5]||(e[5]=[a(" 代码位置 src/views/components/upload ")])),_:1})]),default:p(()=>[l(w,{class:"mb-4!",text:"",bg:"",onClick:P},{default:p(()=>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)),E(t("p",{class:"mb-4!"},S(A.value),513),[[K,s.value.length>0]]),l(h,{"file-list":s.value,"onUpdate:fileList":e[0]||(e[0]=o=>s.value=o),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":O,"before-upload":H},{file:p(({file:o})=>[o.status=="ready"||o.status=="uploading"?(i(),d("div",he,[e[7]||(e[7]=t("p",{class:"font-medium"},"文件上传中",-1)),l(x,{class:"mt-2!","stroke-width":2,"text-inside":!0,"show-text":!1,percentage:o.percentage},null,8,["percentage"])])):(i(),d("div",{key:1,onMouseenter:W(V=>T(o.uid),["stop"])},[t("img",{class:"el-upload-list__item-thumbnail select-none",src:o.url},null,8,be),t("span",{id:"pure-upload-item",class:Q(["el-upload-list__item-actions",s.value.length>1&&"cursor-move!"])},[t("span",{title:"查看",class:"hover:text-primary",onClick:V=>R(o)},[l(v,{icon:u(ve),class:"hover:scale-125 duration-100"},null,8,["icon"])],8,we),t("span",{class:"el-upload-list__item-delete",onClick:V=>J(o)},[t("span",Ce,[l(v,{icon:u(fe),class:"hover:scale-125 duration-100"},null,8,["icon"])])],8,ke)],2)],40,ye))]),default:p(()=>[l(u(de),{class:"m-auto mt-4"})]),_:1},8,["file-list"]),f.value?(i(),y(g,{key:0,initialIndex:c.value,"url-list":U.value,"zoom-rate":1.2,"max-scale":7,"min-scale":.2,onClose:e[1]||(e[1]=o=>f.value=!1),onSwitch:e[2]||(e[2]=o=>c.value=o)},null,8,["initialIndex","url-list"])):N("",!0),(i(),y(X,{to:"body"},[s.value[c.value]&&f.value?(i(),d("div",$e,[t("p",je,S(s.value[c.value].name),1)])):N("",!0)])),e[16]||(e[16]=t("p",{class:"el-upload__tip"}," 可拖拽上传最多3张单个不超过2MB且格式为jpeg/png/gif的图片 ",-1)),l(_),e[17]||(e[17]=t("p",{class:"my-4!"},[a(" 结合表单校验进行"),t("span",{class:"text-[red]"},"手动上传"),t("span",{class:"text-[14px]"}," （可先打开浏览器控制台找到Network，然后填写表单内容后点击点提交观察请求变化） ")],-1)),t("div",ze,[l(le),t("div",null,[e[8]||(e[8]=t("p",{class:"text-center"},"上传接口相关截图",-1)),l(k,{class:"w-[200px] rounded-md",src:u(I)[0],"preview-src-list":u(I),fit:"cover"},null,8,["src","preview-src-list"])])]),l(_),t("div",Ie,[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]=o=>u(L).push({name:"SystemUser"}))}," 系统管理-用户管理 "),e[10]||(e[10]=a(" 表格操作栏中的上传头像功能 "))]),t("p",Me,[e[12]||(e[12]=a(" 免责声明：上传接口使用免费开源的 ")),l(m,{href:"https://designer.mocky.io/",target:"_blank",style:{"font-size":"16px","font-weight":"800"}},{default:p(()=>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})}}}),Le=ne(Ve,[["__scopeId","data-v-7fdf15b9"]]);export{Le as default};