2 lines
5.8 KiB
JavaScript
2 lines
5.8 KiB
JavaScript
import{d as H,G as A,k as B,I as q,$ as V,r as G,e as Q,y as f,z as b,A as m,R as j,a0 as F,a7 as J,C,ao as X,bR as I,D as M,E as O,a8 as K}from"./Cbt2tPBc.js";import{_ as Y}from"./DlAUqK2U.js";const Z={class:"su"},tt=["src"],et={key:2,class:"su-progress"},st={key:0,class:"su-actions"},at=H({__name:"IndexImageUploader",props:{fileList:{default:()=>[]},maxWidth:{default:1200},maxHeight:{default:1200},maxBytes:{default:200*1024},minQuality:{default:.5}},emits:["update:fileList","ok","delete"],setup($,{emit:N}){const p=$,d=N,w=A(),S=B(()=>w.STORAGE_UPLOAD),U=B(()=>(w.STORAGE_URL||"").replace(/\/+$/,"")),x=(s,e)=>{const a=String(e||"").replace(/^\/+/,"");return s?`${s}/${a}`:a},t=q({uid:"",name:"",size:0,type:"",status:"",percent:0,url:"",subUrl:"",response:null,xhr:null});V(()=>p.fileList,s=>{const e=s&&s[0]||null;if(!e){k();return}const a=e.subUrl||e.path||"",r=e.src||e.thumbUrl||(a?x(U.value,a):"");t.url=r,t.subUrl=a,t.status=e.status||"done",t.name=e.name||""},{immediate:!0});const g=G(null);function y(){g.value&&(g.value.value="",g.value.click())}function k(){t.url?.startsWith("blob:")&&URL.revokeObjectURL(t.url),Object.assign(t,{uid:"",name:"",size:0,type:"",status:"",percent:0,url:"",subUrl:"",response:null,xhr:null})}function z(){if(t.xhr&&t.status==="uploading")try{t.xhr.abort()}catch{}const s=t.uid;k(),d("update:fileList",[]),s&&d("delete",s)}async function E(s,e,a){const r=document.createElement("canvas"),c=r.getContext("2d",{alpha:!0});let o=!1,n=0,i=0;if(typeof createImageBitmap=="function")try{const l=await createImageBitmap(s);n=l.width,i=l.height;const u=Math.min(1,e/n,a/i);r.width=Math.round(n*u),r.height=Math.round(i*u),c.drawImage(l,0,0,r.width,r.height),l.close?.(),o=!0}catch{}if(!o){const l=new Image;l.src=URL.createObjectURL(s),await l.decode(),n=l.naturalWidth,i=l.naturalHeight;const u=Math.min(1,e/n,a/i);r.width=Math.round(n*u),r.height=Math.round(i*u),c.drawImage(l,0,0,r.width,r.height),URL.revokeObjectURL(l.src)}return r}async function v(s,e,a,r=.82,c=.5){const o=u=>new Promise(h=>s.toBlob(h,e,u));let n=r,i=await o(n);if(!i)throw new Error("encode failed");let l=0;for(;i.size>a&&n>c&&l<12;)n-=.05,i=await o(n)??i,l++;return{blob:i,quality:n}}function T(s){const e=s.target.files?.[0];if(!e)return;if(e.size/1024/1024>10){alert("حداکثر اندازه 10MB است"),s.target.value="";return}if(!e.type.startsWith("image/")){alert("فقط فایل تصویری مجاز است"),s.target.value="";return}const a=`${Date.now()}-${Math.random().toString(36).slice(2)}`,r=URL.createObjectURL(e);t.url?.startsWith("blob:")&&URL.revokeObjectURL(t.url),Object.assign(t,{uid:a,name:e.name,size:e.size,type:e.type,status:"uploading",percent:10,url:r,subUrl:"",response:null}),d("update:fileList",[{uid:a,name:e.name,status:"uploading",src:r,thumbUrl:r,subUrl:""}]),W(e,a).catch(()=>{})}async function W(s,e){try{const a=await E(s,p.maxWidth,p.maxHeight);t.percent=20;const r=(s.name||"image").replace(/\.[^.]+$/,"");let{blob:c}=await v(a,"image/webp",p.maxBytes,.82,p.minQuality),o=`${Date.now()}-${r}.webp`;const n=await L(c,o,e,25);if(n.ok)return _(n.text,e);if(P(n.status,n.text)){t.percent=45;const i=await v(a,"image/jpeg",p.maxBytes,.82,p.minQuality),l=`${Date.now()}-${r}.jpg`,u=await L(i.blob,l,e,50);return u.ok?_(u.text,e):R(u.status,u.text)}return R(n.status,n.text)}catch(a){return D(a)}}function P(s,e){const a=(e||"").toLowerCase();return s===415||/invalid file type|unsupported/i.test(a)}async function L(s,e,a,r){const c=new FormData;c.append("file",s,e);const o=new XMLHttpRequest;t.xhr=o,o.open("POST",S.value,!0);const n=K?.();n&&o.setRequestHeader("Authorization",`Bearer ${n}`);const i=r;return o.upload.onprogress=u=>{if(!u.lengthComputable)return;const h=i+Math.round(u.loaded/u.total*(90-i));t.uid===a&&(t.percent=Math.min(90,h),t.status="uploading",d("update:fileList",[{uid:t.uid,name:e,status:t.status,src:t.url,thumbUrl:t.url,subUrl:t.subUrl}]))},await new Promise(u=>{o.onreadystatechange=()=>{if(o.readyState!==4)return;const h=o.status>=200&&o.status<300;u({ok:h,status:o.status,text:o.responseText||""})},o.onerror=()=>u({ok:!1,status:0,text:"Network error"}),o.send(c)})}function _(s,e){let a=s;try{a=JSON.parse(s)}catch{}const r=a?.path||"",c=r?x(U.value,r):t.url;t.status="done",t.percent=100,t.response=a,t.subUrl=r,t.url=c,t.xhr=null,d("update:fileList",[{uid:t.uid,name:t.name,status:"done",src:c,thumbUrl:c,subUrl:r,response:a}]),r&&d("ok",r)}function R(s,e){t.status="error",t.xhr=null,d("update:fileList",[{uid:t.uid,name:t.name,status:"error",src:t.url,thumbUrl:t.url,subUrl:t.subUrl}]),alert(e||`HTTP ${s}`)}function D(s){t.status="error",t.xhr=null,d("update:fileList",[{uid:t.uid,name:t.name,status:"error",src:t.url,thumbUrl:t.url,subUrl:t.subUrl}]),alert(s?.message||"Network error")}return Q(()=>{try{t.xhr?.abort()}catch{}t.url?.startsWith("blob:")&&URL.revokeObjectURL(t.url)}),(s,e)=>{const a=X;return b(),f("div",Z,[m("div",{class:"su-card",onClick:y},[t.url?(b(),f("img",{key:0,src:t.url,alt:"preview",class:"su-img"},null,8,tt)):(b(),f(F,{key:1},[e[0]||(e[0]=m("svg",{xmlns:"http://www.w3.org/2000/svg",class:"su-plus",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor"},[m("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M12 5v14m7-7H5"})],-1)),e[1]||(e[1]=m("div",{class:"su-text"},"Upload",-1))],64)),t.status==="uploading"?(b(),f("div",et,[m("div",{class:"su-bar",style:J({width:t.percent+"%"})},null,4)])):j("",!0)]),t.url?(b(),f("div",st,[C(a,{class:"su-btn",onClick:I(z,["stop"])},{default:M(()=>[...e[2]||(e[2]=[O("حذف",-1)])]),_:1}),C(a,{class:"su-btn",onClick:I(y,["stop"])},{default:M(()=>[...e[3]||(e[3]=[O("تغییر",-1)])]),_:1})])):j("",!0),m("input",{ref_key:"inp",ref:g,type:"file",accept:"image/*",class:"su-input",onChange:T},null,544)])}}}),ot=Object.assign(Y(at,[["__scopeId","data-v-da675b43"]]),{__name:"ProductUploaderIndexImageUploader"});export{ot as I};
|