demo63.js 4.9 KB

1
  1. var D=(u,i,m)=>new Promise((g,F)=>{var h=n=>{try{r(m.next(n))}catch(d){F(d)}},s=n=>{try{r(m.throw(n))}catch(d){F(d)}},r=n=>n.done?g(n.value):Promise.resolve(n.value).then(h,s);r((m=m.apply(u,i)).next())});import{c as v}from"./mobile.js";import{_ as w}from"./index.js";import{m as b,r as A,e as B,j as e,k as p,g as o,o as y,l as f}from"./vendor.js";const{createDemo:z}=v("uploader"),P=z({setup(){const u="https://my-json-server.typicode.com/linrufeng/demo/posts",i=b(0),m={custom:"test"},g=b([{name:"\u6587\u4EF61.png",url:"https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif",status:"success",message:"\u4E0A\u4F20\u6210\u529F",type:"image"},{name:"\u6587\u4EF62.png",url:"https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif",status:"error",message:"\u4E0A\u4F20\u5931\u8D25",type:"image"},{name:"\u6587\u4EF63.png",url:"https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif",status:"uploading",message:"\u4E0A\u4F20\u4E2D...",type:"image"}]),F=t=>new Promise(a=>{const l=new FileReader;l.onloadend=E=>a(E.target.result),l.readAsDataURL(t)}),h=t=>new Promise(a=>{const l=new Image;l.onload=()=>a(l),l.src=t}),s=(t,a,l)=>new Promise(E=>t.toBlob(c=>E(c),a,l)),r=t=>{console.log("oversize \u89E6\u53D1 \u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7 50kb",t)},n=(t,a)=>{console.log("delete \u4E8B\u4EF6\u89E6\u53D1",t,a)},d=({event:t,options:a,percentage:l})=>{i.value=l,console.log("progress \u4E8B\u4EF6\u89E6\u53D1",l)},C=t=>D(this,null,function*(){const a=document.createElement("canvas"),l=a.getContext("2d"),E=yield F(t[0]),c=yield h(E);a.width=c.width,a.height=c.height,l.clearRect(0,0,c.width,c.height),l.drawImage(c,0,0,c.width,c.height);let U=yield s(a,"image/jpeg",.5);return[yield new File([U],t[0].name)]}),_=b(null);return{onOversize:r,beforeUpload:C,onDelete:n,onProgress:d,progressPercentage:i,uploadUrl:u,defaultFileList:g,formData:m,uploadRef:_,submitUpload:()=>{_.value.submit()}}}}),j={class:"demo bg-w"},k=o("h2",null,"\u57FA\u7840\u7528\u6CD5",-1),L=o("h2",null,"\u4E0A\u4F20\u72B6\u6001",-1),O=o("h2",null,"\u57FA\u7840\u7528\u6CD5-\u4E0A\u4F20\u5217\u8868\u5C55\u793A",-1),R=f("\u4E0A\u4F20\u6587\u4EF6"),$=o("h2",null,"\u81EA\u5B9A\u4E49\u4E0A\u4F20\u6837\u5F0F",-1),I=f("\u4E0A\u4F20\u6587\u4EF6"),N=o("h2",null,"\u81EA\u5B9A\u4E49\u4E0A\u4F20\u4F7F\u7528\u9ED8\u8BA4\u8FDB\u5EA6\u6761",-1),T=f("\u4E0A\u4F20\u6587\u4EF6"),V=o("br",null,null,-1),q=o("h2",null,"\u76F4\u63A5\u8C03\u8D77\u6444\u50CF\u5934\uFF08\u79FB\u52A8\u7AEF\u751F\u6548\uFF09",-1),G=o("h2",null,"\u9650\u5236\u4E0A\u4F20\u6570\u91CF5\u4E2A",-1),H=o("h2",null,"\u9650\u5236\u4E0A\u4F20\u5927\u5C0F\uFF08\u6BCF\u4E2A\u6587\u4EF6\u6700\u5927\u4E0D\u8D85\u8FC7 50kb\uFF09",-1),J=o("h2",null,"\u9650\u5236\u4E0A\u4F20\u5927\u5C0F\uFF08\u5728beforeupload\u94A9\u5B50\u4E2D\u5904\u7406\uFF09",-1),K=o("h2",null,"\u81EA\u5B9A\u4E49\u6570\u636E FormData \u3001 headers ",-1),M=o("h2",null,"\u9009\u4E2D\u6587\u4EF6\u540E\uFF0C\u901A\u8FC7\u6309\u94AE\u624B\u52A8\u6267\u884C\u4E0A\u4F20 ",-1),Q=o("br",null,null,-1),S=f("\u6267\u884C\u4E0A\u4F20"),W=o("h2",null,"\u7981\u7528\u72B6\u6001",-1);function X(u,i,m,g,F,h){const s=A("nut-uploader"),r=A("nut-button"),n=A("nut-progress");return y(),B("div",j,[k,e(s,{url:u.uploadUrl},null,8,["url"]),L,e(s,{url:u.uploadUrl,"file-list":u.defaultFileList,"onUpdate:file-list":i[0]||(i[0]=d=>u.defaultFileList=d),maximum:"3",multiple:""},null,8,["url","file-list"]),O,e(s,{url:u.uploadUrl,"file-list":u.defaultFileList,"onUpdate:file-list":i[1]||(i[1]=d=>u.defaultFileList=d),maximum:"10",multiple:"","list-type":"list"},{default:p(()=>[e(r,{type:"success",size:"small"},{default:p(()=>[R]),_:1})]),_:1},8,["url","file-list"]),$,e(s,{url:u.uploadUrl},{default:p(()=>[e(r,{type:"success",size:"small"},{default:p(()=>[I]),_:1})]),_:1},8,["url"]),N,e(s,{url:u.uploadUrl,onProgress:u.onProgress},{default:p(()=>[e(r,{type:"success",size:"small"},{default:p(()=>[T]),_:1})]),_:1},8,["url","onProgress"]),V,e(n,{percentage:u.progressPercentage,"stroke-color":"linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)",status:u.progressPercentage==100?"":"active"},null,8,["percentage","status"]),q,e(s,{url:u.uploadUrl,capture:""},null,8,["url"]),G,e(s,{url:u.uploadUrl,multiple:"",maximum:"5"},null,8,["url"]),H,e(s,{url:u.uploadUrl,multiple:"",maximize:1024*50,onOversize:u.onOversize},null,8,["url","onOversize"]),J,e(s,{url:u.uploadUrl,multiple:"","before-upload":u.beforeUpload,maximize:1024*50,onOversize:u.onOversize},null,8,["url","before-upload","onOversize"]),K,e(s,{url:u.uploadUrl,data:u.formData,headers:u.formData,"with-credentials":!0},null,8,["url","data","headers"]),M,e(s,{url:u.uploadUrl,maximum:"5","auto-upload":!1,ref:"uploadRef"},null,8,["url"]),Q,e(r,{type:"success",size:"small",onClick:u.submitUpload},{default:p(()=>[S]),_:1},8,["onClick"]),W,e(s,{disabled:""})])}var lu=w(P,[["render",X]]);export{lu as default};