Эхлэл Бүгдийг харах Тусламж
Бүртгүүлэх Нэвтрэх
wicresoft
/
doc_project
2
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Мод: bf1fb50bbd
Салаанууд Тагууд
doc_project
/
2x.antv.design
/
assets
/
index.e1e3c0bc.js

index.e1e3c0bc.js 400 KB
Түүх Анхны өгөгдөл

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137 
  1. import{d as y,r as m,_ as A,a_ as Z,j as e,k as C,l as b,w as o,f as l,e as s,b as n,aB as X,P as h,a as w,q as x,bl as H,t as R,n as v}from"./index.c1b9962e.js";import{U as f}from"./UploadOutlined.e07f4184.js";import{I as U}from"./InboxOutlined.6c9ba79a.js";const J=y({components:{UploadOutlined:f},setup(){const t=p=>{p.file.status!=="uploading"&&console.log(p.file,p.fileList),p.file.status==="done"?Z.success(`${p.file.name} file uploaded successfully`):p.file.status==="error"&&Z.error(`${p.file.name} file upload failed.`)};return{fileList:m([]),headers:{authorization:"authorization-text"},handleChange:t}}});function K(t,a,p,u,r,i){const c=e("upload-outlined"),k=e("a-button"),g=e("a-upload"),d=e("demo-box");return C(),b(d,{jsfiddle:{us:"Classic mode. File selection dialog pops up when upload button is clicked.",cn:"\u7ECF\u5178\u6B3E\u5F0F\uFF0C\u7528\u6237\u70B9\u51FB\u6309\u94AE\u5F39\u51FA\u6587\u4EF6\u9009\u62E9\u6846\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
    2. 

  2. <p>\u7ECF\u5178\u6B3E\u5F0F\uFF0C\u7528\u6237\u70B9\u51FB\u6309\u94AE\u5F39\u51FA\u6587\u4EF6\u9009\u62E9\u6846\u3002</p>
    3. 

  3. <h2 id="en-us">en-US</h2>
    4. 

  4. <p>Classic mode. File selection dialog pops up when upload button is clicked.</p>
    5. 

  5. `,order:0,title:{"zh-CN":"\u70B9\u51FB\u4E0A\u4F20","en-US":"Upload by clicking"},relativePath:"src/docs/upload/demo/basic.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXVwbG9hZAogICAgdi1tb2RlbDpmaWxlLWxpc3Q9ImZpbGVMaXN0IgogICAgbmFtZT0iZmlsZSIKICAgIDptdWx0aXBsZT0idHJ1ZSIKICAgIGFjdGlvbj0iaHR0cHM6Ly93d3cubW9ja3kuaW8vdjIvNWNjODAxOWQzMDAwMDA5ODBhMDU1ZTc2IgogICAgOmhlYWRlcnM9ImhlYWRlcnMiCiAgICBAY2hhbmdlPSJoYW5kbGVDaGFuZ2UiCiAgPgogICAgPGEtYnV0dG9uPgogICAgICA8dXBsb2FkLW91dGxpbmVkPjwvdXBsb2FkLW91dGxpbmVkPgogICAgICBDbGljayB0byBVcGxvYWQKICAgIDwvYS1idXR0b24+CiAgPC9hLXVwbG9hZD4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IG1lc3NhZ2UgfSBmcm9tICdhbnQtZGVzaWduLXZ1ZSc7CmltcG9ydCB7IFVwbG9hZE91dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYgfSBmcm9tICd2dWUnOwoKaW50ZXJmYWNlIEZpbGVJdGVtIHsKICB1aWQ6IHN0cmluZzsKICBuYW1lPzogc3RyaW5nOwogIHN0YXR1cz86IHN0cmluZzsKICByZXNwb25zZT86IHN0cmluZzsKICB1cmw/OiBzdHJpbmc7Cn0KCmludGVyZmFjZSBGaWxlSW5mbyB7CiAgZmlsZTogRmlsZUl0ZW07CiAgZmlsZUxpc3Q6IEZpbGVJdGVtW107Cn0KCmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgVXBsb2FkT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IGhhbmRsZUNoYW5nZSA9IChpbmZvOiBGaWxlSW5mbykgPT4gewogICAgICBpZiAoaW5mby5maWxlLnN0YXR1cyAhPT0gJ3VwbG9hZGluZycpIHsKICAgICAgICBjb25zb2xlLmxvZyhpbmZvLmZpbGUsIGluZm8uZmlsZUxpc3QpOwogICAgICB9CiAgICAgIGlmIChpbmZvLmZpbGUuc3RhdHVzID09PSAnZG9uZScpIHsKICAgICAgICBtZXNzYWdlLnN1Y2Nlc3MoYCR7aW5mby5maWxlLm5hbWV9IGZpbGUgdXBsb2FkZWQgc3VjY2Vzc2Z1bGx5YCk7CiAgICAgIH0gZWxzZSBpZiAoaW5mby5maWxlLnN0YXR1cyA9PT0gJ2Vycm9yJykgewogICAgICAgIG1lc3NhZ2UuZXJyb3IoYCR7aW5mby5maWxlLm5hbWV9IGZpbGUgdXBsb2FkIGZhaWxlZC5gKTsKICAgICAgfQogICAgfTsKCiAgICBjb25zdCBmaWxlTGlzdCA9IHJlZihbXSk7CiAgICByZXR1cm4gewogICAgICBmaWxlTGlzdCwKICAgICAgaGVhZGVyczogewogICAgICAgIGF1dGhvcml6YXRpb246ICdhdXRob3JpemF0aW9uLXRleHQnLAogICAgICB9LAogICAgICBoYW5kbGVDaGFuZ2UsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXVwbG9hZAogICAgdi1tb2RlbDpmaWxlLWxpc3Q9ImZpbGVMaXN0IgogICAgbmFtZT0iZmlsZSIKICAgIDptdWx0aXBsZT0idHJ1ZSIKICAgIGFjdGlvbj0iaHR0cHM6Ly93d3cubW9ja3kuaW8vdjIvNWNjODAxOWQzMDAwMDA5ODBhMDU1ZTc2IgogICAgOmhlYWRlcnM9ImhlYWRlcnMiCiAgICBAY2hhbmdlPSJoYW5kbGVDaGFuZ2UiCiAgPgogICAgPGEtYnV0dG9uPgogICAgICA8dXBsb2FkLW91dGxpbmVkPjwvdXBsb2FkLW91dGxpbmVkPgogICAgICBDbGljayB0byBVcGxvYWQKICAgIDwvYS1idXR0b24+CiAgPC9hLXVwbG9hZD4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgbWVzc2FnZSB9IGZyb20gJ2FudC1kZXNpZ24tdnVlJzsKaW1wb3J0IHsgVXBsb2FkT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgVXBsb2FkT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IGhhbmRsZUNoYW5nZSA9IGluZm8gPT4gewogICAgICBpZiAoaW5mby5maWxlLnN0YXR1cyAhPT0gJ3VwbG9hZGluZycpIHsKICAgICAgICBjb25zb2xlLmxvZyhpbmZvLmZpbGUsIGluZm8uZmlsZUxpc3QpOwogICAgICB9CiAgICAgIGlmIChpbmZvLmZpbGUuc3RhdHVzID09PSAnZG9uZScpIHsKICAgICAgICBtZXNzYWdlLnN1Y2Nlc3MoYCR7aW5mby5maWxlLm5hbWV9IGZpbGUgdXBsb2FkZWQgc3VjY2Vzc2Z1bGx5YCk7CiAgICAgIH0gZWxzZSBpZiAoaW5mby5maWxlLnN0YXR1cyA9PT0gJ2Vycm9yJykgewogICAgICAgIG1lc3NhZ2UuZXJyb3IoYCR7aW5mby5maWxlLm5hbWV9IGZpbGUgdXBsb2FkIGZhaWxlZC5gKTsKICAgICAgfQogICAgfTsKICAgIGNvbnN0IGZpbGVMaXN0ID0gcmVmKFtdKTsKICAgIHJldHVybiB7CiAgICAgIGZpbGVMaXN0LAogICAgICBoZWFkZXJzOiB7CiAgICAgICAgYXV0aG9yaXphdGlvbjogJ2F1dGhvcml6YXRpb24tdGV4dCcsCiAgICAgIH0sCiAgICAgIGhhbmRsZUNoYW5nZSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:o(()=>[l(g,{"file-list":t.fileList,"onUpdate:fileList":a[0]||(a[0]=I=>t.fileList=I),name:"file",multiple:!0,action:"https://www.mocky.io/v2/5cc8019d300000980a055e76",headers:t.headers,onChange:t.handleChange},{default:o(()=>[l(k,null,{default:o(()=>[l(c),a[1]||(a[1]=s(" Click to Upload "))]),_:1,__:[1]})]),_:1},8,["file-list","headers","onChange"])]),htmlCode:o(()=>a[2]||(a[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    6. 

  6.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(`
    7. 

  7.     `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),s("file-list")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList"),n("span",{class:"token punctuation"},'"')]),s(`
    8. 

  8.     `),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("file"),n("span",{class:"token punctuation"},'"')]),s(`
    9. 

  9.     `),n("span",{class:"token attr-name"},":multiple"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("true"),n("span",{class:"token punctuation"},'"')]),s(`
    10. 

  10.     `),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("https://www.mocky.io/v2/5cc8019d300000980a055e76"),n("span",{class:"token punctuation"},'"')]),s(`
    11. 

  11.     `),n("span",{class:"token attr-name"},":headers"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("headers"),n("span",{class:"token punctuation"},'"')]),s(`
    12. 

  12.     `),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("handleChange"),n("span",{class:"token punctuation"},'"')]),s(`
    13. 

  13.   `),n("span",{class:"token punctuation"},">")]),s(`
    14. 

  14.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    15. 

  15.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    16. 

  16.       Click to Upload
    17. 

  17.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    18. 

  18.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    19. 

  19. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    20. 

  20. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),s(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    21. 

  21. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" message "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),s(`
    22. 

  22. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" UploadOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    23. 

  23. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent"),n("span",{class:"token punctuation"},","),s(" ref "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    24. 

  24. 

  25. `),n("span",{class:"token keyword"},"interface"),s(),n("span",{class:"token class-name"},"FileItem"),s(),n("span",{class:"token punctuation"},"{"),s(`
    26. 

  26.   `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    27. 

  27.   name`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    28. 

  28.   status`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    29. 

  29.   response`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    30. 

  30.   url`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    31. 

  31. `),n("span",{class:"token punctuation"},"}"),s(`
    32. 

  32. 

  33. `),n("span",{class:"token keyword"},"interface"),s(),n("span",{class:"token class-name"},"FileInfo"),s(),n("span",{class:"token punctuation"},"{"),s(`
    34. 

  34.   `),n("span",{class:"token literal-property property"},"file"),n("span",{class:"token operator"},":"),s(" FileItem"),n("span",{class:"token punctuation"},";"),s(`
    35. 

  35.   `),n("span",{class:"token literal-property property"},"fileList"),n("span",{class:"token operator"},":"),s(" FileItem"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),s(`
    36. 

  36. `),n("span",{class:"token punctuation"},"}"),s(`
    37. 

  37. 

  38. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    39. 

  39.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    40. 

  40.     UploadOutlined`),n("span",{class:"token punctuation"},","),s(`
    41. 

  41.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    42. 

  42.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    43. 

  43.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"handleChange"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"info"),n("span",{class:"token operator"},":"),s(" FileInfo")]),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    44. 

  44.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("status "),n("span",{class:"token operator"},"!=="),s(),n("span",{class:"token string"},"'uploading'"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    45. 

  45.         console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},","),s(" info"),n("span",{class:"token punctuation"},"."),s("fileList"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    46. 

  46.       `),n("span",{class:"token punctuation"},"}"),s(`
    47. 

  47.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("status "),n("span",{class:"token operator"},"==="),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    48. 

  48.         message`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"success"),n("span",{class:"token punctuation"},"("),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("name"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token string"}," file uploaded successfully"),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    49. 

  49.       `),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"else"),s(),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("status "),n("span",{class:"token operator"},"==="),s(),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    50. 

  50.         message`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"error"),n("span",{class:"token punctuation"},"("),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("name"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token string"}," file upload failed."),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    51. 

  51.       `),n("span",{class:"token punctuation"},"}"),s(`
    52. 

  52.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    53. 

  53. 

  54.     `),n("span",{class:"token keyword"},"const"),s(" fileList "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    55. 

  55.     `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
    56. 

  56.       fileList`),n("span",{class:"token punctuation"},","),s(`
    57. 

  57.       `),n("span",{class:"token literal-property property"},"headers"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    58. 

  58.         `),n("span",{class:"token literal-property property"},"authorization"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'authorization-text'"),n("span",{class:"token punctuation"},","),s(`
    59. 

  59.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    60. 

  60.       handleChange`),n("span",{class:"token punctuation"},","),s(`
    61. 

  61.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    62. 

  62.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    63. 

  63. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    64. 

  64. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    65. 

  65. `)])],-1)])),jsVersionHtml:o(()=>a[3]||(a[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    66. 

  66.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(`
    67. 

  67.     `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),s("file-list")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList"),n("span",{class:"token punctuation"},'"')]),s(`
    68. 

  68.     `),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("file"),n("span",{class:"token punctuation"},'"')]),s(`
    69. 

  69.     `),n("span",{class:"token attr-name"},":multiple"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("true"),n("span",{class:"token punctuation"},'"')]),s(`
    70. 

  70.     `),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("https://www.mocky.io/v2/5cc8019d300000980a055e76"),n("span",{class:"token punctuation"},'"')]),s(`
    71. 

  71.     `),n("span",{class:"token attr-name"},":headers"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("headers"),n("span",{class:"token punctuation"},'"')]),s(`
    72. 

  72.     `),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("handleChange"),n("span",{class:"token punctuation"},'"')]),s(`
    73. 

  73.   `),n("span",{class:"token punctuation"},">")]),s(`
    74. 

  74.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    75. 

  75.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    76. 

  76.       Click to Upload
    77. 

  77.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    78. 

  78.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    79. 

  79. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    80. 

  80. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    81. 

  81. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" message "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),s(`
    82. 

  82. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" UploadOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    83. 

  83. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent"),n("span",{class:"token punctuation"},","),s(" ref "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    84. 

  84. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    85. 

  85.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    86. 

  86.     UploadOutlined`),n("span",{class:"token punctuation"},","),s(`
    87. 

  87.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    88. 

  88.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    89. 

  89.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"handleChange"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token parameter"},"info"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    90. 

  90.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("status "),n("span",{class:"token operator"},"!=="),s(),n("span",{class:"token string"},"'uploading'"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    91. 

  91.         console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},","),s(" info"),n("span",{class:"token punctuation"},"."),s("fileList"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    92. 

  92.       `),n("span",{class:"token punctuation"},"}"),s(`
    93. 

  93.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("status "),n("span",{class:"token operator"},"==="),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    94. 

  94.         message`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"success"),n("span",{class:"token punctuation"},"("),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("name"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token string"}," file uploaded successfully"),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    95. 

  95.       `),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"else"),s(),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("status "),n("span",{class:"token operator"},"==="),s(),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    96. 

  96.         message`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"error"),n("span",{class:"token punctuation"},"("),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("name"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token string"}," file upload failed."),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    97. 

  97.       `),n("span",{class:"token punctuation"},"}"),s(`
    98. 

  98.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    99. 

  99.     `),n("span",{class:"token keyword"},"const"),s(" fileList "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    100. 

  100.     `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
    101. 

  101.       fileList`),n("span",{class:"token punctuation"},","),s(`
    102. 

  102.       `),n("span",{class:"token literal-property property"},"headers"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    103. 

  103.         `),n("span",{class:"token literal-property property"},"authorization"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'authorization-text'"),n("span",{class:"token punctuation"},","),s(`
    104. 

  104.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    105. 

  105.       handleChange`),n("span",{class:"token punctuation"},","),s(`
    106. 

  106.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    107. 

  107.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    108. 

  108. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    109. 

  109. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    110. 

  110. `)])],-1)])),_:1})}var z=A(J,[["render",K]]);function P(t,a){const p=new FileReader;p.addEventListener("load",()=>a(p.result)),p.readAsDataURL(t)}const S=y({components:{LoadingOutlined:X,PlusOutlined:h},setup(){const t=m([]),a=m(!1),p=m("");return{fileList:t,loading:a,imageUrl:p,handleChange:i=>{if(i.file.status==="uploading"){a.value=!0;return}i.file.status==="done"&&P(i.file.originFileObj,c=>{p.value=c,a.value=!1}),i.file.status==="error"&&(a.value=!1,Z.error("upload error"))},beforeUpload:i=>{const c=i.type==="image/jpeg"||i.type==="image/png";c||Z.error("You can only upload JPG file!");const k=i.size/1024/1024<2;return k||Z.error("Image must smaller than 2MB!"),c&&k}}}}),N=["src"],j={key:1};function D(t,a,p,u,r,i){const c=e("loading-outlined"),k=e("plus-outlined"),g=e("a-upload"),d=e("demo-box");return C(),b(d,{jsfiddle:{us:"Click to upload user's avatar, and validate size and format of picture with `beforeUpload`.",cn:"\u70B9\u51FB\u4E0A\u4F20\u7528\u6237\u5934\u50CF\uFF0C\u5E76\u4F7F\u7528 `beforeUpload` \u9650\u5236\u7528\u6237\u4E0A\u4F20\u7684\u56FE\u7247\u683C\u5F0F\u548C\u5927\u5C0F\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
    111. 

  111. <p>\u70B9\u51FB\u4E0A\u4F20\u7528\u6237\u5934\u50CF\uFF0C\u5E76\u4F7F\u7528 <code>beforeUpload</code> \u9650\u5236\u7528\u6237\u4E0A\u4F20\u7684\u56FE\u7247\u683C\u5F0F\u548C\u5927\u5C0F\u3002</p>
    112. 

  112. <blockquote>
    113. 

  113. <p><code>beforeUpload</code> \u7684\u8FD4\u56DE\u503C\u53EF\u4EE5\u662F\u4E00\u4E2A Promise \u4EE5\u652F\u6301\u5F02\u6B65\u5904\u7406\uFF0C\u5982\u670D\u52A1\u7AEF\u6821\u9A8C\u7B49\uFF1A<a href="http://react-component.github.io/upload/examples/beforeUpload.html" target="_blank" rel="noopener noreferrer">\u793A\u4F8B</a>\u3002</p>
    114. 

  114. </blockquote>
    115. 

  115. <h2 id="en-us">en-US</h2>
    116. 

  116. <p>Click to upload user's avatar, and validate size and format of picture with <code>beforeUpload</code>.</p>
    117. 

  117. <blockquote>
    118. 

  118. <p>The return value of function <code>beforeUpload</code> can be a Promise to check asynchronously. <a href="http://react-component.github.io/upload/examples/beforeUpload.html" target="_blank" rel="noopener noreferrer">demo</a></p>
    119. 

  119. </blockquote>
    120. 

  120. `,order:1,title:{"zh-CN":"\u7528\u6237\u5934\u50CF","en-US":"Avatar"},relativePath:"src/docs/upload/demo/avatar.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXVwbG9hZAogICAgdi1tb2RlbDpmaWxlLWxpc3Q9ImZpbGVMaXN0IgogICAgbmFtZT0iYXZhdGFyIgogICAgbGlzdC10eXBlPSJwaWN0dXJlLWNhcmQiCiAgICBjbGFzcz0iYXZhdGFyLXVwbG9hZGVyIgogICAgOnNob3ctdXBsb2FkLWxpc3Q9ImZhbHNlIgogICAgYWN0aW9uPSJodHRwczovL3d3dy5tb2NreS5pby92Mi81Y2M4MDE5ZDMwMDAwMDk4MGEwNTVlNzYiCiAgICA6YmVmb3JlLXVwbG9hZD0iYmVmb3JlVXBsb2FkIgogICAgQGNoYW5nZT0iaGFuZGxlQ2hhbmdlIgogID4KICAgIDxpbWcgdi1pZj0iaW1hZ2VVcmwiIDpzcmM9ImltYWdlVXJsIiBhbHQ9ImF2YXRhciIgLz4KICAgIDxkaXYgdi1lbHNlPgogICAgICA8bG9hZGluZy1vdXRsaW5lZCB2LWlmPSJsb2FkaW5nIj48L2xvYWRpbmctb3V0bGluZWQ+CiAgICAgIDxwbHVzLW91dGxpbmVkIHYtZWxzZT48L3BsdXMtb3V0bGluZWQ+CiAgICAgIDxkaXYgY2xhc3M9ImFudC11cGxvYWQtdGV4dCI+VXBsb2FkPC9kaXY+CiAgICA8L2Rpdj4KICA8L2EtdXBsb2FkPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgUGx1c091dGxpbmVkLCBMb2FkaW5nT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwppbXBvcnQgeyBtZXNzYWdlIH0gZnJvbSAnYW50LWRlc2lnbi12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CgppbnRlcmZhY2UgRmlsZUl0ZW0gewogIHVpZDogc3RyaW5nOwogIG5hbWU/OiBzdHJpbmc7CiAgc3RhdHVzPzogc3RyaW5nOwogIHJlc3BvbnNlPzogc3RyaW5nOwogIHVybD86IHN0cmluZzsKICB0eXBlPzogc3RyaW5nOwogIHNpemU6IG51bWJlcjsKICBvcmlnaW5GaWxlT2JqOiBhbnk7Cn0KCmludGVyZmFjZSBGaWxlSW5mbyB7CiAgZmlsZTogRmlsZUl0ZW07CiAgZmlsZUxpc3Q6IEZpbGVJdGVtW107Cn0KCmZ1bmN0aW9uIGdldEJhc2U2NChpbWc6IEJsb2IsIGNhbGxiYWNrOiAoYmFzZTY0VXJsOiBzdHJpbmcpID0+IHZvaWQpIHsKICBjb25zdCByZWFkZXIgPSBuZXcgRmlsZVJlYWRlcigpOwogIHJlYWRlci5hZGRFdmVudExpc3RlbmVyKCdsb2FkJywgKCkgPT4gY2FsbGJhY2socmVhZGVyLnJlc3VsdCBhcyBzdHJpbmcpKTsKICByZWFkZXIucmVhZEFzRGF0YVVSTChpbWcpOwp9CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgTG9hZGluZ091dGxpbmVkLAogICAgUGx1c091dGxpbmVkLAogIH0sCiAgc2V0dXAoKSB7CiAgICBjb25zdCBmaWxlTGlzdCA9IHJlZihbXSk7CiAgICBjb25zdCBsb2FkaW5nID0gcmVmPGJvb2xlYW4+KGZhbHNlKTsKICAgIGNvbnN0IGltYWdlVXJsID0gcmVmPHN0cmluZz4oJycpOwoKICAgIGNvbnN0IGhhbmRsZUNoYW5nZSA9IChpbmZvOiBGaWxlSW5mbykgPT4gewogICAgICBpZiAoaW5mby5maWxlLnN0YXR1cyA9PT0gJ3VwbG9hZGluZycpIHsKICAgICAgICBsb2FkaW5nLnZhbHVlID0gdHJ1ZTsKICAgICAgICByZXR1cm47CiAgICAgIH0KICAgICAgaWYgKGluZm8uZmlsZS5zdGF0dXMgPT09ICdkb25lJykgewogICAgICAgIC8vIEdldCB0aGlzIHVybCBmcm9tIHJlc3BvbnNlIGluIHJlYWwgd29ybGQuCiAgICAgICAgZ2V0QmFzZTY0KGluZm8uZmlsZS5vcmlnaW5GaWxlT2JqLCAoYmFzZTY0VXJsOiBzdHJpbmcpID0+IHsKICAgICAgICAgIGltYWdlVXJsLnZhbHVlID0gYmFzZTY0VXJsOwogICAgICAgICAgbG9hZGluZy52YWx1ZSA9IGZhbHNlOwogICAgICAgIH0pOwogICAgICB9CiAgICAgIGlmIChpbmZvLmZpbGUuc3RhdHVzID09PSAnZXJyb3InKSB7CiAgICAgICAgbG9hZGluZy52YWx1ZSA9IGZhbHNlOwogICAgICAgIG1lc3NhZ2UuZXJyb3IoJ3VwbG9hZCBlcnJvcicpOwogICAgICB9CiAgICB9OwoKICAgIGNvbnN0IGJlZm9yZVVwbG9hZCA9IChmaWxlOiBGaWxlSXRlbSkgPT4gewogICAgICBjb25zdCBpc0pwZ09yUG5nID0gZmlsZS50eXBlID09PSAnaW1hZ2UvanBlZycgfHwgZmlsZS50eXBlID09PSAnaW1hZ2UvcG5nJzsKICAgICAgaWYgKCFpc0pwZ09yUG5nKSB7CiAgICAgICAgbWVzc2FnZS5lcnJvcignWW91IGNhbiBvbmx5IHVwbG9hZCBKUEcgZmlsZSEnKTsKICAgICAgfQogICAgICBjb25zdCBpc0x0Mk0gPSBmaWxlLnNpemUgLyAxMDI0IC8gMTAyNCA8IDI7CiAgICAgIGlmICghaXNMdDJNKSB7CiAgICAgICAgbWVzc2FnZS5lcnJvcignSW1hZ2UgbXVzdCBzbWFsbGVyIHRoYW4gMk1CIScpOwogICAgICB9CiAgICAgIHJldHVybiBpc0pwZ09yUG5nICYmIGlzTHQyTTsKICAgIH07CgogICAgcmV0dXJuIHsKICAgICAgZmlsZUxpc3QsCiAgICAgIGxvYWRpbmcsCiAgICAgIGltYWdlVXJsLAogICAgICBoYW5kbGVDaGFuZ2UsCiAgICAgIGJlZm9yZVVwbG9hZCwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pgo8c3R5bGU+Ci5hdmF0YXItdXBsb2FkZXIgPiAuYW50LXVwbG9hZCB7CiAgd2lkdGg6IDEyOHB4OwogIGhlaWdodDogMTI4cHg7Cn0KLmFudC11cGxvYWQtc2VsZWN0LXBpY3R1cmUtY2FyZCBpIHsKICBmb250LXNpemU6IDMycHg7CiAgY29sb3I6ICM5OTk7Cn0KCi5hbnQtdXBsb2FkLXNlbGVjdC1waWN0dXJlLWNhcmQgLmFudC11cGxvYWQtdGV4dCB7CiAgbWFyZ2luLXRvcDogOHB4OwogIGNvbG9yOiAjNjY2Owp9Cjwvc3R5bGU+Cg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXVwbG9hZAogICAgdi1tb2RlbDpmaWxlLWxpc3Q9ImZpbGVMaXN0IgogICAgbmFtZT0iYXZhdGFyIgogICAgbGlzdC10eXBlPSJwaWN0dXJlLWNhcmQiCiAgICBjbGFzcz0iYXZhdGFyLXVwbG9hZGVyIgogICAgOnNob3ctdXBsb2FkLWxpc3Q9ImZhbHNlIgogICAgYWN0aW9uPSJodHRwczovL3d3dy5tb2NreS5pby92Mi81Y2M4MDE5ZDMwMDAwMDk4MGEwNTVlNzYiCiAgICA6YmVmb3JlLXVwbG9hZD0iYmVmb3JlVXBsb2FkIgogICAgQGNoYW5nZT0iaGFuZGxlQ2hhbmdlIgogID4KICAgIDxpbWcgdi1pZj0iaW1hZ2VVcmwiIDpzcmM9ImltYWdlVXJsIiBhbHQ9ImF2YXRhciIgLz4KICAgIDxkaXYgdi1lbHNlPgogICAgICA8bG9hZGluZy1vdXRsaW5lZCB2LWlmPSJsb2FkaW5nIj48L2xvYWRpbmctb3V0bGluZWQ+CiAgICAgIDxwbHVzLW91dGxpbmVkIHYtZWxzZT48L3BsdXMtb3V0bGluZWQ+CiAgICAgIDxkaXYgY2xhc3M9ImFudC11cGxvYWQtdGV4dCI+VXBsb2FkPC9kaXY+CiAgICA8L2Rpdj4KICA8L2EtdXBsb2FkPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBQbHVzT3V0bGluZWQsIExvYWRpbmdPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmltcG9ydCB7IG1lc3NhZ2UgfSBmcm9tICdhbnQtZGVzaWduLXZ1ZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKZnVuY3Rpb24gZ2V0QmFzZTY0KGltZywgY2FsbGJhY2spIHsKICBjb25zdCByZWFkZXIgPSBuZXcgRmlsZVJlYWRlcigpOwogIHJlYWRlci5hZGRFdmVudExpc3RlbmVyKCdsb2FkJywgKCkgPT4gY2FsbGJhY2socmVhZGVyLnJlc3VsdCkpOwogIHJlYWRlci5yZWFkQXNEYXRhVVJMKGltZyk7Cn0KZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBjb21wb25lbnRzOiB7CiAgICBMb2FkaW5nT3V0bGluZWQsCiAgICBQbHVzT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IGZpbGVMaXN0ID0gcmVmKFtdKTsKICAgIGNvbnN0IGxvYWRpbmcgPSByZWYoZmFsc2UpOwogICAgY29uc3QgaW1hZ2VVcmwgPSByZWYoJycpOwogICAgY29uc3QgaGFuZGxlQ2hhbmdlID0gaW5mbyA9PiB7CiAgICAgIGlmIChpbmZvLmZpbGUuc3RhdHVzID09PSAndXBsb2FkaW5nJykgewogICAgICAgIGxvYWRpbmcudmFsdWUgPSB0cnVlOwogICAgICAgIHJldHVybjsKICAgICAgfQogICAgICBpZiAoaW5mby5maWxlLnN0YXR1cyA9PT0gJ2RvbmUnKSB7CiAgICAgICAgLy8gR2V0IHRoaXMgdXJsIGZyb20gcmVzcG9uc2UgaW4gcmVhbCB3b3JsZC4KICAgICAgICBnZXRCYXNlNjQoaW5mby5maWxlLm9yaWdpbkZpbGVPYmosIGJhc2U2NFVybCA9PiB7CiAgICAgICAgICBpbWFnZVVybC52YWx1ZSA9IGJhc2U2NFVybDsKICAgICAgICAgIGxvYWRpbmcudmFsdWUgPSBmYWxzZTsKICAgICAgICB9KTsKICAgICAgfQogICAgICBpZiAoaW5mby5maWxlLnN0YXR1cyA9PT0gJ2Vycm9yJykgewogICAgICAgIGxvYWRpbmcudmFsdWUgPSBmYWxzZTsKICAgICAgICBtZXNzYWdlLmVycm9yKCd1cGxvYWQgZXJyb3InKTsKICAgICAgfQogICAgfTsKICAgIGNvbnN0IGJlZm9yZVVwbG9hZCA9IGZpbGUgPT4gewogICAgICBjb25zdCBpc0pwZ09yUG5nID0gZmlsZS50eXBlID09PSAnaW1hZ2UvanBlZycgfHwgZmlsZS50eXBlID09PSAnaW1hZ2UvcG5nJzsKICAgICAgaWYgKCFpc0pwZ09yUG5nKSB7CiAgICAgICAgbWVzc2FnZS5lcnJvcignWW91IGNhbiBvbmx5IHVwbG9hZCBKUEcgZmlsZSEnKTsKICAgICAgfQogICAgICBjb25zdCBpc0x0Mk0gPSBmaWxlLnNpemUgLyAxMDI0IC8gMTAyNCA8IDI7CiAgICAgIGlmICghaXNMdDJNKSB7CiAgICAgICAgbWVzc2FnZS5lcnJvcignSW1hZ2UgbXVzdCBzbWFsbGVyIHRoYW4gMk1CIScpOwogICAgICB9CiAgICAgIHJldHVybiBpc0pwZ09yUG5nICYmIGlzTHQyTTsKICAgIH07CiAgICByZXR1cm4gewogICAgICBmaWxlTGlzdCwKICAgICAgbG9hZGluZywKICAgICAgaW1hZ2VVcmwsCiAgICAgIGhhbmRsZUNoYW5nZSwKICAgICAgYmVmb3JlVXBsb2FkLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+CjxzdHlsZT4KLmF2YXRhci11cGxvYWRlciA+IC5hbnQtdXBsb2FkIHsKICB3aWR0aDogMTI4cHg7CiAgaGVpZ2h0OiAxMjhweDsKfQouYW50LXVwbG9hZC1zZWxlY3QtcGljdHVyZS1jYXJkIGkgewogIGZvbnQtc2l6ZTogMzJweDsKICBjb2xvcjogIzk5OTsKfQoKLmFudC11cGxvYWQtc2VsZWN0LXBpY3R1cmUtY2FyZCAuYW50LXVwbG9hZC10ZXh0IHsKICBtYXJnaW4tdG9wOiA4cHg7CiAgY29sb3I6ICM2NjY7Cn0KPC9zdHlsZT4="}},{default:o(()=>[l(g,{"file-list":t.fileList,"onUpdate:fileList":a[0]||(a[0]=I=>t.fileList=I),name:"avatar","list-type":"picture-card",class:"avatar-uploader","show-upload-list":!1,action:"https://www.mocky.io/v2/5cc8019d300000980a055e76","before-upload":t.beforeUpload,onChange:t.handleChange},{default:o(()=>[t.imageUrl?(C(),w("img",{key:0,src:t.imageUrl,alt:"avatar"},null,8,N)):(C(),w("div",j,[t.loading?(C(),b(c,{key:0})):(C(),b(k,{key:1})),a[1]||(a[1]=n("div",{class:"ant-upload-text"},"Upload",-1))]))]),_:1},8,["file-list","before-upload","onChange"])]),htmlCode:o(()=>a[2]||(a[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    121. 

  121.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(`
    122. 

  122.     `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),s("file-list")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList"),n("span",{class:"token punctuation"},'"')]),s(`
    123. 

  123.     `),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("avatar"),n("span",{class:"token punctuation"},'"')]),s(`
    124. 

  124.     `),n("span",{class:"token attr-name"},"list-type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("picture-card"),n("span",{class:"token punctuation"},'"')]),s(`
    125. 

  125.     `),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("avatar-uploader"),n("span",{class:"token punctuation"},'"')]),s(`
    126. 

  126.     `),n("span",{class:"token attr-name"},":show-upload-list"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("false"),n("span",{class:"token punctuation"},'"')]),s(`
    127. 

  127.     `),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("https://www.mocky.io/v2/5cc8019d300000980a055e76"),n("span",{class:"token punctuation"},'"')]),s(`
    128. 

  128.     `),n("span",{class:"token attr-name"},":before-upload"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("beforeUpload"),n("span",{class:"token punctuation"},'"')]),s(`
    129. 

  129.     `),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("handleChange"),n("span",{class:"token punctuation"},'"')]),s(`
    130. 

  130.   `),n("span",{class:"token punctuation"},">")]),s(`
    131. 

  131.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("img")]),s(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("imageUrl"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token attr-name"},":src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("imageUrl"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token attr-name"},"alt"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("avatar"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token punctuation"},"/>")]),s(`
    132. 

  132.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("div")]),s(),n("span",{class:"token attr-name"},"v-else"),n("span",{class:"token punctuation"},">")]),s(`
    133. 

  133.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("loading-outlined")]),s(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("loading"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("loading-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    134. 

  134.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("plus-outlined")]),s(),n("span",{class:"token attr-name"},"v-else"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("plus-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    135. 

  135.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("div")]),s(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ant-upload-text"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s("Upload"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    136. 

  136.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    137. 

  137.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    138. 

  138. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    139. 

  139. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),s(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    140. 

  140. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" PlusOutlined"),n("span",{class:"token punctuation"},","),s(" LoadingOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    141. 

  141. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" message "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),s(`
    142. 

  142. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent"),n("span",{class:"token punctuation"},","),s(" ref "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    143. 

  143. 

  144. `),n("span",{class:"token keyword"},"interface"),s(),n("span",{class:"token class-name"},"FileItem"),s(),n("span",{class:"token punctuation"},"{"),s(`
    145. 

  145.   `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    146. 

  146.   name`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    147. 

  147.   status`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    148. 

  148.   response`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    149. 

  149.   url`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    150. 

  150.   type`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    151. 

  151.   `),n("span",{class:"token literal-property property"},"size"),n("span",{class:"token operator"},":"),s(" number"),n("span",{class:"token punctuation"},";"),s(`
    152. 

  152.   `),n("span",{class:"token literal-property property"},"originFileObj"),n("span",{class:"token operator"},":"),s(" any"),n("span",{class:"token punctuation"},";"),s(`
    153. 

  153. `),n("span",{class:"token punctuation"},"}"),s(`
    154. 

  154. 

  155. `),n("span",{class:"token keyword"},"interface"),s(),n("span",{class:"token class-name"},"FileInfo"),s(),n("span",{class:"token punctuation"},"{"),s(`
    156. 

  156.   `),n("span",{class:"token literal-property property"},"file"),n("span",{class:"token operator"},":"),s(" FileItem"),n("span",{class:"token punctuation"},";"),s(`
    157. 

  157.   `),n("span",{class:"token literal-property property"},"fileList"),n("span",{class:"token operator"},":"),s(" FileItem"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),s(`
    158. 

  158. `),n("span",{class:"token punctuation"},"}"),s(`
    159. 

  159. 

  160. `),n("span",{class:"token keyword"},"function"),s(),n("span",{class:"token function"},"getBase64"),n("span",{class:"token punctuation"},"("),s("img"),n("span",{class:"token operator"},":"),s(" Blob"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token function-variable function"},"callback"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"base64Url"),n("span",{class:"token operator"},":"),s(" string")]),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token keyword"},"void"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    161. 

  161.   `),n("span",{class:"token keyword"},"const"),s(" reader "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token keyword"},"new"),s(),n("span",{class:"token class-name"},"FileReader"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    162. 

  162.   reader`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"addEventListener"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'load'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token function"},"callback"),n("span",{class:"token punctuation"},"("),s("reader"),n("span",{class:"token punctuation"},"."),s("result "),n("span",{class:"token keyword"},"as"),s(" string"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    163. 

  163.   reader`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"readAsDataURL"),n("span",{class:"token punctuation"},"("),s("img"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    164. 

  164. `),n("span",{class:"token punctuation"},"}"),s(`
    165. 

  165. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    166. 

  166.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    167. 

  167.     LoadingOutlined`),n("span",{class:"token punctuation"},","),s(`
    168. 

  168.     PlusOutlined`),n("span",{class:"token punctuation"},","),s(`
    169. 

  169.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    170. 

  170.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    171. 

  171.     `),n("span",{class:"token keyword"},"const"),s(" fileList "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    172. 

  172.     `),n("span",{class:"token keyword"},"const"),s(" loading "),n("span",{class:"token operator"},"="),s(" ref"),n("span",{class:"token operator"},"<"),s("boolean"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    173. 

  173.     `),n("span",{class:"token keyword"},"const"),s(" imageUrl "),n("span",{class:"token operator"},"="),s(" ref"),n("span",{class:"token operator"},"<"),s("string"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    174. 

  174. 

  175.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"handleChange"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"info"),n("span",{class:"token operator"},":"),s(" FileInfo")]),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    176. 

  176.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("status "),n("span",{class:"token operator"},"==="),s(),n("span",{class:"token string"},"'uploading'"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    177. 

  177.         loading`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),s(`
    178. 

  178.         `),n("span",{class:"token keyword"},"return"),n("span",{class:"token punctuation"},";"),s(`
    179. 

  179.       `),n("span",{class:"token punctuation"},"}"),s(`
    180. 

  180.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("status "),n("span",{class:"token operator"},"==="),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    181. 

  181.         `),n("span",{class:"token comment"},"// Get this url from response in real world."),s(`
    182. 

  182.         `),n("span",{class:"token function"},"getBase64"),n("span",{class:"token punctuation"},"("),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("originFileObj"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"base64Url"),n("span",{class:"token operator"},":"),s(" string")]),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    183. 

  183.           imageUrl`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(" base64Url"),n("span",{class:"token punctuation"},";"),s(`
    184. 

  184.           loading`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),s(`
    185. 

  185.         `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    186. 

  186.       `),n("span",{class:"token punctuation"},"}"),s(`
    187. 

  187.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("status "),n("span",{class:"token operator"},"==="),s(),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    188. 

  188.         loading`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),s(`
    189. 

  189.         message`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"error"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'upload error'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    190. 

  190.       `),n("span",{class:"token punctuation"},"}"),s(`
    191. 

  191.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    192. 

  192. 

  193.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"beforeUpload"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"file"),n("span",{class:"token operator"},":"),s(" FileItem")]),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    194. 

  194.       `),n("span",{class:"token keyword"},"const"),s(" isJpgOrPng "),n("span",{class:"token operator"},"="),s(" file"),n("span",{class:"token punctuation"},"."),s("type "),n("span",{class:"token operator"},"==="),s(),n("span",{class:"token string"},"'image/jpeg'"),s(),n("span",{class:"token operator"},"||"),s(" file"),n("span",{class:"token punctuation"},"."),s("type "),n("span",{class:"token operator"},"==="),s(),n("span",{class:"token string"},"'image/png'"),n("span",{class:"token punctuation"},";"),s(`
    195. 

  195.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token operator"},"!"),s("isJpgOrPng"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    196. 

  196.         message`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"error"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'You can only upload JPG file!'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    197. 

  197.       `),n("span",{class:"token punctuation"},"}"),s(`
    198. 

  198.       `),n("span",{class:"token keyword"},"const"),s(" isLt2M "),n("span",{class:"token operator"},"="),s(" file"),n("span",{class:"token punctuation"},"."),s("size "),n("span",{class:"token operator"},"/"),s(),n("span",{class:"token number"},"1024"),s(),n("span",{class:"token operator"},"/"),s(),n("span",{class:"token number"},"1024"),s(),n("span",{class:"token operator"},"<"),s(),n("span",{class:"token number"},"2"),n("span",{class:"token punctuation"},";"),s(`
    199. 

  199.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token operator"},"!"),s("isLt2M"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    200. 

  200.         message`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"error"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Image must smaller than 2MB!'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    201. 

  201.       `),n("span",{class:"token punctuation"},"}"),s(`
    202. 

  202.       `),n("span",{class:"token keyword"},"return"),s(" isJpgOrPng "),n("span",{class:"token operator"},"&&"),s(" isLt2M"),n("span",{class:"token punctuation"},";"),s(`
    203. 

  203.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    204. 

  204. 

  205.     `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
    206. 

  206.       fileList`),n("span",{class:"token punctuation"},","),s(`
    207. 

  207.       loading`),n("span",{class:"token punctuation"},","),s(`
    208. 

  208.       imageUrl`),n("span",{class:"token punctuation"},","),s(`
    209. 

  209.       handleChange`),n("span",{class:"token punctuation"},","),s(`
    210. 

  210.       beforeUpload`),n("span",{class:"token punctuation"},","),s(`
    211. 

  211.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    212. 

  212.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    213. 

  213. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    214. 

  214. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    215. 

  215. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("style")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[s(`
    216. 

  216. `),n("span",{class:"token selector"},".avatar-uploader > .ant-upload"),s(),n("span",{class:"token punctuation"},"{"),s(`
    217. 

  217.   `),n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),s(" 128px"),n("span",{class:"token punctuation"},";"),s(`
    218. 

  218.   `),n("span",{class:"token property"},"height"),n("span",{class:"token punctuation"},":"),s(" 128px"),n("span",{class:"token punctuation"},";"),s(`
    219. 

  219. `),n("span",{class:"token punctuation"},"}"),s(`
    220. 

  220. `),n("span",{class:"token selector"},".ant-upload-select-picture-card i"),s(),n("span",{class:"token punctuation"},"{"),s(`
    221. 

  221.   `),n("span",{class:"token property"},"font-size"),n("span",{class:"token punctuation"},":"),s(" 32px"),n("span",{class:"token punctuation"},";"),s(`
    222. 

  222.   `),n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),s(" #999"),n("span",{class:"token punctuation"},";"),s(`
    223. 

  223. `),n("span",{class:"token punctuation"},"}"),s(`
    224. 

  224. 

  225. `),n("span",{class:"token selector"},".ant-upload-select-picture-card .ant-upload-text"),s(),n("span",{class:"token punctuation"},"{"),s(`
    226. 

  226.   `),n("span",{class:"token property"},"margin-top"),n("span",{class:"token punctuation"},":"),s(" 8px"),n("span",{class:"token punctuation"},";"),s(`
    227. 

  227.   `),n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),s(" #666"),n("span",{class:"token punctuation"},";"),s(`
    228. 

  228. `),n("span",{class:"token punctuation"},"}"),s(`
    229. 

  229. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("style")]),n("span",{class:"token punctuation"},">")]),s(`
    230. 

  230. `)])],-1)])),jsVersionHtml:o(()=>a[3]||(a[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    231. 

  231.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(`
    232. 

  232.     `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),s("file-list")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList"),n("span",{class:"token punctuation"},'"')]),s(`
    233. 

  233.     `),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("avatar"),n("span",{class:"token punctuation"},'"')]),s(`
    234. 

  234.     `),n("span",{class:"token attr-name"},"list-type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("picture-card"),n("span",{class:"token punctuation"},'"')]),s(`
    235. 

  235.     `),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("avatar-uploader"),n("span",{class:"token punctuation"},'"')]),s(`
    236. 

  236.     `),n("span",{class:"token attr-name"},":show-upload-list"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("false"),n("span",{class:"token punctuation"},'"')]),s(`
    237. 

  237.     `),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("https://www.mocky.io/v2/5cc8019d300000980a055e76"),n("span",{class:"token punctuation"},'"')]),s(`
    238. 

  238.     `),n("span",{class:"token attr-name"},":before-upload"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("beforeUpload"),n("span",{class:"token punctuation"},'"')]),s(`
    239. 

  239.     `),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("handleChange"),n("span",{class:"token punctuation"},'"')]),s(`
    240. 

  240.   `),n("span",{class:"token punctuation"},">")]),s(`
    241. 

  241.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("img")]),s(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("imageUrl"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token attr-name"},":src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("imageUrl"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token attr-name"},"alt"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("avatar"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token punctuation"},"/>")]),s(`
    242. 

  242.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("div")]),s(),n("span",{class:"token attr-name"},"v-else"),n("span",{class:"token punctuation"},">")]),s(`
    243. 

  243.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("loading-outlined")]),s(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("loading"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("loading-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    244. 

  244.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("plus-outlined")]),s(),n("span",{class:"token attr-name"},"v-else"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("plus-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    245. 

  245.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("div")]),s(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ant-upload-text"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s("Upload"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    246. 

  246.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    247. 

  247.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    248. 

  248. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    249. 

  249. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    250. 

  250. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" PlusOutlined"),n("span",{class:"token punctuation"},","),s(" LoadingOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    251. 

  251. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" message "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),s(`
    252. 

  252. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent"),n("span",{class:"token punctuation"},","),s(" ref "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    253. 

  253. `),n("span",{class:"token keyword"},"function"),s(),n("span",{class:"token function"},"getBase64"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[s("img"),n("span",{class:"token punctuation"},","),s(" callback")]),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    254. 

  254.   `),n("span",{class:"token keyword"},"const"),s(" reader "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token keyword"},"new"),s(),n("span",{class:"token class-name"},"FileReader"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    255. 

  255.   reader`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"addEventListener"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'load'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token function"},"callback"),n("span",{class:"token punctuation"},"("),s("reader"),n("span",{class:"token punctuation"},"."),s("result"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    256. 

  256.   reader`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"readAsDataURL"),n("span",{class:"token punctuation"},"("),s("img"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    257. 

  257. `),n("span",{class:"token punctuation"},"}"),s(`
    258. 

  258. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    259. 

  259.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    260. 

  260.     LoadingOutlined`),n("span",{class:"token punctuation"},","),s(`
    261. 

  261.     PlusOutlined`),n("span",{class:"token punctuation"},","),s(`
    262. 

  262.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    263. 

  263.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    264. 

  264.     `),n("span",{class:"token keyword"},"const"),s(" fileList "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    265. 

  265.     `),n("span",{class:"token keyword"},"const"),s(" loading "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    266. 

  266.     `),n("span",{class:"token keyword"},"const"),s(" imageUrl "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    267. 

  267.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"handleChange"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token parameter"},"info"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    268. 

  268.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("status "),n("span",{class:"token operator"},"==="),s(),n("span",{class:"token string"},"'uploading'"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    269. 

  269.         loading`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),s(`
    270. 

  270.         `),n("span",{class:"token keyword"},"return"),n("span",{class:"token punctuation"},";"),s(`
    271. 

  271.       `),n("span",{class:"token punctuation"},"}"),s(`
    272. 

  272.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("status "),n("span",{class:"token operator"},"==="),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    273. 

  273.         `),n("span",{class:"token comment"},"// Get this url from response in real world."),s(`
    274. 

  274.         `),n("span",{class:"token function"},"getBase64"),n("span",{class:"token punctuation"},"("),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("originFileObj"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token parameter"},"base64Url"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    275. 

  275.           imageUrl`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(" base64Url"),n("span",{class:"token punctuation"},";"),s(`
    276. 

  276.           loading`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),s(`
    277. 

  277.         `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    278. 

  278.       `),n("span",{class:"token punctuation"},"}"),s(`
    279. 

  279.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("status "),n("span",{class:"token operator"},"==="),s(),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    280. 

  280.         loading`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),s(`
    281. 

  281.         message`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"error"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'upload error'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    282. 

  282.       `),n("span",{class:"token punctuation"},"}"),s(`
    283. 

  283.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    284. 

  284.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"beforeUpload"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token parameter"},"file"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    285. 

  285.       `),n("span",{class:"token keyword"},"const"),s(" isJpgOrPng "),n("span",{class:"token operator"},"="),s(" file"),n("span",{class:"token punctuation"},"."),s("type "),n("span",{class:"token operator"},"==="),s(),n("span",{class:"token string"},"'image/jpeg'"),s(),n("span",{class:"token operator"},"||"),s(" file"),n("span",{class:"token punctuation"},"."),s("type "),n("span",{class:"token operator"},"==="),s(),n("span",{class:"token string"},"'image/png'"),n("span",{class:"token punctuation"},";"),s(`
    286. 

  286.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token operator"},"!"),s("isJpgOrPng"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    287. 

  287.         message`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"error"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'You can only upload JPG file!'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    288. 

  288.       `),n("span",{class:"token punctuation"},"}"),s(`
    289. 

  289.       `),n("span",{class:"token keyword"},"const"),s(" isLt2M "),n("span",{class:"token operator"},"="),s(" file"),n("span",{class:"token punctuation"},"."),s("size "),n("span",{class:"token operator"},"/"),s(),n("span",{class:"token number"},"1024"),s(),n("span",{class:"token operator"},"/"),s(),n("span",{class:"token number"},"1024"),s(),n("span",{class:"token operator"},"<"),s(),n("span",{class:"token number"},"2"),n("span",{class:"token punctuation"},";"),s(`
    290. 

  290.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token operator"},"!"),s("isLt2M"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    291. 

  291.         message`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"error"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Image must smaller than 2MB!'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    292. 

  292.       `),n("span",{class:"token punctuation"},"}"),s(`
    293. 

  293.       `),n("span",{class:"token keyword"},"return"),s(" isJpgOrPng "),n("span",{class:"token operator"},"&&"),s(" isLt2M"),n("span",{class:"token punctuation"},";"),s(`
    294. 

  294.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    295. 

  295.     `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
    296. 

  296.       fileList`),n("span",{class:"token punctuation"},","),s(`
    297. 

  297.       loading`),n("span",{class:"token punctuation"},","),s(`
    298. 

  298.       imageUrl`),n("span",{class:"token punctuation"},","),s(`
    299. 

  299.       handleChange`),n("span",{class:"token punctuation"},","),s(`
    300. 

  300.       beforeUpload`),n("span",{class:"token punctuation"},","),s(`
    301. 

  301.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    302. 

  302.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    303. 

  303. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    304. 

  304. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    305. 

  305. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("style")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[s(`
    306. 

  306. `),n("span",{class:"token selector"},".avatar-uploader > .ant-upload"),s(),n("span",{class:"token punctuation"},"{"),s(`
    307. 

  307.   `),n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),s(" 128px"),n("span",{class:"token punctuation"},";"),s(`
    308. 

  308.   `),n("span",{class:"token property"},"height"),n("span",{class:"token punctuation"},":"),s(" 128px"),n("span",{class:"token punctuation"},";"),s(`
    309. 

  309. `),n("span",{class:"token punctuation"},"}"),s(`
    310. 

  310. `),n("span",{class:"token selector"},".ant-upload-select-picture-card i"),s(),n("span",{class:"token punctuation"},"{"),s(`
    311. 

  311.   `),n("span",{class:"token property"},"font-size"),n("span",{class:"token punctuation"},":"),s(" 32px"),n("span",{class:"token punctuation"},";"),s(`
    312. 

  312.   `),n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),s(" #999"),n("span",{class:"token punctuation"},";"),s(`
    313. 

  313. `),n("span",{class:"token punctuation"},"}"),s(`
    314. 

  314. 

  315. `),n("span",{class:"token selector"},".ant-upload-select-picture-card .ant-upload-text"),s(),n("span",{class:"token punctuation"},"{"),s(`
    316. 

  316.   `),n("span",{class:"token property"},"margin-top"),n("span",{class:"token punctuation"},":"),s(" 8px"),n("span",{class:"token punctuation"},";"),s(`
    317. 

  317.   `),n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),s(" #666"),n("span",{class:"token punctuation"},";"),s(`
    318. 

  318. `),n("span",{class:"token punctuation"},"}"),s(`
    319. 

  319. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("style")]),n("span",{class:"token punctuation"},">")]),s(`
    320. 

  320. `)])],-1)])),_:1})}var Q=A(S,[["render",D]]);const O=y({components:{UploadOutlined:f},setup(){return{fileList:m([{uid:"1",name:"xxx.png",status:"done",response:"Server Error 500",url:"http://www.baidu.com/xxx.png"},{uid:"2",name:"yyy.png",status:"done",url:"http://www.baidu.com/yyy.png"},{uid:"3",name:"zzz.png",status:"error",response:"Server Error 500",url:"http://www.baidu.com/zzz.png"}]),handleChange:({file:p,fileList:u})=>{p.status!=="uploading"&&console.log(p,u)}}}});function E(t,a,p,u,r,i){const c=e("upload-outlined"),k=e("a-button"),g=e("a-upload"),d=e("demo-box");return C(),b(d,{jsfiddle:{us:"Use `defaultFileList` for uploaded files when page init.",cn:"\u4F7F\u7528 `defaultFileList` \u8BBE\u7F6E\u5DF2\u4E0A\u4F20\u7684\u5185\u5BB9\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
    321. 

  321. <p>\u4F7F\u7528 <code>defaultFileList</code> \u8BBE\u7F6E\u5DF2\u4E0A\u4F20\u7684\u5185\u5BB9\u3002</p>
    322. 

  322. <h2 id="en-us">en-US</h2>
    323. 

  323. <p>Use <code>defaultFileList</code> for uploaded files when page init.</p>
    324. 

  324. `,order:2,title:{"zh-CN":"\u5DF2\u4E0A\u4F20\u7684\u6587\u4EF6\u5217\u8868","en-US":"Default Files"},relativePath:"src/docs/upload/demo/defaultFileList.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXVwbG9hZCBhY3Rpb249Imh0dHBzOi8vd3d3Lm1vY2t5LmlvL3YyLzVjYzgwMTlkMzAwMDAwOTgwYTA1NWU3NiIgdi1tb2RlbDpmaWxlLWxpc3Q9ImZpbGVMaXN0Ij4KICAgIDxhLWJ1dHRvbj4KICAgICAgPHVwbG9hZC1vdXRsaW5lZD48L3VwbG9hZC1vdXRsaW5lZD4KICAgICAgVXBsb2FkCiAgICA8L2EtYnV0dG9uPgogIDwvYS11cGxvYWQ+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBVcGxvYWRPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKCmludGVyZmFjZSBGaWxlSXRlbSB7CiAgdWlkOiBzdHJpbmc7CiAgbmFtZT86IHN0cmluZzsKICBzdGF0dXM/OiBzdHJpbmc7CiAgcmVzcG9uc2U/OiBzdHJpbmc7CiAgdXJsPzogc3RyaW5nOwp9CmludGVyZmFjZSBGaWxlSW5mbyB7CiAgZmlsZTogRmlsZUl0ZW07CiAgZmlsZUxpc3Q6IEZpbGVJdGVtW107Cn0KCmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgVXBsb2FkT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IGZpbGVMaXN0ID0gcmVmPEZpbGVJdGVtW10+KFsKICAgICAgewogICAgICAgIHVpZDogJzEnLAogICAgICAgIG5hbWU6ICd4eHgucG5nJywKICAgICAgICBzdGF0dXM6ICdkb25lJywKICAgICAgICByZXNwb25zZTogJ1NlcnZlciBFcnJvciA1MDAnLCAvLyBjdXN0b20gZXJyb3IgbWVzc2FnZSB0byBzaG93CiAgICAgICAgdXJsOiAnaHR0cDovL3d3dy5iYWlkdS5jb20veHh4LnBuZycsCiAgICAgIH0sCiAgICAgIHsKICAgICAgICB1aWQ6ICcyJywKICAgICAgICBuYW1lOiAneXl5LnBuZycsCiAgICAgICAgc3RhdHVzOiAnZG9uZScsCiAgICAgICAgdXJsOiAnaHR0cDovL3d3dy5iYWlkdS5jb20veXl5LnBuZycsCiAgICAgIH0sCiAgICAgIHsKICAgICAgICB1aWQ6ICczJywKICAgICAgICBuYW1lOiAnenp6LnBuZycsCiAgICAgICAgc3RhdHVzOiAnZXJyb3InLAogICAgICAgIHJlc3BvbnNlOiAnU2VydmVyIEVycm9yIDUwMCcsIC8vIGN1c3RvbSBlcnJvciBtZXNzYWdlIHRvIHNob3cKICAgICAgICB1cmw6ICdodHRwOi8vd3d3LmJhaWR1LmNvbS96enoucG5nJywKICAgICAgfSwKICAgIF0pOwoKICAgIGNvbnN0IGhhbmRsZUNoYW5nZSA9ICh7IGZpbGUsIGZpbGVMaXN0IH06IEZpbGVJbmZvKSA9PiB7CiAgICAgIGlmIChmaWxlLnN0YXR1cyAhPT0gJ3VwbG9hZGluZycpIHsKICAgICAgICBjb25zb2xlLmxvZyhmaWxlLCBmaWxlTGlzdCk7CiAgICAgIH0KICAgIH07CiAgICByZXR1cm4gewogICAgICBmaWxlTGlzdCwKICAgICAgaGFuZGxlQ2hhbmdlLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXVwbG9hZCBhY3Rpb249Imh0dHBzOi8vd3d3Lm1vY2t5LmlvL3YyLzVjYzgwMTlkMzAwMDAwOTgwYTA1NWU3NiIgdi1tb2RlbDpmaWxlLWxpc3Q9ImZpbGVMaXN0Ij4KICAgIDxhLWJ1dHRvbj4KICAgICAgPHVwbG9hZC1vdXRsaW5lZD48L3VwbG9hZC1vdXRsaW5lZD4KICAgICAgVXBsb2FkCiAgICA8L2EtYnV0dG9uPgogIDwvYS11cGxvYWQ+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IFVwbG9hZE91dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYgfSBmcm9tICd2dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIFVwbG9hZE91dGxpbmVkLAogIH0sCiAgc2V0dXAoKSB7CiAgICBjb25zdCBmaWxlTGlzdCA9IHJlZihbCiAgICAgIHsKICAgICAgICB1aWQ6ICcxJywKICAgICAgICBuYW1lOiAneHh4LnBuZycsCiAgICAgICAgc3RhdHVzOiAnZG9uZScsCiAgICAgICAgcmVzcG9uc2U6ICdTZXJ2ZXIgRXJyb3IgNTAwJywKICAgICAgICAvLyBjdXN0b20gZXJyb3IgbWVzc2FnZSB0byBzaG93CiAgICAgICAgdXJsOiAnaHR0cDovL3d3dy5iYWlkdS5jb20veHh4LnBuZycsCiAgICAgIH0sCiAgICAgIHsKICAgICAgICB1aWQ6ICcyJywKICAgICAgICBuYW1lOiAneXl5LnBuZycsCiAgICAgICAgc3RhdHVzOiAnZG9uZScsCiAgICAgICAgdXJsOiAnaHR0cDovL3d3dy5iYWlkdS5jb20veXl5LnBuZycsCiAgICAgIH0sCiAgICAgIHsKICAgICAgICB1aWQ6ICczJywKICAgICAgICBuYW1lOiAnenp6LnBuZycsCiAgICAgICAgc3RhdHVzOiAnZXJyb3InLAogICAgICAgIHJlc3BvbnNlOiAnU2VydmVyIEVycm9yIDUwMCcsCiAgICAgICAgLy8gY3VzdG9tIGVycm9yIG1lc3NhZ2UgdG8gc2hvdwogICAgICAgIHVybDogJ2h0dHA6Ly93d3cuYmFpZHUuY29tL3p6ei5wbmcnLAogICAgICB9LAogICAgXSk7CiAgICBjb25zdCBoYW5kbGVDaGFuZ2UgPSAoeyBmaWxlLCBmaWxlTGlzdCB9KSA9PiB7CiAgICAgIGlmIChmaWxlLnN0YXR1cyAhPT0gJ3VwbG9hZGluZycpIHsKICAgICAgICBjb25zb2xlLmxvZyhmaWxlLCBmaWxlTGlzdCk7CiAgICAgIH0KICAgIH07CiAgICByZXR1cm4gewogICAgICBmaWxlTGlzdCwKICAgICAgaGFuZGxlQ2hhbmdlLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:o(()=>[l(g,{action:"https://www.mocky.io/v2/5cc8019d300000980a055e76","file-list":t.fileList,"onUpdate:fileList":a[0]||(a[0]=I=>t.fileList=I)},{default:o(()=>[l(k,null,{default:o(()=>[l(c),a[1]||(a[1]=s(" Upload "))]),_:1,__:[1]})]),_:1},8,["file-list"])]),htmlCode:o(()=>a[2]||(a[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    325. 

  325.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("https://www.mocky.io/v2/5cc8019d300000980a055e76"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),s("file-list")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(`
    326. 

  326.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    327. 

  327.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    328. 

  328.       Upload
    329. 

  329.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    330. 

  330.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    331. 

  331. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    332. 

  332. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),s(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    333. 

  333. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" UploadOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    334. 

  334. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent"),n("span",{class:"token punctuation"},","),s(" ref "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    335. 

  335. 

  336. `),n("span",{class:"token keyword"},"interface"),s(),n("span",{class:"token class-name"},"FileItem"),s(),n("span",{class:"token punctuation"},"{"),s(`
    337. 

  337.   `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    338. 

  338.   name`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    339. 

  339.   status`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    340. 

  340.   response`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    341. 

  341.   url`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    342. 

  342. `),n("span",{class:"token punctuation"},"}"),s(`
    343. 

  343. `),n("span",{class:"token keyword"},"interface"),s(),n("span",{class:"token class-name"},"FileInfo"),s(),n("span",{class:"token punctuation"},"{"),s(`
    344. 

  344.   `),n("span",{class:"token literal-property property"},"file"),n("span",{class:"token operator"},":"),s(" FileItem"),n("span",{class:"token punctuation"},";"),s(`
    345. 

  345.   `),n("span",{class:"token literal-property property"},"fileList"),n("span",{class:"token operator"},":"),s(" FileItem"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),s(`
    346. 

  346. `),n("span",{class:"token punctuation"},"}"),s(`
    347. 

  347. 

  348. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    349. 

  349.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    350. 

  350.     UploadOutlined`),n("span",{class:"token punctuation"},","),s(`
    351. 

  351.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    352. 

  352.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    353. 

  353.     `),n("span",{class:"token keyword"},"const"),s(" fileList "),n("span",{class:"token operator"},"="),s(" ref"),n("span",{class:"token operator"},"<"),s("FileItem"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),s(`
    354. 

  354.       `),n("span",{class:"token punctuation"},"{"),s(`
    355. 

  355.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},","),s(`
    356. 

  356.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'xxx.png'"),n("span",{class:"token punctuation"},","),s(`
    357. 

  357.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    358. 

  358.         `),n("span",{class:"token literal-property property"},"response"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'Server Error 500'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token comment"},"// custom error message to show"),s(`
    359. 

  359.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'http://www.baidu.com/xxx.png'"),n("span",{class:"token punctuation"},","),s(`
    360. 

  360.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    361. 

  361.       `),n("span",{class:"token punctuation"},"{"),s(`
    362. 

  362.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'2'"),n("span",{class:"token punctuation"},","),s(`
    363. 

  363.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'yyy.png'"),n("span",{class:"token punctuation"},","),s(`
    364. 

  364.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    365. 

  365.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'http://www.baidu.com/yyy.png'"),n("span",{class:"token punctuation"},","),s(`
    366. 

  366.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    367. 

  367.       `),n("span",{class:"token punctuation"},"{"),s(`
    368. 

  368.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'3'"),n("span",{class:"token punctuation"},","),s(`
    369. 

  369.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'zzz.png'"),n("span",{class:"token punctuation"},","),s(`
    370. 

  370.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},","),s(`
    371. 

  371.         `),n("span",{class:"token literal-property property"},"response"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'Server Error 500'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token comment"},"// custom error message to show"),s(`
    372. 

  372.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'http://www.baidu.com/zzz.png'"),n("span",{class:"token punctuation"},","),s(`
    373. 

  373.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    374. 

  374.     `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    375. 

  375. 

  376.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"handleChange"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token punctuation"},"{"),s(" file"),n("span",{class:"token punctuation"},","),s(" fileList "),n("span",{class:"token punctuation"},"}"),n("span",{class:"token operator"},":"),s(" FileInfo")]),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    377. 

  377.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("file"),n("span",{class:"token punctuation"},"."),s("status "),n("span",{class:"token operator"},"!=="),s(),n("span",{class:"token string"},"'uploading'"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    378. 

  378.         console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),s("file"),n("span",{class:"token punctuation"},","),s(" fileList"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    379. 

  379.       `),n("span",{class:"token punctuation"},"}"),s(`
    380. 

  380.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    381. 

  381.     `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
    382. 

  382.       fileList`),n("span",{class:"token punctuation"},","),s(`
    383. 

  383.       handleChange`),n("span",{class:"token punctuation"},","),s(`
    384. 

  384.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    385. 

  385.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    386. 

  386. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    387. 

  387. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    388. 

  388. `)])],-1)])),jsVersionHtml:o(()=>a[3]||(a[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    389. 

  389.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("https://www.mocky.io/v2/5cc8019d300000980a055e76"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),s("file-list")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(`
    390. 

  390.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    391. 

  391.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    392. 

  392.       Upload
    393. 

  393.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    394. 

  394.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    395. 

  395. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    396. 

  396. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    397. 

  397. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" UploadOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    398. 

  398. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent"),n("span",{class:"token punctuation"},","),s(" ref "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    399. 

  399. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    400. 

  400.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    401. 

  401.     UploadOutlined`),n("span",{class:"token punctuation"},","),s(`
    402. 

  402.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    403. 

  403.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    404. 

  404.     `),n("span",{class:"token keyword"},"const"),s(" fileList "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),s(`
    405. 

  405.       `),n("span",{class:"token punctuation"},"{"),s(`
    406. 

  406.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},","),s(`
    407. 

  407.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'xxx.png'"),n("span",{class:"token punctuation"},","),s(`
    408. 

  408.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    409. 

  409.         `),n("span",{class:"token literal-property property"},"response"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'Server Error 500'"),n("span",{class:"token punctuation"},","),s(`
    410. 

  410.         `),n("span",{class:"token comment"},"// custom error message to show"),s(`
    411. 

  411.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'http://www.baidu.com/xxx.png'"),n("span",{class:"token punctuation"},","),s(`
    412. 

  412.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    413. 

  413.       `),n("span",{class:"token punctuation"},"{"),s(`
    414. 

  414.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'2'"),n("span",{class:"token punctuation"},","),s(`
    415. 

  415.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'yyy.png'"),n("span",{class:"token punctuation"},","),s(`
    416. 

  416.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    417. 

  417.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'http://www.baidu.com/yyy.png'"),n("span",{class:"token punctuation"},","),s(`
    418. 

  418.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    419. 

  419.       `),n("span",{class:"token punctuation"},"{"),s(`
    420. 

  420.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'3'"),n("span",{class:"token punctuation"},","),s(`
    421. 

  421.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'zzz.png'"),n("span",{class:"token punctuation"},","),s(`
    422. 

  422.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},","),s(`
    423. 

  423.         `),n("span",{class:"token literal-property property"},"response"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'Server Error 500'"),n("span",{class:"token punctuation"},","),s(`
    424. 

  424.         `),n("span",{class:"token comment"},"// custom error message to show"),s(`
    425. 

  425.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'http://www.baidu.com/zzz.png'"),n("span",{class:"token punctuation"},","),s(`
    426. 

  426.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    427. 

  427.     `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    428. 

  428.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"handleChange"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token punctuation"},"{"),s(" file"),n("span",{class:"token punctuation"},","),s(" fileList "),n("span",{class:"token punctuation"},"}")]),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    429. 

  429.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("file"),n("span",{class:"token punctuation"},"."),s("status "),n("span",{class:"token operator"},"!=="),s(),n("span",{class:"token string"},"'uploading'"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    430. 

  430.         console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),s("file"),n("span",{class:"token punctuation"},","),s(" fileList"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    431. 

  431.       `),n("span",{class:"token punctuation"},"}"),s(`
    432. 

  432.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    433. 

  433.     `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
    434. 

  434.       fileList`),n("span",{class:"token punctuation"},","),s(`
    435. 

  435.       handleChange`),n("span",{class:"token punctuation"},","),s(`
    436. 

  436.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    437. 

  437.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    438. 

  438. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    439. 

  439. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    440. 

  440. `)])],-1)])),_:1})}var T=A(O,[["render",E]]);function M(t){return new Promise((a,p)=>{const u=new FileReader;u.readAsDataURL(t),u.onload=()=>a(u.result),u.onerror=r=>p(r)})}const q=y({components:{PlusOutlined:h},setup(){const t=m(!1),a=m(""),p=m([{uid:"-1",name:"image.png",status:"done",url:"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"},{uid:"-2",name:"image.png",status:"done",url:"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"},{uid:"-3",name:"image.png",status:"done",url:"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"},{uid:"-4",name:"image.png",status:"done",url:"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"},{uid:"-5",name:"image.png",status:"error"}]);return{previewVisible:t,previewImage:a,fileList:p,handleCancel:()=>{t.value=!1},handlePreview:async c=>{!c.url&&!c.preview&&(c.preview=await M(c.originFileObj)),a.value=c.url||c.preview,t.value=!0},handleChange:({fileList:c})=>{p.value=c}}}}),_={class:"clearfix"},$={key:0},nn=["src"];function sn(t,a,p,u,r,i){const c=e("plus-outlined"),k=e("a-upload"),g=e("a-modal"),d=e("demo-box");return C(),b(d,{jsfiddle:{us:"After users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation.",cn:"\u7528\u6237\u53EF\u4EE5\u4E0A\u4F20\u56FE\u7247\u5E76\u5728\u5217\u8868\u4E2D\u663E\u793A\u7F29\u7565\u56FE\u3002\u5F53\u4E0A\u4F20\u7167\u7247\u6570\u5230\u8FBE\u9650\u5236\u540E\uFF0C\u4E0A\u4F20\u6309\u94AE\u6D88\u5931\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
    441. 

  441. <p>\u7528\u6237\u53EF\u4EE5\u4E0A\u4F20\u56FE\u7247\u5E76\u5728\u5217\u8868\u4E2D\u663E\u793A\u7F29\u7565\u56FE\u3002\u5F53\u4E0A\u4F20\u7167\u7247\u6570\u5230\u8FBE\u9650\u5236\u540E\uFF0C\u4E0A\u4F20\u6309\u94AE\u6D88\u5931\u3002</p>
    442. 

  442. <h2 id="en-us">en-US</h2>
    443. 

  443. <p>After users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation.</p>
    444. 

  444. `,order:3,title:{"zh-CN":"\u7167\u7247\u5899","en-US":"Pictures Wall"},relativePath:"src/docs/upload/demo/picture-card.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXYgY2xhc3M9ImNsZWFyZml4Ij4KICAgIDxhLXVwbG9hZAogICAgICBhY3Rpb249Imh0dHBzOi8vd3d3Lm1vY2t5LmlvL3YyLzVjYzgwMTlkMzAwMDAwOTgwYTA1NWU3NiIKICAgICAgbGlzdC10eXBlPSJwaWN0dXJlLWNhcmQiCiAgICAgIHYtbW9kZWw6ZmlsZS1saXN0PSJmaWxlTGlzdCIKICAgICAgQHByZXZpZXc9ImhhbmRsZVByZXZpZXciCiAgICA+CiAgICAgIDxkaXYgdi1pZj0iZmlsZUxpc3QubGVuZ3RoIDwgOCI+CiAgICAgICAgPHBsdXMtb3V0bGluZWQgLz4KICAgICAgICA8ZGl2IGNsYXNzPSJhbnQtdXBsb2FkLXRleHQiPlVwbG9hZDwvZGl2PgogICAgICA8L2Rpdj4KICAgIDwvYS11cGxvYWQ+CiAgICA8YS1tb2RhbCA6dmlzaWJsZT0icHJldmlld1Zpc2libGUiIDpmb290ZXI9Im51bGwiIEBjYW5jZWw9ImhhbmRsZUNhbmNlbCI+CiAgICAgIDxpbWcgYWx0PSJleGFtcGxlIiBzdHlsZT0id2lkdGg6IDEwMCUiIDpzcmM9InByZXZpZXdJbWFnZSIgLz4KICAgIDwvYS1tb2RhbD4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IFBsdXNPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKCmZ1bmN0aW9uIGdldEJhc2U2NChmaWxlOiBGaWxlKSB7CiAgcmV0dXJuIG5ldyBQcm9taXNlKChyZXNvbHZlLCByZWplY3QpID0+IHsKICAgIGNvbnN0IHJlYWRlciA9IG5ldyBGaWxlUmVhZGVyKCk7CiAgICByZWFkZXIucmVhZEFzRGF0YVVSTChmaWxlKTsKICAgIHJlYWRlci5vbmxvYWQgPSAoKSA9PiByZXNvbHZlKHJlYWRlci5yZXN1bHQpOwogICAgcmVhZGVyLm9uZXJyb3IgPSBlcnJvciA9PiByZWplY3QoZXJyb3IpOwogIH0pOwp9CgppbnRlcmZhY2UgRmlsZUl0ZW0gewogIHVpZDogc3RyaW5nOwogIG5hbWU/OiBzdHJpbmc7CiAgc3RhdHVzPzogc3RyaW5nOwogIHJlc3BvbnNlPzogc3RyaW5nOwogIHBlcmNlbnQ/OiBudW1iZXI7CiAgdXJsPzogc3RyaW5nOwogIHByZXZpZXc/OiBzdHJpbmc7CiAgb3JpZ2luRmlsZU9iaj86IGFueTsKfQoKaW50ZXJmYWNlIEZpbGVJbmZvIHsKICBmaWxlOiBGaWxlSXRlbTsKICBmaWxlTGlzdDogRmlsZUl0ZW1bXTsKfQoKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBjb21wb25lbnRzOiB7CiAgICBQbHVzT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IHByZXZpZXdWaXNpYmxlID0gcmVmPGJvb2xlYW4+KGZhbHNlKTsKICAgIGNvbnN0IHByZXZpZXdJbWFnZSA9IHJlZjxzdHJpbmcgfCB1bmRlZmluZWQ+KCcnKTsKCiAgICBjb25zdCBmaWxlTGlzdCA9IHJlZjxGaWxlSXRlbVtdPihbCiAgICAgIHsKICAgICAgICB1aWQ6ICctMScsCiAgICAgICAgbmFtZTogJ2ltYWdlLnBuZycsCiAgICAgICAgc3RhdHVzOiAnZG9uZScsCiAgICAgICAgdXJsOiAnaHR0cHM6Ly96b3MuYWxpcGF5b2JqZWN0cy5jb20vcm1zcG9ydGFsL2pramdrRWZ2cFVQVnlSalVJbW5pVnNsWmZXUG5KdXVaLnBuZycsCiAgICAgIH0sCiAgICAgIHsKICAgICAgICB1aWQ6ICctMicsCiAgICAgICAgbmFtZTogJ2ltYWdlLnBuZycsCiAgICAgICAgc3RhdHVzOiAnZG9uZScsCiAgICAgICAgdXJsOiAnaHR0cHM6Ly96b3MuYWxpcGF5b2JqZWN0cy5jb20vcm1zcG9ydGFsL2pramdrRWZ2cFVQVnlSalVJbW5pVnNsWmZXUG5KdXVaLnBuZycsCiAgICAgIH0sCiAgICAgIHsKICAgICAgICB1aWQ6ICctMycsCiAgICAgICAgbmFtZTogJ2ltYWdlLnBuZycsCiAgICAgICAgc3RhdHVzOiAnZG9uZScsCiAgICAgICAgdXJsOiAnaHR0cHM6Ly96b3MuYWxpcGF5b2JqZWN0cy5jb20vcm1zcG9ydGFsL2pramdrRWZ2cFVQVnlSalVJbW5pVnNsWmZXUG5KdXVaLnBuZycsCiAgICAgIH0sCiAgICAgIHsKICAgICAgICB1aWQ6ICctNCcsCiAgICAgICAgbmFtZTogJ2ltYWdlLnBuZycsCiAgICAgICAgc3RhdHVzOiAnZG9uZScsCiAgICAgICAgdXJsOiAnaHR0cHM6Ly96b3MuYWxpcGF5b2JqZWN0cy5jb20vcm1zcG9ydGFsL2pramdrRWZ2cFVQVnlSalVJbW5pVnNsWmZXUG5KdXVaLnBuZycsCiAgICAgIH0sCiAgICAgIHsKICAgICAgICB1aWQ6ICctNScsCiAgICAgICAgbmFtZTogJ2ltYWdlLnBuZycsCiAgICAgICAgc3RhdHVzOiAnZXJyb3InLAogICAgICB9LAogICAgXSk7CgogICAgY29uc3QgaGFuZGxlQ2FuY2VsID0gKCkgPT4gewogICAgICBwcmV2aWV3VmlzaWJsZS52YWx1ZSA9IGZhbHNlOwogICAgfTsKICAgIGNvbnN0IGhhbmRsZVByZXZpZXcgPSBhc3luYyAoZmlsZTogRmlsZUl0ZW0pID0+IHsKICAgICAgaWYgKCFmaWxlLnVybCAmJiAhZmlsZS5wcmV2aWV3KSB7CiAgICAgICAgZmlsZS5wcmV2aWV3ID0gKGF3YWl0IGdldEJhc2U2NChmaWxlLm9yaWdpbkZpbGVPYmopKSBhcyBzdHJpbmc7CiAgICAgIH0KICAgICAgcHJldmlld0ltYWdlLnZhbHVlID0gZmlsZS51cmwgfHwgZmlsZS5wcmV2aWV3OwogICAgICBwcmV2aWV3VmlzaWJsZS52YWx1ZSA9IHRydWU7CiAgICB9OwogICAgY29uc3QgaGFuZGxlQ2hhbmdlID0gKHsgZmlsZUxpc3Q6IG5ld0ZpbGVMaXN0IH06IEZpbGVJbmZvKSA9PiB7CiAgICAgIGZpbGVMaXN0LnZhbHVlID0gbmV3RmlsZUxpc3Q7CiAgICB9OwoKICAgIHJldHVybiB7CiAgICAgIHByZXZpZXdWaXNpYmxlLAogICAgICBwcmV2aWV3SW1hZ2UsCiAgICAgIGZpbGVMaXN0LAogICAgICBoYW5kbGVDYW5jZWwsCiAgICAgIGhhbmRsZVByZXZpZXcsCiAgICAgIGhhbmRsZUNoYW5nZSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pgo8c3R5bGU+Ci8qIHlvdSBjYW4gbWFrZSB1cCB1cGxvYWQgYnV0dG9uIGFuZCBzYW1wbGUgc3R5bGUgYnkgdXNpbmcgc3R5bGVzaGVldHMgKi8KLmFudC11cGxvYWQtc2VsZWN0LXBpY3R1cmUtY2FyZCBpIHsKICBmb250LXNpemU6IDMycHg7CiAgY29sb3I6ICM5OTk7Cn0KCi5hbnQtdXBsb2FkLXNlbGVjdC1waWN0dXJlLWNhcmQgLmFudC11cGxvYWQtdGV4dCB7CiAgbWFyZ2luLXRvcDogOHB4OwogIGNvbG9yOiAjNjY2Owp9Cjwvc3R5bGU+Cg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXYgY2xhc3M9ImNsZWFyZml4Ij4KICAgIDxhLXVwbG9hZAogICAgICBhY3Rpb249Imh0dHBzOi8vd3d3Lm1vY2t5LmlvL3YyLzVjYzgwMTlkMzAwMDAwOTgwYTA1NWU3NiIKICAgICAgbGlzdC10eXBlPSJwaWN0dXJlLWNhcmQiCiAgICAgIHYtbW9kZWw6ZmlsZS1saXN0PSJmaWxlTGlzdCIKICAgICAgQHByZXZpZXc9ImhhbmRsZVByZXZpZXciCiAgICA+CiAgICAgIDxkaXYgdi1pZj0iZmlsZUxpc3QubGVuZ3RoIDwgOCI+CiAgICAgICAgPHBsdXMtb3V0bGluZWQgLz4KICAgICAgICA8ZGl2IGNsYXNzPSJhbnQtdXBsb2FkLXRleHQiPlVwbG9hZDwvZGl2PgogICAgICA8L2Rpdj4KICAgIDwvYS11cGxvYWQ+CiAgICA8YS1tb2RhbCA6dmlzaWJsZT0icHJldmlld1Zpc2libGUiIDpmb290ZXI9Im51bGwiIEBjYW5jZWw9ImhhbmRsZUNhbmNlbCI+CiAgICAgIDxpbWcgYWx0PSJleGFtcGxlIiBzdHlsZT0id2lkdGg6IDEwMCUiIDpzcmM9InByZXZpZXdJbWFnZSIgLz4KICAgIDwvYS1tb2RhbD4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgUGx1c091dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYgfSBmcm9tICd2dWUnOwpmdW5jdGlvbiBnZXRCYXNlNjQoZmlsZSkgewogIHJldHVybiBuZXcgUHJvbWlzZSgocmVzb2x2ZSwgcmVqZWN0KSA9PiB7CiAgICBjb25zdCByZWFkZXIgPSBuZXcgRmlsZVJlYWRlcigpOwogICAgcmVhZGVyLnJlYWRBc0RhdGFVUkwoZmlsZSk7CiAgICByZWFkZXIub25sb2FkID0gKCkgPT4gcmVzb2x2ZShyZWFkZXIucmVzdWx0KTsKICAgIHJlYWRlci5vbmVycm9yID0gZXJyb3IgPT4gcmVqZWN0KGVycm9yKTsKICB9KTsKfQpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIFBsdXNPdXRsaW5lZCwKICB9LAogIHNldHVwKCkgewogICAgY29uc3QgcHJldmlld1Zpc2libGUgPSByZWYoZmFsc2UpOwogICAgY29uc3QgcHJldmlld0ltYWdlID0gcmVmKCcnKTsKICAgIGNvbnN0IGZpbGVMaXN0ID0gcmVmKFsKICAgICAgewogICAgICAgIHVpZDogJy0xJywKICAgICAgICBuYW1lOiAnaW1hZ2UucG5nJywKICAgICAgICBzdGF0dXM6ICdkb25lJywKICAgICAgICB1cmw6ICdodHRwczovL3pvcy5hbGlwYXlvYmplY3RzLmNvbS9ybXNwb3J0YWwvamtqZ2tFZnZwVVBWeVJqVUltbmlWc2xaZldQbkp1dVoucG5nJywKICAgICAgfSwKICAgICAgewogICAgICAgIHVpZDogJy0yJywKICAgICAgICBuYW1lOiAnaW1hZ2UucG5nJywKICAgICAgICBzdGF0dXM6ICdkb25lJywKICAgICAgICB1cmw6ICdodHRwczovL3pvcy5hbGlwYXlvYmplY3RzLmNvbS9ybXNwb3J0YWwvamtqZ2tFZnZwVVBWeVJqVUltbmlWc2xaZldQbkp1dVoucG5nJywKICAgICAgfSwKICAgICAgewogICAgICAgIHVpZDogJy0zJywKICAgICAgICBuYW1lOiAnaW1hZ2UucG5nJywKICAgICAgICBzdGF0dXM6ICdkb25lJywKICAgICAgICB1cmw6ICdodHRwczovL3pvcy5hbGlwYXlvYmplY3RzLmNvbS9ybXNwb3J0YWwvamtqZ2tFZnZwVVBWeVJqVUltbmlWc2xaZldQbkp1dVoucG5nJywKICAgICAgfSwKICAgICAgewogICAgICAgIHVpZDogJy00JywKICAgICAgICBuYW1lOiAnaW1hZ2UucG5nJywKICAgICAgICBzdGF0dXM6ICdkb25lJywKICAgICAgICB1cmw6ICdodHRwczovL3pvcy5hbGlwYXlvYmplY3RzLmNvbS9ybXNwb3J0YWwvamtqZ2tFZnZwVVBWeVJqVUltbmlWc2xaZldQbkp1dVoucG5nJywKICAgICAgfSwKICAgICAgewogICAgICAgIHVpZDogJy01JywKICAgICAgICBuYW1lOiAnaW1hZ2UucG5nJywKICAgICAgICBzdGF0dXM6ICdlcnJvcicsCiAgICAgIH0sCiAgICBdKTsKICAgIGNvbnN0IGhhbmRsZUNhbmNlbCA9ICgpID0+IHsKICAgICAgcHJldmlld1Zpc2libGUudmFsdWUgPSBmYWxzZTsKICAgIH07CiAgICBjb25zdCBoYW5kbGVQcmV2aWV3ID0gYXN5bmMgZmlsZSA9PiB7CiAgICAgIGlmICghZmlsZS51cmwgJiYgIWZpbGUucHJldmlldykgewogICAgICAgIGZpbGUucHJldmlldyA9IGF3YWl0IGdldEJhc2U2NChmaWxlLm9yaWdpbkZpbGVPYmopOwogICAgICB9CiAgICAgIHByZXZpZXdJbWFnZS52YWx1ZSA9IGZpbGUudXJsIHx8IGZpbGUucHJldmlldzsKICAgICAgcHJldmlld1Zpc2libGUudmFsdWUgPSB0cnVlOwogICAgfTsKICAgIGNvbnN0IGhhbmRsZUNoYW5nZSA9ICh7IGZpbGVMaXN0OiBuZXdGaWxlTGlzdCB9KSA9PiB7CiAgICAgIGZpbGVMaXN0LnZhbHVlID0gbmV3RmlsZUxpc3Q7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgcHJldmlld1Zpc2libGUsCiAgICAgIHByZXZpZXdJbWFnZSwKICAgICAgZmlsZUxpc3QsCiAgICAgIGhhbmRsZUNhbmNlbCwKICAgICAgaGFuZGxlUHJldmlldywKICAgICAgaGFuZGxlQ2hhbmdlLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+CjxzdHlsZT4KLyogeW91IGNhbiBtYWtlIHVwIHVwbG9hZCBidXR0b24gYW5kIHNhbXBsZSBzdHlsZSBieSB1c2luZyBzdHlsZXNoZWV0cyAqLwouYW50LXVwbG9hZC1zZWxlY3QtcGljdHVyZS1jYXJkIGkgewogIGZvbnQtc2l6ZTogMzJweDsKICBjb2xvcjogIzk5OTsKfQoKLmFudC11cGxvYWQtc2VsZWN0LXBpY3R1cmUtY2FyZCAuYW50LXVwbG9hZC10ZXh0IHsKICBtYXJnaW4tdG9wOiA4cHg7CiAgY29sb3I6ICM2NjY7Cn0KPC9zdHlsZT4="}},{default:o(()=>[n("div",_,[l(k,{action:"https://www.mocky.io/v2/5cc8019d300000980a055e76","list-type":"picture-card","file-list":t.fileList,"onUpdate:fileList":a[0]||(a[0]=I=>t.fileList=I),onPreview:t.handlePreview},{default:o(()=>[t.fileList.length<8?(C(),w("div",$,[l(c),a[1]||(a[1]=n("div",{class:"ant-upload-text"},"Upload",-1))])):x("",!0)]),_:1},8,["file-list","onPreview"]),l(g,{visible:t.previewVisible,footer:null,onCancel:t.handleCancel},{default:o(()=>[n("img",{alt:"example",style:{width:"100%"},src:t.previewImage},null,8,nn)]),_:1},8,["visible","onCancel"])])]),htmlCode:o(()=>a[2]||(a[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    445. 

  445.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("div")]),s(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("clearfix"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(`
    446. 

  446.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(`
    447. 

  447.       `),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("https://www.mocky.io/v2/5cc8019d300000980a055e76"),n("span",{class:"token punctuation"},'"')]),s(`
    448. 

  448.       `),n("span",{class:"token attr-name"},"list-type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("picture-card"),n("span",{class:"token punctuation"},'"')]),s(`
    449. 

  449.       `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),s("file-list")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList"),n("span",{class:"token punctuation"},'"')]),s(`
    450. 

  450.       `),n("span",{class:"token attr-name"},"@preview"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("handlePreview"),n("span",{class:"token punctuation"},'"')]),s(`
    451. 

  451.     `),n("span",{class:"token punctuation"},">")]),s(`
    452. 

  452.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("div")]),s(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList.length < 8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(`
    453. 

  453.         `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("plus-outlined")]),s(),n("span",{class:"token punctuation"},"/>")]),s(`
    454. 

  454.         `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("div")]),s(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ant-upload-text"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s("Upload"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    455. 

  455.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    456. 

  456.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    457. 

  457.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-modal")]),s(),n("span",{class:"token attr-name"},":visible"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("previewVisible"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token attr-name"},":footer"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("null"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token attr-name"},"@cancel"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("handleCancel"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(`
    458. 

  458.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("img")]),s(),n("span",{class:"token attr-name"},"alt"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("example"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),s(" 100%")]),n("span",{class:"token punctuation"},'"')])]),s(),n("span",{class:"token attr-name"},":src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("previewImage"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token punctuation"},"/>")]),s(`
    459. 

  459.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-modal")]),n("span",{class:"token punctuation"},">")]),s(`
    460. 

  460.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    461. 

  461. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    462. 

  462. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),s(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    463. 

  463. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" PlusOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    464. 

  464. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent"),n("span",{class:"token punctuation"},","),s(" ref "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    465. 

  465. 

  466. `),n("span",{class:"token keyword"},"function"),s(),n("span",{class:"token function"},"getBase64"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"file"),n("span",{class:"token operator"},":"),s(" File")]),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    467. 

  467.   `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token keyword"},"new"),s(),n("span",{class:"token class-name"},"Promise"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[s("resolve"),n("span",{class:"token punctuation"},","),s(" reject")]),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    468. 

  468.     `),n("span",{class:"token keyword"},"const"),s(" reader "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token keyword"},"new"),s(),n("span",{class:"token class-name"},"FileReader"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    469. 

  469.     reader`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"readAsDataURL"),n("span",{class:"token punctuation"},"("),s("file"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    470. 

  470.     reader`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function-variable function"},"onload"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token function"},"resolve"),n("span",{class:"token punctuation"},"("),s("reader"),n("span",{class:"token punctuation"},"."),s("result"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    471. 

  471.     reader`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function-variable function"},"onerror"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token parameter"},"error"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token function"},"reject"),n("span",{class:"token punctuation"},"("),s("error"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    472. 

  472.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    473. 

  473. `),n("span",{class:"token punctuation"},"}"),s(`
    474. 

  474. 

  475. `),n("span",{class:"token keyword"},"interface"),s(),n("span",{class:"token class-name"},"FileItem"),s(),n("span",{class:"token punctuation"},"{"),s(`
    476. 

  476.   `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    477. 

  477.   name`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    478. 

  478.   status`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    479. 

  479.   response`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    480. 

  480.   percent`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" number"),n("span",{class:"token punctuation"},";"),s(`
    481. 

  481.   url`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    482. 

  482.   preview`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    483. 

  483.   originFileObj`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" any"),n("span",{class:"token punctuation"},";"),s(`
    484. 

  484. `),n("span",{class:"token punctuation"},"}"),s(`
    485. 

  485. 

  486. `),n("span",{class:"token keyword"},"interface"),s(),n("span",{class:"token class-name"},"FileInfo"),s(),n("span",{class:"token punctuation"},"{"),s(`
    487. 

  487.   `),n("span",{class:"token literal-property property"},"file"),n("span",{class:"token operator"},":"),s(" FileItem"),n("span",{class:"token punctuation"},";"),s(`
    488. 

  488.   `),n("span",{class:"token literal-property property"},"fileList"),n("span",{class:"token operator"},":"),s(" FileItem"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),s(`
    489. 

  489. `),n("span",{class:"token punctuation"},"}"),s(`
    490. 

  490. 

  491. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    492. 

  492.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    493. 

  493.     PlusOutlined`),n("span",{class:"token punctuation"},","),s(`
    494. 

  494.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    495. 

  495.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    496. 

  496.     `),n("span",{class:"token keyword"},"const"),s(" previewVisible "),n("span",{class:"token operator"},"="),s(" ref"),n("span",{class:"token operator"},"<"),s("boolean"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    497. 

  497.     `),n("span",{class:"token keyword"},"const"),s(" previewImage "),n("span",{class:"token operator"},"="),s(" ref"),n("span",{class:"token operator"},"<"),s("string "),n("span",{class:"token operator"},"|"),s(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    498. 

  498. 

  499.     `),n("span",{class:"token keyword"},"const"),s(" fileList "),n("span",{class:"token operator"},"="),s(" ref"),n("span",{class:"token operator"},"<"),s("FileItem"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),s(`
    500. 

  500.       `),n("span",{class:"token punctuation"},"{"),s(`
    501. 

  501.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'-1'"),n("span",{class:"token punctuation"},","),s(`
    502. 

  502.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'image.png'"),n("span",{class:"token punctuation"},","),s(`
    503. 

  503.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    504. 

  504.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    505. 

  505.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    506. 

  506.       `),n("span",{class:"token punctuation"},"{"),s(`
    507. 

  507.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'-2'"),n("span",{class:"token punctuation"},","),s(`
    508. 

  508.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'image.png'"),n("span",{class:"token punctuation"},","),s(`
    509. 

  509.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    510. 

  510.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    511. 

  511.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    512. 

  512.       `),n("span",{class:"token punctuation"},"{"),s(`
    513. 

  513.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'-3'"),n("span",{class:"token punctuation"},","),s(`
    514. 

  514.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'image.png'"),n("span",{class:"token punctuation"},","),s(`
    515. 

  515.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    516. 

  516.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    517. 

  517.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    518. 

  518.       `),n("span",{class:"token punctuation"},"{"),s(`
    519. 

  519.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'-4'"),n("span",{class:"token punctuation"},","),s(`
    520. 

  520.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'image.png'"),n("span",{class:"token punctuation"},","),s(`
    521. 

  521.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    522. 

  522.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    523. 

  523.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    524. 

  524.       `),n("span",{class:"token punctuation"},"{"),s(`
    525. 

  525.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'-5'"),n("span",{class:"token punctuation"},","),s(`
    526. 

  526.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'image.png'"),n("span",{class:"token punctuation"},","),s(`
    527. 

  527.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},","),s(`
    528. 

  528.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    529. 

  529.     `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    530. 

  530. 

  531.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"handleCancel"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    532. 

  532.       previewVisible`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),s(`
    533. 

  533.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    534. 

  534.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"handlePreview"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token keyword"},"async"),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"file"),n("span",{class:"token operator"},":"),s(" FileItem")]),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    535. 

  535.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token operator"},"!"),s("file"),n("span",{class:"token punctuation"},"."),s("url "),n("span",{class:"token operator"},"&&"),s(),n("span",{class:"token operator"},"!"),s("file"),n("span",{class:"token punctuation"},"."),s("preview"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    536. 

  536.         file`),n("span",{class:"token punctuation"},"."),s("preview "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token keyword"},"await"),s(),n("span",{class:"token function"},"getBase64"),n("span",{class:"token punctuation"},"("),s("file"),n("span",{class:"token punctuation"},"."),s("originFileObj"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token keyword"},"as"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    537. 

  537.       `),n("span",{class:"token punctuation"},"}"),s(`
    538. 

  538.       previewImage`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(" file"),n("span",{class:"token punctuation"},"."),s("url "),n("span",{class:"token operator"},"||"),s(" file"),n("span",{class:"token punctuation"},"."),s("preview"),n("span",{class:"token punctuation"},";"),s(`
    539. 

  539.       previewVisible`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),s(`
    540. 

  540.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    541. 

  541.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"handleChange"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token punctuation"},"{"),s(),n("span",{class:"token literal-property property"},"fileList"),n("span",{class:"token operator"},":"),s(" newFileList "),n("span",{class:"token punctuation"},"}"),n("span",{class:"token operator"},":"),s(" FileInfo")]),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    542. 

  542.       fileList`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(" newFileList"),n("span",{class:"token punctuation"},";"),s(`
    543. 

  543.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    544. 

  544. 

  545.     `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
    546. 

  546.       previewVisible`),n("span",{class:"token punctuation"},","),s(`
    547. 

  547.       previewImage`),n("span",{class:"token punctuation"},","),s(`
    548. 

  548.       fileList`),n("span",{class:"token punctuation"},","),s(`
    549. 

  549.       handleCancel`),n("span",{class:"token punctuation"},","),s(`
    550. 

  550.       handlePreview`),n("span",{class:"token punctuation"},","),s(`
    551. 

  551.       handleChange`),n("span",{class:"token punctuation"},","),s(`
    552. 

  552.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    553. 

  553.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    554. 

  554. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    555. 

  555. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    556. 

  556. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("style")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[s(`
    557. 

  557. `),n("span",{class:"token comment"},"/* you can make up upload button and sample style by using stylesheets */"),s(`
    558. 

  558. `),n("span",{class:"token selector"},".ant-upload-select-picture-card i"),s(),n("span",{class:"token punctuation"},"{"),s(`
    559. 

  559.   `),n("span",{class:"token property"},"font-size"),n("span",{class:"token punctuation"},":"),s(" 32px"),n("span",{class:"token punctuation"},";"),s(`
    560. 

  560.   `),n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),s(" #999"),n("span",{class:"token punctuation"},";"),s(`
    561. 

  561. `),n("span",{class:"token punctuation"},"}"),s(`
    562. 

  562. 

  563. `),n("span",{class:"token selector"},".ant-upload-select-picture-card .ant-upload-text"),s(),n("span",{class:"token punctuation"},"{"),s(`
    564. 

  564.   `),n("span",{class:"token property"},"margin-top"),n("span",{class:"token punctuation"},":"),s(" 8px"),n("span",{class:"token punctuation"},";"),s(`
    565. 

  565.   `),n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),s(" #666"),n("span",{class:"token punctuation"},";"),s(`
    566. 

  566. `),n("span",{class:"token punctuation"},"}"),s(`
    567. 

  567. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("style")]),n("span",{class:"token punctuation"},">")]),s(`
    568. 

  568. `)])],-1)])),jsVersionHtml:o(()=>a[3]||(a[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    569. 

  569.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("div")]),s(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("clearfix"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(`
    570. 

  570.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(`
    571. 

  571.       `),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("https://www.mocky.io/v2/5cc8019d300000980a055e76"),n("span",{class:"token punctuation"},'"')]),s(`
    572. 

  572.       `),n("span",{class:"token attr-name"},"list-type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("picture-card"),n("span",{class:"token punctuation"},'"')]),s(`
    573. 

  573.       `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),s("file-list")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList"),n("span",{class:"token punctuation"},'"')]),s(`
    574. 

  574.       `),n("span",{class:"token attr-name"},"@preview"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("handlePreview"),n("span",{class:"token punctuation"},'"')]),s(`
    575. 

  575.     `),n("span",{class:"token punctuation"},">")]),s(`
    576. 

  576.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("div")]),s(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList.length < 8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(`
    577. 

  577.         `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("plus-outlined")]),s(),n("span",{class:"token punctuation"},"/>")]),s(`
    578. 

  578.         `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("div")]),s(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ant-upload-text"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s("Upload"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    579. 

  579.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    580. 

  580.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    581. 

  581.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-modal")]),s(),n("span",{class:"token attr-name"},":visible"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("previewVisible"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token attr-name"},":footer"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("null"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token attr-name"},"@cancel"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("handleCancel"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(`
    582. 

  582.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("img")]),s(),n("span",{class:"token attr-name"},"alt"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("example"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),s(" 100%")]),n("span",{class:"token punctuation"},'"')])]),s(),n("span",{class:"token attr-name"},":src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("previewImage"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token punctuation"},"/>")]),s(`
    583. 

  583.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-modal")]),n("span",{class:"token punctuation"},">")]),s(`
    584. 

  584.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    585. 

  585. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    586. 

  586. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    587. 

  587. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" PlusOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    588. 

  588. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent"),n("span",{class:"token punctuation"},","),s(" ref "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    589. 

  589. `),n("span",{class:"token keyword"},"function"),s(),n("span",{class:"token function"},"getBase64"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"file"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    590. 

  590.   `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token keyword"},"new"),s(),n("span",{class:"token class-name"},"Promise"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[s("resolve"),n("span",{class:"token punctuation"},","),s(" reject")]),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    591. 

  591.     `),n("span",{class:"token keyword"},"const"),s(" reader "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token keyword"},"new"),s(),n("span",{class:"token class-name"},"FileReader"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    592. 

  592.     reader`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"readAsDataURL"),n("span",{class:"token punctuation"},"("),s("file"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    593. 

  593.     reader`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function-variable function"},"onload"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token function"},"resolve"),n("span",{class:"token punctuation"},"("),s("reader"),n("span",{class:"token punctuation"},"."),s("result"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    594. 

  594.     reader`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function-variable function"},"onerror"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token parameter"},"error"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token function"},"reject"),n("span",{class:"token punctuation"},"("),s("error"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    595. 

  595.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    596. 

  596. `),n("span",{class:"token punctuation"},"}"),s(`
    597. 

  597. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    598. 

  598.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    599. 

  599.     PlusOutlined`),n("span",{class:"token punctuation"},","),s(`
    600. 

  600.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    601. 

  601.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    602. 

  602.     `),n("span",{class:"token keyword"},"const"),s(" previewVisible "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    603. 

  603.     `),n("span",{class:"token keyword"},"const"),s(" previewImage "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    604. 

  604.     `),n("span",{class:"token keyword"},"const"),s(" fileList "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),s(`
    605. 

  605.       `),n("span",{class:"token punctuation"},"{"),s(`
    606. 

  606.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'-1'"),n("span",{class:"token punctuation"},","),s(`
    607. 

  607.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'image.png'"),n("span",{class:"token punctuation"},","),s(`
    608. 

  608.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    609. 

  609.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    610. 

  610.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    611. 

  611.       `),n("span",{class:"token punctuation"},"{"),s(`
    612. 

  612.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'-2'"),n("span",{class:"token punctuation"},","),s(`
    613. 

  613.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'image.png'"),n("span",{class:"token punctuation"},","),s(`
    614. 

  614.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    615. 

  615.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    616. 

  616.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    617. 

  617.       `),n("span",{class:"token punctuation"},"{"),s(`
    618. 

  618.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'-3'"),n("span",{class:"token punctuation"},","),s(`
    619. 

  619.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'image.png'"),n("span",{class:"token punctuation"},","),s(`
    620. 

  620.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    621. 

  621.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    622. 

  622.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    623. 

  623.       `),n("span",{class:"token punctuation"},"{"),s(`
    624. 

  624.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'-4'"),n("span",{class:"token punctuation"},","),s(`
    625. 

  625.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'image.png'"),n("span",{class:"token punctuation"},","),s(`
    626. 

  626.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    627. 

  627.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    628. 

  628.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    629. 

  629.       `),n("span",{class:"token punctuation"},"{"),s(`
    630. 

  630.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'-5'"),n("span",{class:"token punctuation"},","),s(`
    631. 

  631.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'image.png'"),n("span",{class:"token punctuation"},","),s(`
    632. 

  632.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},","),s(`
    633. 

  633.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    634. 

  634.     `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    635. 

  635.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"handleCancel"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    636. 

  636.       previewVisible`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),s(`
    637. 

  637.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    638. 

  638.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"handlePreview"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token keyword"},"async"),s(),n("span",{class:"token parameter"},"file"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    639. 

  639.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token operator"},"!"),s("file"),n("span",{class:"token punctuation"},"."),s("url "),n("span",{class:"token operator"},"&&"),s(),n("span",{class:"token operator"},"!"),s("file"),n("span",{class:"token punctuation"},"."),s("preview"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    640. 

  640.         file`),n("span",{class:"token punctuation"},"."),s("preview "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token keyword"},"await"),s(),n("span",{class:"token function"},"getBase64"),n("span",{class:"token punctuation"},"("),s("file"),n("span",{class:"token punctuation"},"."),s("originFileObj"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    641. 

  641.       `),n("span",{class:"token punctuation"},"}"),s(`
    642. 

  642.       previewImage`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(" file"),n("span",{class:"token punctuation"},"."),s("url "),n("span",{class:"token operator"},"||"),s(" file"),n("span",{class:"token punctuation"},"."),s("preview"),n("span",{class:"token punctuation"},";"),s(`
    643. 

  643.       previewVisible`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),s(`
    644. 

  644.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    645. 

  645.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"handleChange"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token punctuation"},"{"),s(),n("span",{class:"token literal-property property"},"fileList"),n("span",{class:"token operator"},":"),s(" newFileList "),n("span",{class:"token punctuation"},"}")]),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    646. 

  646.       fileList`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(" newFileList"),n("span",{class:"token punctuation"},";"),s(`
    647. 

  647.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    648. 

  648.     `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
    649. 

  649.       previewVisible`),n("span",{class:"token punctuation"},","),s(`
    650. 

  650.       previewImage`),n("span",{class:"token punctuation"},","),s(`
    651. 

  651.       fileList`),n("span",{class:"token punctuation"},","),s(`
    652. 

  652.       handleCancel`),n("span",{class:"token punctuation"},","),s(`
    653. 

  653.       handlePreview`),n("span",{class:"token punctuation"},","),s(`
    654. 

  654.       handleChange`),n("span",{class:"token punctuation"},","),s(`
    655. 

  655.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    656. 

  656.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    657. 

  657. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    658. 

  658. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    659. 

  659. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("style")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[s(`
    660. 

  660. `),n("span",{class:"token comment"},"/* you can make up upload button and sample style by using stylesheets */"),s(`
    661. 

  661. `),n("span",{class:"token selector"},".ant-upload-select-picture-card i"),s(),n("span",{class:"token punctuation"},"{"),s(`
    662. 

  662.   `),n("span",{class:"token property"},"font-size"),n("span",{class:"token punctuation"},":"),s(" 32px"),n("span",{class:"token punctuation"},";"),s(`
    663. 

  663.   `),n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),s(" #999"),n("span",{class:"token punctuation"},";"),s(`
    664. 

  664. `),n("span",{class:"token punctuation"},"}"),s(`
    665. 

  665. 

  666. `),n("span",{class:"token selector"},".ant-upload-select-picture-card .ant-upload-text"),s(),n("span",{class:"token punctuation"},"{"),s(`
    667. 

  667.   `),n("span",{class:"token property"},"margin-top"),n("span",{class:"token punctuation"},":"),s(" 8px"),n("span",{class:"token punctuation"},";"),s(`
    668. 

  668.   `),n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),s(" #666"),n("span",{class:"token punctuation"},";"),s(`
    669. 

  669. `),n("span",{class:"token punctuation"},"}"),s(`
    670. 

  670. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("style")]),n("span",{class:"token punctuation"},">")]),s(`
    671. 

  671. `)])],-1)])),_:1})}var an=A(q,[["render",sn]]);const tn=y({components:{UploadOutlined:f},setup(){const t=m([{uid:"-1",name:"xxx.png",status:"done",url:"http://www.baidu.com/xxx.png"}]);return{fileList:t,handleChange:p=>{let u=[...p.fileList];u=u.slice(-2),u=u.map(r=>(r.response&&(r.url=r.response.url),r)),t.value=u}}}});function on(t,a,p,u,r,i){const c=e("upload-outlined"),k=e("a-button"),g=e("a-upload"),d=e("demo-box");return C(),b(d,{jsfiddle:{us:"You can gain full control over filelist by configuring `fileList`. You can accomplish all kinds of customed functions. The following shows two circumstances:",cn:"\u4F7F\u7528 `fileList` \u5BF9\u5217\u8868\u8FDB\u884C\u5B8C\u5168\u63A7\u5236\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u5404\u79CD\u81EA\u5B9A\u4E49\u529F\u80FD\uFF0C\u4EE5\u4E0B\u6F14\u793A\u4E8C\u79CD\u60C5\u51B5\uFF1A",docHtml:`<h2 id="zh-cn">zh-CN</h2>
    672. 

  672. <p>\u4F7F\u7528 <code>fileList</code> \u5BF9\u5217\u8868\u8FDB\u884C\u5B8C\u5168\u63A7\u5236\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u5404\u79CD\u81EA\u5B9A\u4E49\u529F\u80FD\uFF0C\u4EE5\u4E0B\u6F14\u793A\u4E8C\u79CD\u60C5\u51B5\uFF1A</p>
    673. 

  673. <ol>
    674. 

  674. <li>
    675. 

  675. <p>\u4E0A\u4F20\u5217\u8868\u6570\u91CF\u7684\u9650\u5236\u3002</p>
    676. 

  676. </li>
    677. 

  677. <li>
    678. 

  678. <p>\u8BFB\u53D6\u8FDC\u7A0B\u8DEF\u5F84\u5E76\u663E\u793A\u94FE\u63A5\u3002</p>
    679. 

  679. </li>
    680. 

  680. </ol>
    681. 

  681. <h2 id="en-us">en-US</h2>
    682. 

  682. <p>You can gain full control over filelist by configuring <code>fileList</code>. You can accomplish all kinds of customed functions. The following shows two circumstances:</p>
    683. 

  683. <ol>
    684. 

  684. <li>
    685. 

  685. <p>limit the number of uploaded files.</p>
    686. 

  686. </li>
    687. 

  687. <li>
    688. 

  688. <p>read from response and show file link.</p>
    689. 

  689. </li>
    690. 

  690. </ol>
    691. 

  691. `,order:4,title:{"zh-CN":"\u5B8C\u5168\u63A7\u5236\u7684\u4E0A\u4F20\u5217\u8868","en-US":"Complete control over file list"},relativePath:"src/docs/upload/demo/fileList.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXVwbG9hZAogICAgYWN0aW9uPSJodHRwczovL3d3dy5tb2NreS5pby92Mi81Y2M4MDE5ZDMwMDAwMDk4MGEwNTVlNzYiCiAgICA6bXVsdGlwbGU9InRydWUiCiAgICA6ZmlsZS1saXN0PSJmaWxlTGlzdCIKICAgIEBjaGFuZ2U9ImhhbmRsZUNoYW5nZSIKICA+CiAgICA8YS1idXR0b24+CiAgICAgIDx1cGxvYWQtb3V0bGluZWQ+PC91cGxvYWQtb3V0bGluZWQ+CiAgICAgIFVwbG9hZAogICAgPC9hLWJ1dHRvbj4KICA8L2EtdXBsb2FkPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgVXBsb2FkT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CgppbnRlcmZhY2UgRmlsZUl0ZW0gewogIHVpZDogc3RyaW5nOwogIG5hbWU/OiBzdHJpbmc7CiAgc3RhdHVzPzogc3RyaW5nOwogIHJlc3BvbnNlPzogUmVzcG9uc2U7CiAgdXJsOiBzdHJpbmc7Cn0KCmludGVyZmFjZSBGaWxlSW5mbyB7CiAgZmlsZTogRmlsZUl0ZW07CiAgZmlsZUxpc3Q6IEZpbGVJdGVtW107Cn0KCmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgVXBsb2FkT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IGZpbGVMaXN0ID0gcmVmPEZpbGVJdGVtW10+KFsKICAgICAgewogICAgICAgIHVpZDogJy0xJywKICAgICAgICBuYW1lOiAneHh4LnBuZycsCiAgICAgICAgc3RhdHVzOiAnZG9uZScsCiAgICAgICAgdXJsOiAnaHR0cDovL3d3dy5iYWlkdS5jb20veHh4LnBuZycsCiAgICAgIH0sCiAgICBdKTsKICAgIGNvbnN0IGhhbmRsZUNoYW5nZSA9IChpbmZvOiBGaWxlSW5mbykgPT4gewogICAgICBsZXQgcmVzRmlsZUxpc3QgPSBbLi4uaW5mby5maWxlTGlzdF07CgogICAgICAvLyAxLiBMaW1pdCB0aGUgbnVtYmVyIG9mIHVwbG9hZGVkIGZpbGVzCiAgICAgIC8vICAgIE9ubHkgdG8gc2hvdyB0d28gcmVjZW50IHVwbG9hZGVkIGZpbGVzLCBhbmQgb2xkIG9uZXMgd2lsbCBiZSByZXBsYWNlZCBieSB0aGUgbmV3CiAgICAgIHJlc0ZpbGVMaXN0ID0gcmVzRmlsZUxpc3Quc2xpY2UoLTIpOwoKICAgICAgLy8gMi4gcmVhZCBmcm9tIHJlc3BvbnNlIGFuZCBzaG93IGZpbGUgbGluawogICAgICByZXNGaWxlTGlzdCA9IHJlc0ZpbGVMaXN0Lm1hcChmaWxlID0+IHsKICAgICAgICBpZiAoZmlsZS5yZXNwb25zZSkgewogICAgICAgICAgLy8gQ29tcG9uZW50IHdpbGwgc2hvdyBmaWxlLnVybCBhcyBsaW5rCiAgICAgICAgICBmaWxlLnVybCA9IGZpbGUucmVzcG9uc2UudXJsOwogICAgICAgIH0KICAgICAgICByZXR1cm4gZmlsZTsKICAgICAgfSk7CgogICAgICBmaWxlTGlzdC52YWx1ZSA9IHJlc0ZpbGVMaXN0OwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIGZpbGVMaXN0LAogICAgICBoYW5kbGVDaGFuZ2UsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXVwbG9hZAogICAgYWN0aW9uPSJodHRwczovL3d3dy5tb2NreS5pby92Mi81Y2M4MDE5ZDMwMDAwMDk4MGEwNTVlNzYiCiAgICA6bXVsdGlwbGU9InRydWUiCiAgICA6ZmlsZS1saXN0PSJmaWxlTGlzdCIKICAgIEBjaGFuZ2U9ImhhbmRsZUNoYW5nZSIKICA+CiAgICA8YS1idXR0b24+CiAgICAgIDx1cGxvYWQtb3V0bGluZWQ+PC91cGxvYWQtb3V0bGluZWQ+CiAgICAgIFVwbG9hZAogICAgPC9hLWJ1dHRvbj4KICA8L2EtdXBsb2FkPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBVcGxvYWRPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBjb21wb25lbnRzOiB7CiAgICBVcGxvYWRPdXRsaW5lZCwKICB9LAogIHNldHVwKCkgewogICAgY29uc3QgZmlsZUxpc3QgPSByZWYoWwogICAgICB7CiAgICAgICAgdWlkOiAnLTEnLAogICAgICAgIG5hbWU6ICd4eHgucG5nJywKICAgICAgICBzdGF0dXM6ICdkb25lJywKICAgICAgICB1cmw6ICdodHRwOi8vd3d3LmJhaWR1LmNvbS94eHgucG5nJywKICAgICAgfSwKICAgIF0pOwogICAgY29uc3QgaGFuZGxlQ2hhbmdlID0gaW5mbyA9PiB7CiAgICAgIGxldCByZXNGaWxlTGlzdCA9IFsuLi5pbmZvLmZpbGVMaXN0XTsKCiAgICAgIC8vIDEuIExpbWl0IHRoZSBudW1iZXIgb2YgdXBsb2FkZWQgZmlsZXMKICAgICAgLy8gICAgT25seSB0byBzaG93IHR3byByZWNlbnQgdXBsb2FkZWQgZmlsZXMsIGFuZCBvbGQgb25lcyB3aWxsIGJlIHJlcGxhY2VkIGJ5IHRoZSBuZXcKICAgICAgcmVzRmlsZUxpc3QgPSByZXNGaWxlTGlzdC5zbGljZSgtMik7CgogICAgICAvLyAyLiByZWFkIGZyb20gcmVzcG9uc2UgYW5kIHNob3cgZmlsZSBsaW5rCiAgICAgIHJlc0ZpbGVMaXN0ID0gcmVzRmlsZUxpc3QubWFwKGZpbGUgPT4gewogICAgICAgIGlmIChmaWxlLnJlc3BvbnNlKSB7CiAgICAgICAgICAvLyBDb21wb25lbnQgd2lsbCBzaG93IGZpbGUudXJsIGFzIGxpbmsKICAgICAgICAgIGZpbGUudXJsID0gZmlsZS5yZXNwb25zZS51cmw7CiAgICAgICAgfQogICAgICAgIHJldHVybiBmaWxlOwogICAgICB9KTsKICAgICAgZmlsZUxpc3QudmFsdWUgPSByZXNGaWxlTGlzdDsKICAgIH07CiAgICByZXR1cm4gewogICAgICBmaWxlTGlzdCwKICAgICAgaGFuZGxlQ2hhbmdlLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:o(()=>[l(g,{action:"https://www.mocky.io/v2/5cc8019d300000980a055e76",multiple:!0,"file-list":t.fileList,onChange:t.handleChange},{default:o(()=>[l(k,null,{default:o(()=>[l(c),a[0]||(a[0]=s(" Upload "))]),_:1,__:[0]})]),_:1},8,["file-list","onChange"])]),htmlCode:o(()=>a[1]||(a[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    692. 

  692.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(`
    693. 

  693.     `),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("https://www.mocky.io/v2/5cc8019d300000980a055e76"),n("span",{class:"token punctuation"},'"')]),s(`
    694. 

  694.     `),n("span",{class:"token attr-name"},":multiple"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("true"),n("span",{class:"token punctuation"},'"')]),s(`
    695. 

  695.     `),n("span",{class:"token attr-name"},":file-list"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList"),n("span",{class:"token punctuation"},'"')]),s(`
    696. 

  696.     `),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("handleChange"),n("span",{class:"token punctuation"},'"')]),s(`
    697. 

  697.   `),n("span",{class:"token punctuation"},">")]),s(`
    698. 

  698.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    699. 

  699.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    700. 

  700.       Upload
    701. 

  701.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    702. 

  702.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    703. 

  703. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    704. 

  704. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),s(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    705. 

  705. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" UploadOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    706. 

  706. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent"),n("span",{class:"token punctuation"},","),s(" ref "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    707. 

  707. 

  708. `),n("span",{class:"token keyword"},"interface"),s(),n("span",{class:"token class-name"},"FileItem"),s(),n("span",{class:"token punctuation"},"{"),s(`
    709. 

  709.   `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    710. 

  710.   name`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    711. 

  711.   status`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    712. 

  712.   response`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" Response"),n("span",{class:"token punctuation"},";"),s(`
    713. 

  713.   `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    714. 

  714. `),n("span",{class:"token punctuation"},"}"),s(`
    715. 

  715. 

  716. `),n("span",{class:"token keyword"},"interface"),s(),n("span",{class:"token class-name"},"FileInfo"),s(),n("span",{class:"token punctuation"},"{"),s(`
    717. 

  717.   `),n("span",{class:"token literal-property property"},"file"),n("span",{class:"token operator"},":"),s(" FileItem"),n("span",{class:"token punctuation"},";"),s(`
    718. 

  718.   `),n("span",{class:"token literal-property property"},"fileList"),n("span",{class:"token operator"},":"),s(" FileItem"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),s(`
    719. 

  719. `),n("span",{class:"token punctuation"},"}"),s(`
    720. 

  720. 

  721. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    722. 

  722.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    723. 

  723.     UploadOutlined`),n("span",{class:"token punctuation"},","),s(`
    724. 

  724.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    725. 

  725.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    726. 

  726.     `),n("span",{class:"token keyword"},"const"),s(" fileList "),n("span",{class:"token operator"},"="),s(" ref"),n("span",{class:"token operator"},"<"),s("FileItem"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),s(`
    727. 

  727.       `),n("span",{class:"token punctuation"},"{"),s(`
    728. 

  728.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'-1'"),n("span",{class:"token punctuation"},","),s(`
    729. 

  729.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'xxx.png'"),n("span",{class:"token punctuation"},","),s(`
    730. 

  730.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    731. 

  731.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'http://www.baidu.com/xxx.png'"),n("span",{class:"token punctuation"},","),s(`
    732. 

  732.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    733. 

  733.     `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    734. 

  734.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"handleChange"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"info"),n("span",{class:"token operator"},":"),s(" FileInfo")]),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    735. 

  735.       `),n("span",{class:"token keyword"},"let"),s(" resFileList "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"["),n("span",{class:"token operator"},"..."),s("info"),n("span",{class:"token punctuation"},"."),s("fileList"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),s(`
    736. 

  736. 

  737.       `),n("span",{class:"token comment"},"// 1. Limit the number of uploaded files"),s(`
    738. 

  738.       `),n("span",{class:"token comment"},"//    Only to show two recent uploaded files, and old ones will be replaced by the new"),s(`
    739. 

  739.       resFileList `),n("span",{class:"token operator"},"="),s(" resFileList"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"slice"),n("span",{class:"token punctuation"},"("),n("span",{class:"token operator"},"-"),n("span",{class:"token number"},"2"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    740. 

  740. 

  741.       `),n("span",{class:"token comment"},"// 2. read from response and show file link"),s(`
    742. 

  742.       resFileList `),n("span",{class:"token operator"},"="),s(" resFileList"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"map"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"file"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    743. 

  743.         `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("file"),n("span",{class:"token punctuation"},"."),s("response"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    744. 

  744.           `),n("span",{class:"token comment"},"// Component will show file.url as link"),s(`
    745. 

  745.           file`),n("span",{class:"token punctuation"},"."),s("url "),n("span",{class:"token operator"},"="),s(" file"),n("span",{class:"token punctuation"},"."),s("response"),n("span",{class:"token punctuation"},"."),s("url"),n("span",{class:"token punctuation"},";"),s(`
    746. 

  746.         `),n("span",{class:"token punctuation"},"}"),s(`
    747. 

  747.         `),n("span",{class:"token keyword"},"return"),s(" file"),n("span",{class:"token punctuation"},";"),s(`
    748. 

  748.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    749. 

  749. 

  750.       fileList`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(" resFileList"),n("span",{class:"token punctuation"},";"),s(`
    751. 

  751.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    752. 

  752.     `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
    753. 

  753.       fileList`),n("span",{class:"token punctuation"},","),s(`
    754. 

  754.       handleChange`),n("span",{class:"token punctuation"},","),s(`
    755. 

  755.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    756. 

  756.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    757. 

  757. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    758. 

  758. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    759. 

  759. `)])],-1)])),jsVersionHtml:o(()=>a[2]||(a[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    760. 

  760.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(`
    761. 

  761.     `),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("https://www.mocky.io/v2/5cc8019d300000980a055e76"),n("span",{class:"token punctuation"},'"')]),s(`
    762. 

  762.     `),n("span",{class:"token attr-name"},":multiple"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("true"),n("span",{class:"token punctuation"},'"')]),s(`
    763. 

  763.     `),n("span",{class:"token attr-name"},":file-list"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList"),n("span",{class:"token punctuation"},'"')]),s(`
    764. 

  764.     `),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("handleChange"),n("span",{class:"token punctuation"},'"')]),s(`
    765. 

  765.   `),n("span",{class:"token punctuation"},">")]),s(`
    766. 

  766.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    767. 

  767.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    768. 

  768.       Upload
    769. 

  769.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    770. 

  770.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    771. 

  771. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    772. 

  772. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    773. 

  773. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" UploadOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    774. 

  774. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent"),n("span",{class:"token punctuation"},","),s(" ref "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    775. 

  775. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    776. 

  776.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    777. 

  777.     UploadOutlined`),n("span",{class:"token punctuation"},","),s(`
    778. 

  778.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    779. 

  779.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    780. 

  780.     `),n("span",{class:"token keyword"},"const"),s(" fileList "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),s(`
    781. 

  781.       `),n("span",{class:"token punctuation"},"{"),s(`
    782. 

  782.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'-1'"),n("span",{class:"token punctuation"},","),s(`
    783. 

  783.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'xxx.png'"),n("span",{class:"token punctuation"},","),s(`
    784. 

  784.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    785. 

  785.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'http://www.baidu.com/xxx.png'"),n("span",{class:"token punctuation"},","),s(`
    786. 

  786.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    787. 

  787.     `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    788. 

  788.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"handleChange"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token parameter"},"info"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    789. 

  789.       `),n("span",{class:"token keyword"},"let"),s(" resFileList "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"["),n("span",{class:"token operator"},"..."),s("info"),n("span",{class:"token punctuation"},"."),s("fileList"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),s(`
    790. 

  790. 

  791.       `),n("span",{class:"token comment"},"// 1. Limit the number of uploaded files"),s(`
    792. 

  792.       `),n("span",{class:"token comment"},"//    Only to show two recent uploaded files, and old ones will be replaced by the new"),s(`
    793. 

  793.       resFileList `),n("span",{class:"token operator"},"="),s(" resFileList"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"slice"),n("span",{class:"token punctuation"},"("),n("span",{class:"token operator"},"-"),n("span",{class:"token number"},"2"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    794. 

  794. 

  795.       `),n("span",{class:"token comment"},"// 2. read from response and show file link"),s(`
    796. 

  796.       resFileList `),n("span",{class:"token operator"},"="),s(" resFileList"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"map"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"file"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    797. 

  797.         `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("file"),n("span",{class:"token punctuation"},"."),s("response"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    798. 

  798.           `),n("span",{class:"token comment"},"// Component will show file.url as link"),s(`
    799. 

  799.           file`),n("span",{class:"token punctuation"},"."),s("url "),n("span",{class:"token operator"},"="),s(" file"),n("span",{class:"token punctuation"},"."),s("response"),n("span",{class:"token punctuation"},"."),s("url"),n("span",{class:"token punctuation"},";"),s(`
    800. 

  800.         `),n("span",{class:"token punctuation"},"}"),s(`
    801. 

  801.         `),n("span",{class:"token keyword"},"return"),s(" file"),n("span",{class:"token punctuation"},";"),s(`
    802. 

  802.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    803. 

  803.       fileList`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(" resFileList"),n("span",{class:"token punctuation"},";"),s(`
    804. 

  804.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    805. 

  805.     `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
    806. 

  806.       fileList`),n("span",{class:"token punctuation"},","),s(`
    807. 

  807.       handleChange`),n("span",{class:"token punctuation"},","),s(`
    808. 

  808.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    809. 

  809.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    810. 

  810. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    811. 

  811. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    812. 

  812. `)])],-1)])),_:1})}var en=A(tn,[["render",on]]);const pn=y({components:{InboxOutlined:U},setup(){return{handleChange:a=>{const p=a.file.status;p!=="uploading"&&console.log(a.file,a.fileList),p==="done"?Z.success(`${a.file.name} file uploaded successfully.`):p==="error"&&Z.error(`${a.file.name} file upload failed.`)},fileList:m([])}}}),cn={class:"ant-upload-drag-icon"};function ln(t,a,p,u,r,i){const c=e("inbox-outlined"),k=e("a-upload-dragger"),g=e("demo-box");return C(),b(g,{jsfiddle:{us:"You can drag files to a specific area, to upload. Alternatively, you can also upload by selecting.",cn:"\u628A\u6587\u4EF6\u62D6\u5165\u6307\u5B9A\u533A\u57DF\uFF0C\u5B8C\u6210\u4E0A\u4F20\uFF0C\u540C\u6837\u652F\u6301\u70B9\u51FB\u4E0A\u4F20\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
    813. 

  813. <p>\u628A\u6587\u4EF6\u62D6\u5165\u6307\u5B9A\u533A\u57DF\uFF0C\u5B8C\u6210\u4E0A\u4F20\uFF0C\u540C\u6837\u652F\u6301\u70B9\u51FB\u4E0A\u4F20\u3002</p>
    814. 

  814. <p>\u8BBE\u7F6E <code>multiple</code> \u540E\uFF0C\u5728 <code>IE10+</code> \u53EF\u4EE5\u4E00\u6B21\u4E0A\u4F20\u591A\u4E2A\u6587\u4EF6\u3002</p>
    815. 

  815. <h2 id="en-us">en-US</h2>
    816. 

  816. <p>You can drag files to a specific area, to upload. Alternatively, you can also upload by selecting.</p>
    817. 

  817. <p>We can upload serveral files at once in modern browsers by giving the input the <code>multiple</code> attribute.</p>
    818. 

  818. `,order:5,title:{"zh-CN":"\u62D6\u62FD\u4E0A\u4F20","en-US":"Drag and Drop"},relativePath:"src/docs/upload/demo/drag.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXVwbG9hZC1kcmFnZ2VyCiAgICB2LW1vZGVsOmZpbGVMaXN0PSJmaWxlTGlzdCIKICAgIG5hbWU9ImZpbGUiCiAgICA6bXVsdGlwbGU9InRydWUiCiAgICBhY3Rpb249Imh0dHBzOi8vd3d3Lm1vY2t5LmlvL3YyLzVjYzgwMTlkMzAwMDAwOTgwYTA1NWU3NiIKICAgIEBjaGFuZ2U9ImhhbmRsZUNoYW5nZSIKICA+CiAgICA8cCBjbGFzcz0iYW50LXVwbG9hZC1kcmFnLWljb24iPgogICAgICA8aW5ib3gtb3V0bGluZWQ+PC9pbmJveC1vdXRsaW5lZD4KICAgIDwvcD4KICAgIDxwIGNsYXNzPSJhbnQtdXBsb2FkLXRleHQiPkNsaWNrIG9yIGRyYWcgZmlsZSB0byB0aGlzIGFyZWEgdG8gdXBsb2FkPC9wPgogICAgPHAgY2xhc3M9ImFudC11cGxvYWQtaGludCI+CiAgICAgIFN1cHBvcnQgZm9yIGEgc2luZ2xlIG9yIGJ1bGsgdXBsb2FkLiBTdHJpY3RseSBwcm9oaWJpdCBmcm9tIHVwbG9hZGluZyBjb21wYW55IGRhdGEgb3Igb3RoZXIKICAgICAgYmFuZCBmaWxlcwogICAgPC9wPgogIDwvYS11cGxvYWQtZHJhZ2dlcj4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IEluYm94T3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwppbXBvcnQgeyBtZXNzYWdlIH0gZnJvbSAnYW50LWRlc2lnbi12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CgppbnRlcmZhY2UgRmlsZUl0ZW0gewogIHVpZDogc3RyaW5nOwogIG5hbWU/OiBzdHJpbmc7CiAgc3RhdHVzPzogc3RyaW5nOwogIHJlc3BvbnNlPzogc3RyaW5nOwogIHVybD86IHN0cmluZzsKfQoKaW50ZXJmYWNlIEZpbGVJbmZvIHsKICBmaWxlOiBGaWxlSXRlbTsKICBmaWxlTGlzdDogRmlsZUl0ZW1bXTsKfQoKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBjb21wb25lbnRzOiB7CiAgICBJbmJveE91dGxpbmVkLAogIH0sCiAgc2V0dXAoKSB7CiAgICBjb25zdCBoYW5kbGVDaGFuZ2UgPSAoaW5mbzogRmlsZUluZm8pID0+IHsKICAgICAgY29uc3Qgc3RhdHVzID0gaW5mby5maWxlLnN0YXR1czsKICAgICAgaWYgKHN0YXR1cyAhPT0gJ3VwbG9hZGluZycpIHsKICAgICAgICBjb25zb2xlLmxvZyhpbmZvLmZpbGUsIGluZm8uZmlsZUxpc3QpOwogICAgICB9CiAgICAgIGlmIChzdGF0dXMgPT09ICdkb25lJykgewogICAgICAgIG1lc3NhZ2Uuc3VjY2VzcyhgJHtpbmZvLmZpbGUubmFtZX0gZmlsZSB1cGxvYWRlZCBzdWNjZXNzZnVsbHkuYCk7CiAgICAgIH0gZWxzZSBpZiAoc3RhdHVzID09PSAnZXJyb3InKSB7CiAgICAgICAgbWVzc2FnZS5lcnJvcihgJHtpbmZvLmZpbGUubmFtZX0gZmlsZSB1cGxvYWQgZmFpbGVkLmApOwogICAgICB9CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgaGFuZGxlQ2hhbmdlLAogICAgICBmaWxlTGlzdDogcmVmKFtdKSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXVwbG9hZC1kcmFnZ2VyCiAgICB2LW1vZGVsOmZpbGVMaXN0PSJmaWxlTGlzdCIKICAgIG5hbWU9ImZpbGUiCiAgICA6bXVsdGlwbGU9InRydWUiCiAgICBhY3Rpb249Imh0dHBzOi8vd3d3Lm1vY2t5LmlvL3YyLzVjYzgwMTlkMzAwMDAwOTgwYTA1NWU3NiIKICAgIEBjaGFuZ2U9ImhhbmRsZUNoYW5nZSIKICA+CiAgICA8cCBjbGFzcz0iYW50LXVwbG9hZC1kcmFnLWljb24iPgogICAgICA8aW5ib3gtb3V0bGluZWQ+PC9pbmJveC1vdXRsaW5lZD4KICAgIDwvcD4KICAgIDxwIGNsYXNzPSJhbnQtdXBsb2FkLXRleHQiPkNsaWNrIG9yIGRyYWcgZmlsZSB0byB0aGlzIGFyZWEgdG8gdXBsb2FkPC9wPgogICAgPHAgY2xhc3M9ImFudC11cGxvYWQtaGludCI+CiAgICAgIFN1cHBvcnQgZm9yIGEgc2luZ2xlIG9yIGJ1bGsgdXBsb2FkLiBTdHJpY3RseSBwcm9oaWJpdCBmcm9tIHVwbG9hZGluZyBjb21wYW55IGRhdGEgb3Igb3RoZXIKICAgICAgYmFuZCBmaWxlcwogICAgPC9wPgogIDwvYS11cGxvYWQtZHJhZ2dlcj4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgSW5ib3hPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmltcG9ydCB7IG1lc3NhZ2UgfSBmcm9tICdhbnQtZGVzaWduLXZ1ZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBjb21wb25lbnRzOiB7CiAgICBJbmJveE91dGxpbmVkLAogIH0sCiAgc2V0dXAoKSB7CiAgICBjb25zdCBoYW5kbGVDaGFuZ2UgPSBpbmZvID0+IHsKICAgICAgY29uc3Qgc3RhdHVzID0gaW5mby5maWxlLnN0YXR1czsKICAgICAgaWYgKHN0YXR1cyAhPT0gJ3VwbG9hZGluZycpIHsKICAgICAgICBjb25zb2xlLmxvZyhpbmZvLmZpbGUsIGluZm8uZmlsZUxpc3QpOwogICAgICB9CiAgICAgIGlmIChzdGF0dXMgPT09ICdkb25lJykgewogICAgICAgIG1lc3NhZ2Uuc3VjY2VzcyhgJHtpbmZvLmZpbGUubmFtZX0gZmlsZSB1cGxvYWRlZCBzdWNjZXNzZnVsbHkuYCk7CiAgICAgIH0gZWxzZSBpZiAoc3RhdHVzID09PSAnZXJyb3InKSB7CiAgICAgICAgbWVzc2FnZS5lcnJvcihgJHtpbmZvLmZpbGUubmFtZX0gZmlsZSB1cGxvYWQgZmFpbGVkLmApOwogICAgICB9CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgaGFuZGxlQ2hhbmdlLAogICAgICBmaWxlTGlzdDogcmVmKFtdKSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:o(()=>[l(k,{fileList:t.fileList,"onUpdate:fileList":a[0]||(a[0]=d=>t.fileList=d),name:"file",multiple:!0,action:"https://www.mocky.io/v2/5cc8019d300000980a055e76",onChange:t.handleChange},{default:o(()=>[n("p",cn,[l(c)]),a[1]||(a[1]=n("p",{class:"ant-upload-text"},"Click or drag file to this area to upload",-1)),a[2]||(a[2]=n("p",{class:"ant-upload-hint"}," Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files ",-1))]),_:1,__:[1,2]},8,["fileList","onChange"])]),htmlCode:o(()=>a[3]||(a[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    819. 

  819.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload-dragger")]),s(`
    820. 

  820.     `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),s("fileList")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList"),n("span",{class:"token punctuation"},'"')]),s(`
    821. 

  821.     `),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("file"),n("span",{class:"token punctuation"},'"')]),s(`
    822. 

  822.     `),n("span",{class:"token attr-name"},":multiple"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("true"),n("span",{class:"token punctuation"},'"')]),s(`
    823. 

  823.     `),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("https://www.mocky.io/v2/5cc8019d300000980a055e76"),n("span",{class:"token punctuation"},'"')]),s(`
    824. 

  824.     `),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("handleChange"),n("span",{class:"token punctuation"},'"')]),s(`
    825. 

  825.   `),n("span",{class:"token punctuation"},">")]),s(`
    826. 

  826.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("p")]),s(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ant-upload-drag-icon"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(`
    827. 

  827.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("inbox-outlined")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("inbox-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    828. 

  828.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("p")]),n("span",{class:"token punctuation"},">")]),s(`
    829. 

  829.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("p")]),s(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ant-upload-text"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s("Click or drag file to this area to upload"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("p")]),n("span",{class:"token punctuation"},">")]),s(`
    830. 

  830.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("p")]),s(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ant-upload-hint"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(`
    831. 

  831.       Support for a single or bulk upload. Strictly prohibit from uploading company data or other
    832. 

  832.       band files
    833. 

  833.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("p")]),n("span",{class:"token punctuation"},">")]),s(`
    834. 

  834.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload-dragger")]),n("span",{class:"token punctuation"},">")]),s(`
    835. 

  835. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    836. 

  836. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),s(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    837. 

  837. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" InboxOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    838. 

  838. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" message "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),s(`
    839. 

  839. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent"),n("span",{class:"token punctuation"},","),s(" ref "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    840. 

  840. 

  841. `),n("span",{class:"token keyword"},"interface"),s(),n("span",{class:"token class-name"},"FileItem"),s(),n("span",{class:"token punctuation"},"{"),s(`
    842. 

  842.   `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    843. 

  843.   name`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    844. 

  844.   status`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    845. 

  845.   response`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    846. 

  846.   url`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    847. 

  847. `),n("span",{class:"token punctuation"},"}"),s(`
    848. 

  848. 

  849. `),n("span",{class:"token keyword"},"interface"),s(),n("span",{class:"token class-name"},"FileInfo"),s(),n("span",{class:"token punctuation"},"{"),s(`
    850. 

  850.   `),n("span",{class:"token literal-property property"},"file"),n("span",{class:"token operator"},":"),s(" FileItem"),n("span",{class:"token punctuation"},";"),s(`
    851. 

  851.   `),n("span",{class:"token literal-property property"},"fileList"),n("span",{class:"token operator"},":"),s(" FileItem"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),s(`
    852. 

  852. `),n("span",{class:"token punctuation"},"}"),s(`
    853. 

  853. 

  854. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    855. 

  855.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    856. 

  856.     InboxOutlined`),n("span",{class:"token punctuation"},","),s(`
    857. 

  857.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    858. 

  858.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    859. 

  859.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"handleChange"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"info"),n("span",{class:"token operator"},":"),s(" FileInfo")]),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    860. 

  860.       `),n("span",{class:"token keyword"},"const"),s(" status "),n("span",{class:"token operator"},"="),s(" info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("status"),n("span",{class:"token punctuation"},";"),s(`
    861. 

  861.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("status "),n("span",{class:"token operator"},"!=="),s(),n("span",{class:"token string"},"'uploading'"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    862. 

  862.         console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},","),s(" info"),n("span",{class:"token punctuation"},"."),s("fileList"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    863. 

  863.       `),n("span",{class:"token punctuation"},"}"),s(`
    864. 

  864.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("status "),n("span",{class:"token operator"},"==="),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    865. 

  865.         message`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"success"),n("span",{class:"token punctuation"},"("),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("name"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token string"}," file uploaded successfully."),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    866. 

  866.       `),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"else"),s(),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("status "),n("span",{class:"token operator"},"==="),s(),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    867. 

  867.         message`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"error"),n("span",{class:"token punctuation"},"("),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("name"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token string"}," file upload failed."),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    868. 

  868.       `),n("span",{class:"token punctuation"},"}"),s(`
    869. 

  869.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    870. 

  870.     `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
    871. 

  871.       handleChange`),n("span",{class:"token punctuation"},","),s(`
    872. 

  872.       `),n("span",{class:"token literal-property property"},"fileList"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(`
    873. 

  873.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    874. 

  874.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    875. 

  875. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    876. 

  876. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    877. 

  877. `)])],-1)])),jsVersionHtml:o(()=>a[4]||(a[4]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    878. 

  878.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload-dragger")]),s(`
    879. 

  879.     `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),s("fileList")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList"),n("span",{class:"token punctuation"},'"')]),s(`
    880. 

  880.     `),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("file"),n("span",{class:"token punctuation"},'"')]),s(`
    881. 

  881.     `),n("span",{class:"token attr-name"},":multiple"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("true"),n("span",{class:"token punctuation"},'"')]),s(`
    882. 

  882.     `),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("https://www.mocky.io/v2/5cc8019d300000980a055e76"),n("span",{class:"token punctuation"},'"')]),s(`
    883. 

  883.     `),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("handleChange"),n("span",{class:"token punctuation"},'"')]),s(`
    884. 

  884.   `),n("span",{class:"token punctuation"},">")]),s(`
    885. 

  885.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("p")]),s(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ant-upload-drag-icon"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(`
    886. 

  886.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("inbox-outlined")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("inbox-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    887. 

  887.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("p")]),n("span",{class:"token punctuation"},">")]),s(`
    888. 

  888.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("p")]),s(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ant-upload-text"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s("Click or drag file to this area to upload"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("p")]),n("span",{class:"token punctuation"},">")]),s(`
    889. 

  889.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("p")]),s(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ant-upload-hint"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(`
    890. 

  890.       Support for a single or bulk upload. Strictly prohibit from uploading company data or other
    891. 

  891.       band files
    892. 

  892.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("p")]),n("span",{class:"token punctuation"},">")]),s(`
    893. 

  893.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload-dragger")]),n("span",{class:"token punctuation"},">")]),s(`
    894. 

  894. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    895. 

  895. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    896. 

  896. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" InboxOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    897. 

  897. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" message "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),s(`
    898. 

  898. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent"),n("span",{class:"token punctuation"},","),s(" ref "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    899. 

  899. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    900. 

  900.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    901. 

  901.     InboxOutlined`),n("span",{class:"token punctuation"},","),s(`
    902. 

  902.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    903. 

  903.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    904. 

  904.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"handleChange"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token parameter"},"info"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    905. 

  905.       `),n("span",{class:"token keyword"},"const"),s(" status "),n("span",{class:"token operator"},"="),s(" info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("status"),n("span",{class:"token punctuation"},";"),s(`
    906. 

  906.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("status "),n("span",{class:"token operator"},"!=="),s(),n("span",{class:"token string"},"'uploading'"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    907. 

  907.         console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},","),s(" info"),n("span",{class:"token punctuation"},"."),s("fileList"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    908. 

  908.       `),n("span",{class:"token punctuation"},"}"),s(`
    909. 

  909.       `),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("status "),n("span",{class:"token operator"},"==="),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    910. 

  910.         message`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"success"),n("span",{class:"token punctuation"},"("),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("name"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token string"}," file uploaded successfully."),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    911. 

  911.       `),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"else"),s(),n("span",{class:"token keyword"},"if"),s(),n("span",{class:"token punctuation"},"("),s("status "),n("span",{class:"token operator"},"==="),s(),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    912. 

  912.         message`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"error"),n("span",{class:"token punctuation"},"("),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),s("info"),n("span",{class:"token punctuation"},"."),s("file"),n("span",{class:"token punctuation"},"."),s("name"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token string"}," file upload failed."),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    913. 

  913.       `),n("span",{class:"token punctuation"},"}"),s(`
    914. 

  914.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    915. 

  915.     `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
    916. 

  916.       handleChange`),n("span",{class:"token punctuation"},","),s(`
    917. 

  917.       `),n("span",{class:"token literal-property property"},"fileList"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(`
    918. 

  918.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    919. 

  919.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    920. 

  920. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    921. 

  921. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    922. 

  922. `)])],-1)])),_:1})}var un=A(pn,[["render",ln]]);const kn=y({components:{UploadOutlined:f},setup(){const t=m([{uid:"-1",name:"xxx.png",status:"done",url:"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",thumbUrl:"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"},{uid:"-2",name:"yyy.png",status:"done",url:"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",thumbUrl:"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"}]),a=m([{uid:"-1",name:"xxx.png",status:"done",url:"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",thumbUrl:"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"},{uid:"-2",name:"yyy.png",status:"done",url:"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",thumbUrl:"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"}]);return{fileList:t,fileList1:a}}});function rn(t,a,p,u,r,i){const c=e("upload-outlined"),k=e("a-button"),g=e("a-upload"),d=e("demo-box");return C(),b(d,{jsfiddle:{us:"If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not support local thumbnail show. Please use `thumbUrl` instead.",cn:"\u4E0A\u4F20\u6587\u4EF6\u4E3A\u56FE\u7247\uFF0C\u53EF\u5C55\u793A\u672C\u5730\u7F29\u7565\u56FE\u3002`IE8/9` \u4E0D\u652F\u6301\u6D4F\u89C8\u5668\u672C\u5730\u7F29\u7565\u56FE\u5C55\u793A\uFF08[Ref](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL)\uFF09\uFF0C\u53EF\u4EE5\u5199 `thumbUrl` \u5C5E\u6027\u6765\u4EE3\u66FF\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
    923. 

  923. <p>\u4E0A\u4F20\u6587\u4EF6\u4E3A\u56FE\u7247\uFF0C\u53EF\u5C55\u793A\u672C\u5730\u7F29\u7565\u56FE\u3002<code>IE8/9</code> \u4E0D\u652F\u6301\u6D4F\u89C8\u5668\u672C\u5730\u7F29\u7565\u56FE\u5C55\u793A\uFF08<a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL" target="_blank" rel="noopener noreferrer">Ref</a>\uFF09\uFF0C\u53EF\u4EE5\u5199 <code>thumbUrl</code> \u5C5E\u6027\u6765\u4EE3\u66FF\u3002</p>
    924. 

  924. <h2 id="en-us">en-US</h2>
    925. 

  925. <p>If uploaded file is a picture, the thumbnail can be shown. <code>IE8/9</code> do not support local thumbnail show. Please use <code>thumbUrl</code> instead.</p>
    926. 

  926. `,order:6,title:{"zh-CN":"\u56FE\u7247\u5217\u8868\u6837\u5F0F","en-US":"Pictures with list style"},relativePath:"src/docs/upload/demo/picture-style.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS11cGxvYWQKICAgICAgYWN0aW9uPSJodHRwczovL3d3dy5tb2NreS5pby92Mi81Y2M4MDE5ZDMwMDAwMDk4MGEwNTVlNzYiCiAgICAgIGxpc3QtdHlwZT0icGljdHVyZSIKICAgICAgdi1tb2RlbDpmaWxlLWxpc3Q9ImZpbGVMaXN0IgogICAgPgogICAgICA8YS1idXR0b24+CiAgICAgICAgPHVwbG9hZC1vdXRsaW5lZD48L3VwbG9hZC1vdXRsaW5lZD4KICAgICAgICB1cGxvYWQKICAgICAgPC9hLWJ1dHRvbj4KICAgIDwvYS11cGxvYWQ+CiAgICA8YnIgLz4KICAgIDxiciAvPgogICAgPGEtdXBsb2FkCiAgICAgIGFjdGlvbj0iaHR0cHM6Ly93d3cubW9ja3kuaW8vdjIvNWNjODAxOWQzMDAwMDA5ODBhMDU1ZTc2IgogICAgICBsaXN0LXR5cGU9InBpY3R1cmUiCiAgICAgIHYtbW9kZWw6ZmlsZS1saXN0PSJmaWxlTGlzdDEiCiAgICAgIGNsYXNzPSJ1cGxvYWQtbGlzdC1pbmxpbmUiCiAgICA+CiAgICAgIDxhLWJ1dHRvbj4KICAgICAgICA8dXBsb2FkLW91dGxpbmVkPjwvdXBsb2FkLW91dGxpbmVkPgogICAgICAgIHVwbG9hZAogICAgICA8L2EtYnV0dG9uPgogICAgPC9hLXVwbG9hZD4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IFVwbG9hZE91dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYgfSBmcm9tICd2dWUnOwoKaW50ZXJmYWNlIEZpbGVJdGVtIHsKICB1aWQ6IHN0cmluZzsKICBuYW1lPzogc3RyaW5nOwogIHN0YXR1cz86IHN0cmluZzsKICByZXNwb25zZT86IHN0cmluZzsKICB1cmw/OiBzdHJpbmc7CiAgdGh1bWJVcmw/OiBzdHJpbmc7Cn0KCmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgVXBsb2FkT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IGZpbGVMaXN0ID0gcmVmPEZpbGVJdGVtW10+KFsKICAgICAgewogICAgICAgIHVpZDogJy0xJywKICAgICAgICBuYW1lOiAneHh4LnBuZycsCiAgICAgICAgc3RhdHVzOiAnZG9uZScsCiAgICAgICAgdXJsOiAnaHR0cHM6Ly96b3MuYWxpcGF5b2JqZWN0cy5jb20vcm1zcG9ydGFsL2pramdrRWZ2cFVQVnlSalVJbW5pVnNsWmZXUG5KdXVaLnBuZycsCiAgICAgICAgdGh1bWJVcmw6ICdodHRwczovL3pvcy5hbGlwYXlvYmplY3RzLmNvbS9ybXNwb3J0YWwvamtqZ2tFZnZwVVBWeVJqVUltbmlWc2xaZldQbkp1dVoucG5nJywKICAgICAgfSwKICAgICAgewogICAgICAgIHVpZDogJy0yJywKICAgICAgICBuYW1lOiAneXl5LnBuZycsCiAgICAgICAgc3RhdHVzOiAnZG9uZScsCiAgICAgICAgdXJsOiAnaHR0cHM6Ly96b3MuYWxpcGF5b2JqZWN0cy5jb20vcm1zcG9ydGFsL2pramdrRWZ2cFVQVnlSalVJbW5pVnNsWmZXUG5KdXVaLnBuZycsCiAgICAgICAgdGh1bWJVcmw6ICdodHRwczovL3pvcy5hbGlwYXlvYmplY3RzLmNvbS9ybXNwb3J0YWwvamtqZ2tFZnZwVVBWeVJqVUltbmlWc2xaZldQbkp1dVoucG5nJywKICAgICAgfSwKICAgIF0pOwogICAgY29uc3QgZmlsZUxpc3QxID0gcmVmPEZpbGVJdGVtW10+KFsKICAgICAgewogICAgICAgIHVpZDogJy0xJywKICAgICAgICBuYW1lOiAneHh4LnBuZycsCiAgICAgICAgc3RhdHVzOiAnZG9uZScsCiAgICAgICAgdXJsOiAnaHR0cHM6Ly96b3MuYWxpcGF5b2JqZWN0cy5jb20vcm1zcG9ydGFsL2pramdrRWZ2cFVQVnlSalVJbW5pVnNsWmZXUG5KdXVaLnBuZycsCiAgICAgICAgdGh1bWJVcmw6ICdodHRwczovL3pvcy5hbGlwYXlvYmplY3RzLmNvbS9ybXNwb3J0YWwvamtqZ2tFZnZwVVBWeVJqVUltbmlWc2xaZldQbkp1dVoucG5nJywKICAgICAgfSwKICAgICAgewogICAgICAgIHVpZDogJy0yJywKICAgICAgICBuYW1lOiAneXl5LnBuZycsCiAgICAgICAgc3RhdHVzOiAnZG9uZScsCiAgICAgICAgdXJsOiAnaHR0cHM6Ly96b3MuYWxpcGF5b2JqZWN0cy5jb20vcm1zcG9ydGFsL2pramdrRWZ2cFVQVnlSalVJbW5pVnNsWmZXUG5KdXVaLnBuZycsCiAgICAgICAgdGh1bWJVcmw6ICdodHRwczovL3pvcy5hbGlwYXlvYmplY3RzLmNvbS9ybXNwb3J0YWwvamtqZ2tFZnZwVVBWeVJqVUltbmlWc2xaZldQbkp1dVoucG5nJywKICAgICAgfSwKICAgIF0pOwogICAgcmV0dXJuIHsKICAgICAgZmlsZUxpc3QsCiAgICAgIGZpbGVMaXN0MSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pgo8c3R5bGUgc2NvcGVkPgovKiB0aWxlIHVwbG9hZGVkIHBpY3R1cmVzICovCi51cGxvYWQtbGlzdC1pbmxpbmUgOmRlZXAoLmFudC11cGxvYWQtbGlzdC1pdGVtKSB7CiAgZmxvYXQ6IGxlZnQ7CiAgd2lkdGg6IDIwMHB4OwogIG1hcmdpbi1yaWdodDogOHB4Owp9Ci51cGxvYWQtbGlzdC1pbmxpbmUgOmRlZXAoLmFudC11cGxvYWQtYW5pbWF0ZS1lbnRlcikgewogIGFuaW1hdGlvbi1uYW1lOiB1cGxvYWRBbmltYXRlSW5saW5lSW47Cn0KLnVwbG9hZC1saXN0LWlubGluZSA6ZGVlcCguYW50LXVwbG9hZC1hbmltYXRlLWxlYXZlKSB7CiAgYW5pbWF0aW9uLW5hbWU6IHVwbG9hZEFuaW1hdGVJbmxpbmVPdXQ7Cn0KPC9zdHlsZT4K",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS11cGxvYWQKICAgICAgYWN0aW9uPSJodHRwczovL3d3dy5tb2NreS5pby92Mi81Y2M4MDE5ZDMwMDAwMDk4MGEwNTVlNzYiCiAgICAgIGxpc3QtdHlwZT0icGljdHVyZSIKICAgICAgdi1tb2RlbDpmaWxlLWxpc3Q9ImZpbGVMaXN0IgogICAgPgogICAgICA8YS1idXR0b24+CiAgICAgICAgPHVwbG9hZC1vdXRsaW5lZD48L3VwbG9hZC1vdXRsaW5lZD4KICAgICAgICB1cGxvYWQKICAgICAgPC9hLWJ1dHRvbj4KICAgIDwvYS11cGxvYWQ+CiAgICA8YnIgLz4KICAgIDxiciAvPgogICAgPGEtdXBsb2FkCiAgICAgIGFjdGlvbj0iaHR0cHM6Ly93d3cubW9ja3kuaW8vdjIvNWNjODAxOWQzMDAwMDA5ODBhMDU1ZTc2IgogICAgICBsaXN0LXR5cGU9InBpY3R1cmUiCiAgICAgIHYtbW9kZWw6ZmlsZS1saXN0PSJmaWxlTGlzdDEiCiAgICAgIGNsYXNzPSJ1cGxvYWQtbGlzdC1pbmxpbmUiCiAgICA+CiAgICAgIDxhLWJ1dHRvbj4KICAgICAgICA8dXBsb2FkLW91dGxpbmVkPjwvdXBsb2FkLW91dGxpbmVkPgogICAgICAgIHVwbG9hZAogICAgICA8L2EtYnV0dG9uPgogICAgPC9hLXVwbG9hZD4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgVXBsb2FkT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgVXBsb2FkT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IGZpbGVMaXN0ID0gcmVmKFsKICAgICAgewogICAgICAgIHVpZDogJy0xJywKICAgICAgICBuYW1lOiAneHh4LnBuZycsCiAgICAgICAgc3RhdHVzOiAnZG9uZScsCiAgICAgICAgdXJsOiAnaHR0cHM6Ly96b3MuYWxpcGF5b2JqZWN0cy5jb20vcm1zcG9ydGFsL2pramdrRWZ2cFVQVnlSalVJbW5pVnNsWmZXUG5KdXVaLnBuZycsCiAgICAgICAgdGh1bWJVcmw6ICdodHRwczovL3pvcy5hbGlwYXlvYmplY3RzLmNvbS9ybXNwb3J0YWwvamtqZ2tFZnZwVVBWeVJqVUltbmlWc2xaZldQbkp1dVoucG5nJywKICAgICAgfSwKICAgICAgewogICAgICAgIHVpZDogJy0yJywKICAgICAgICBuYW1lOiAneXl5LnBuZycsCiAgICAgICAgc3RhdHVzOiAnZG9uZScsCiAgICAgICAgdXJsOiAnaHR0cHM6Ly96b3MuYWxpcGF5b2JqZWN0cy5jb20vcm1zcG9ydGFsL2pramdrRWZ2cFVQVnlSalVJbW5pVnNsWmZXUG5KdXVaLnBuZycsCiAgICAgICAgdGh1bWJVcmw6ICdodHRwczovL3pvcy5hbGlwYXlvYmplY3RzLmNvbS9ybXNwb3J0YWwvamtqZ2tFZnZwVVBWeVJqVUltbmlWc2xaZldQbkp1dVoucG5nJywKICAgICAgfSwKICAgIF0pOwogICAgY29uc3QgZmlsZUxpc3QxID0gcmVmKFsKICAgICAgewogICAgICAgIHVpZDogJy0xJywKICAgICAgICBuYW1lOiAneHh4LnBuZycsCiAgICAgICAgc3RhdHVzOiAnZG9uZScsCiAgICAgICAgdXJsOiAnaHR0cHM6Ly96b3MuYWxpcGF5b2JqZWN0cy5jb20vcm1zcG9ydGFsL2pramdrRWZ2cFVQVnlSalVJbW5pVnNsWmZXUG5KdXVaLnBuZycsCiAgICAgICAgdGh1bWJVcmw6ICdodHRwczovL3pvcy5hbGlwYXlvYmplY3RzLmNvbS9ybXNwb3J0YWwvamtqZ2tFZnZwVVBWeVJqVUltbmlWc2xaZldQbkp1dVoucG5nJywKICAgICAgfSwKICAgICAgewogICAgICAgIHVpZDogJy0yJywKICAgICAgICBuYW1lOiAneXl5LnBuZycsCiAgICAgICAgc3RhdHVzOiAnZG9uZScsCiAgICAgICAgdXJsOiAnaHR0cHM6Ly96b3MuYWxpcGF5b2JqZWN0cy5jb20vcm1zcG9ydGFsL2pramdrRWZ2cFVQVnlSalVJbW5pVnNsWmZXUG5KdXVaLnBuZycsCiAgICAgICAgdGh1bWJVcmw6ICdodHRwczovL3pvcy5hbGlwYXlvYmplY3RzLmNvbS9ybXNwb3J0YWwvamtqZ2tFZnZwVVBWeVJqVUltbmlWc2xaZldQbkp1dVoucG5nJywKICAgICAgfSwKICAgIF0pOwogICAgcmV0dXJuIHsKICAgICAgZmlsZUxpc3QsCiAgICAgIGZpbGVMaXN0MSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pgo8c3R5bGUgc2NvcGVkPgovKiB0aWxlIHVwbG9hZGVkIHBpY3R1cmVzICovCi51cGxvYWQtbGlzdC1pbmxpbmUgOmRlZXAoLmFudC11cGxvYWQtbGlzdC1pdGVtKSB7CiAgZmxvYXQ6IGxlZnQ7CiAgd2lkdGg6IDIwMHB4OwogIG1hcmdpbi1yaWdodDogOHB4Owp9Ci51cGxvYWQtbGlzdC1pbmxpbmUgOmRlZXAoLmFudC11cGxvYWQtYW5pbWF0ZS1lbnRlcikgewogIGFuaW1hdGlvbi1uYW1lOiB1cGxvYWRBbmltYXRlSW5saW5lSW47Cn0KLnVwbG9hZC1saXN0LWlubGluZSA6ZGVlcCguYW50LXVwbG9hZC1hbmltYXRlLWxlYXZlKSB7CiAgYW5pbWF0aW9uLW5hbWU6IHVwbG9hZEFuaW1hdGVJbmxpbmVPdXQ7Cn0KPC9zdHlsZT4="}},{default:o(()=>[n("div",null,[l(g,{action:"https://www.mocky.io/v2/5cc8019d300000980a055e76","list-type":"picture","file-list":t.fileList,"onUpdate:fileList":a[0]||(a[0]=I=>t.fileList=I)},{default:o(()=>[l(k,null,{default:o(()=>[l(c),a[2]||(a[2]=s(" upload "))]),_:1,__:[2]})]),_:1},8,["file-list"]),a[4]||(a[4]=n("br",null,null,-1)),a[5]||(a[5]=n("br",null,null,-1)),l(g,{action:"https://www.mocky.io/v2/5cc8019d300000980a055e76","list-type":"picture","file-list":t.fileList1,"onUpdate:fileList":a[1]||(a[1]=I=>t.fileList1=I),class:"upload-list-inline"},{default:o(()=>[l(k,null,{default:o(()=>[l(c),a[3]||(a[3]=s(" upload "))]),_:1,__:[3]})]),_:1},8,["file-list"])])]),htmlCode:o(()=>a[6]||(a[6]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    927. 

  927.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    928. 

  928.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(`
    929. 

  929.       `),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("https://www.mocky.io/v2/5cc8019d300000980a055e76"),n("span",{class:"token punctuation"},'"')]),s(`
    930. 

  930.       `),n("span",{class:"token attr-name"},"list-type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("picture"),n("span",{class:"token punctuation"},'"')]),s(`
    931. 

  931.       `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),s("file-list")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList"),n("span",{class:"token punctuation"},'"')]),s(`
    932. 

  932.     `),n("span",{class:"token punctuation"},">")]),s(`
    933. 

  933.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    934. 

  934.         `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    935. 

  935.         upload
    936. 

  936.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    937. 

  937.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    938. 

  938.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("br")]),s(),n("span",{class:"token punctuation"},"/>")]),s(`
    939. 

  939.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("br")]),s(),n("span",{class:"token punctuation"},"/>")]),s(`
    940. 

  940.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(`
    941. 

  941.       `),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("https://www.mocky.io/v2/5cc8019d300000980a055e76"),n("span",{class:"token punctuation"},'"')]),s(`
    942. 

  942.       `),n("span",{class:"token attr-name"},"list-type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("picture"),n("span",{class:"token punctuation"},'"')]),s(`
    943. 

  943.       `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),s("file-list")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList1"),n("span",{class:"token punctuation"},'"')]),s(`
    944. 

  944.       `),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("upload-list-inline"),n("span",{class:"token punctuation"},'"')]),s(`
    945. 

  945.     `),n("span",{class:"token punctuation"},">")]),s(`
    946. 

  946.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    947. 

  947.         `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    948. 

  948.         upload
    949. 

  949.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    950. 

  950.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    951. 

  951.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    952. 

  952. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    953. 

  953. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),s(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    954. 

  954. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" UploadOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    955. 

  955. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent"),n("span",{class:"token punctuation"},","),s(" ref "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    956. 

  956. 

  957. `),n("span",{class:"token keyword"},"interface"),s(),n("span",{class:"token class-name"},"FileItem"),s(),n("span",{class:"token punctuation"},"{"),s(`
    958. 

  958.   `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    959. 

  959.   name`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    960. 

  960.   status`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    961. 

  961.   response`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    962. 

  962.   url`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    963. 

  963.   thumbUrl`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    964. 

  964. `),n("span",{class:"token punctuation"},"}"),s(`
    965. 

  965. 

  966. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    967. 

  967.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    968. 

  968.     UploadOutlined`),n("span",{class:"token punctuation"},","),s(`
    969. 

  969.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    970. 

  970.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    971. 

  971.     `),n("span",{class:"token keyword"},"const"),s(" fileList "),n("span",{class:"token operator"},"="),s(" ref"),n("span",{class:"token operator"},"<"),s("FileItem"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),s(`
    972. 

  972.       `),n("span",{class:"token punctuation"},"{"),s(`
    973. 

  973.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'-1'"),n("span",{class:"token punctuation"},","),s(`
    974. 

  974.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'xxx.png'"),n("span",{class:"token punctuation"},","),s(`
    975. 

  975.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    976. 

  976.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    977. 

  977.         `),n("span",{class:"token literal-property property"},"thumbUrl"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    978. 

  978.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    979. 

  979.       `),n("span",{class:"token punctuation"},"{"),s(`
    980. 

  980.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'-2'"),n("span",{class:"token punctuation"},","),s(`
    981. 

  981.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'yyy.png'"),n("span",{class:"token punctuation"},","),s(`
    982. 

  982.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    983. 

  983.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    984. 

  984.         `),n("span",{class:"token literal-property property"},"thumbUrl"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    985. 

  985.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    986. 

  986.     `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    987. 

  987.     `),n("span",{class:"token keyword"},"const"),s(" fileList1 "),n("span",{class:"token operator"},"="),s(" ref"),n("span",{class:"token operator"},"<"),s("FileItem"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),s(`
    988. 

  988.       `),n("span",{class:"token punctuation"},"{"),s(`
    989. 

  989.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'-1'"),n("span",{class:"token punctuation"},","),s(`
    990. 

  990.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'xxx.png'"),n("span",{class:"token punctuation"},","),s(`
    991. 

  991.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    992. 

  992.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    993. 

  993.         `),n("span",{class:"token literal-property property"},"thumbUrl"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    994. 

  994.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    995. 

  995.       `),n("span",{class:"token punctuation"},"{"),s(`
    996. 

  996.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'-2'"),n("span",{class:"token punctuation"},","),s(`
    997. 

  997.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'yyy.png'"),n("span",{class:"token punctuation"},","),s(`
    998. 

  998.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    999. 

  999.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    1000. 

  1000.         `),n("span",{class:"token literal-property property"},"thumbUrl"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    1001. 

  1001.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1002. 

  1002.     `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1003. 

  1003.     `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1004. 

  1004.       fileList`),n("span",{class:"token punctuation"},","),s(`
    1005. 

  1005.       fileList1`),n("span",{class:"token punctuation"},","),s(`
    1006. 

  1006.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1007. 

  1007.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1008. 

  1008. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1009. 

  1009. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    1010. 

  1010. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("style")]),s(),n("span",{class:"token attr-name"},"scoped"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[s(`
    1011. 

  1011. `),n("span",{class:"token comment"},"/* tile uploaded pictures */"),s(`
    1012. 

  1012. `),n("span",{class:"token selector"},".upload-list-inline :deep(.ant-upload-list-item)"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1013. 

  1013.   `),n("span",{class:"token property"},"float"),n("span",{class:"token punctuation"},":"),s(" left"),n("span",{class:"token punctuation"},";"),s(`
    1014. 

  1014.   `),n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),s(" 200px"),n("span",{class:"token punctuation"},";"),s(`
    1015. 

  1015.   `),n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),s(" 8px"),n("span",{class:"token punctuation"},";"),s(`
    1016. 

  1016. `),n("span",{class:"token punctuation"},"}"),s(`
    1017. 

  1017. `),n("span",{class:"token selector"},".upload-list-inline :deep(.ant-upload-animate-enter)"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1018. 

  1018.   `),n("span",{class:"token property"},"animation-name"),n("span",{class:"token punctuation"},":"),s(" uploadAnimateInlineIn"),n("span",{class:"token punctuation"},";"),s(`
    1019. 

  1019. `),n("span",{class:"token punctuation"},"}"),s(`
    1020. 

  1020. `),n("span",{class:"token selector"},".upload-list-inline :deep(.ant-upload-animate-leave)"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1021. 

  1021.   `),n("span",{class:"token property"},"animation-name"),n("span",{class:"token punctuation"},":"),s(" uploadAnimateInlineOut"),n("span",{class:"token punctuation"},";"),s(`
    1022. 

  1022. `),n("span",{class:"token punctuation"},"}"),s(`
    1023. 

  1023. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("style")]),n("span",{class:"token punctuation"},">")]),s(`
    1024. 

  1024. `)])],-1)])),jsVersionHtml:o(()=>a[7]||(a[7]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    1025. 

  1025.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    1026. 

  1026.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(`
    1027. 

  1027.       `),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("https://www.mocky.io/v2/5cc8019d300000980a055e76"),n("span",{class:"token punctuation"},'"')]),s(`
    1028. 

  1028.       `),n("span",{class:"token attr-name"},"list-type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("picture"),n("span",{class:"token punctuation"},'"')]),s(`
    1029. 

  1029.       `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),s("file-list")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList"),n("span",{class:"token punctuation"},'"')]),s(`
    1030. 

  1030.     `),n("span",{class:"token punctuation"},">")]),s(`
    1031. 

  1031.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1032. 

  1032.         `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    1033. 

  1033.         upload
    1034. 

  1034.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1035. 

  1035.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    1036. 

  1036.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("br")]),s(),n("span",{class:"token punctuation"},"/>")]),s(`
    1037. 

  1037.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("br")]),s(),n("span",{class:"token punctuation"},"/>")]),s(`
    1038. 

  1038.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(`
    1039. 

  1039.       `),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("https://www.mocky.io/v2/5cc8019d300000980a055e76"),n("span",{class:"token punctuation"},'"')]),s(`
    1040. 

  1040.       `),n("span",{class:"token attr-name"},"list-type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("picture"),n("span",{class:"token punctuation"},'"')]),s(`
    1041. 

  1041.       `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),s("file-list")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList1"),n("span",{class:"token punctuation"},'"')]),s(`
    1042. 

  1042.       `),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("upload-list-inline"),n("span",{class:"token punctuation"},'"')]),s(`
    1043. 

  1043.     `),n("span",{class:"token punctuation"},">")]),s(`
    1044. 

  1044.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1045. 

  1045.         `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    1046. 

  1046.         upload
    1047. 

  1047.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1048. 

  1048.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    1049. 

  1049.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    1050. 

  1050. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    1051. 

  1051. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    1052. 

  1052. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" UploadOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    1053. 

  1053. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent"),n("span",{class:"token punctuation"},","),s(" ref "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    1054. 

  1054. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    1055. 

  1055.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1056. 

  1056.     UploadOutlined`),n("span",{class:"token punctuation"},","),s(`
    1057. 

  1057.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1058. 

  1058.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1059. 

  1059.     `),n("span",{class:"token keyword"},"const"),s(" fileList "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),s(`
    1060. 

  1060.       `),n("span",{class:"token punctuation"},"{"),s(`
    1061. 

  1061.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'-1'"),n("span",{class:"token punctuation"},","),s(`
    1062. 

  1062.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'xxx.png'"),n("span",{class:"token punctuation"},","),s(`
    1063. 

  1063.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    1064. 

  1064.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    1065. 

  1065.         `),n("span",{class:"token literal-property property"},"thumbUrl"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    1066. 

  1066.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1067. 

  1067.       `),n("span",{class:"token punctuation"},"{"),s(`
    1068. 

  1068.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'-2'"),n("span",{class:"token punctuation"},","),s(`
    1069. 

  1069.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'yyy.png'"),n("span",{class:"token punctuation"},","),s(`
    1070. 

  1070.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    1071. 

  1071.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    1072. 

  1072.         `),n("span",{class:"token literal-property property"},"thumbUrl"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    1073. 

  1073.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1074. 

  1074.     `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1075. 

  1075.     `),n("span",{class:"token keyword"},"const"),s(" fileList1 "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),s(`
    1076. 

  1076.       `),n("span",{class:"token punctuation"},"{"),s(`
    1077. 

  1077.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'-1'"),n("span",{class:"token punctuation"},","),s(`
    1078. 

  1078.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'xxx.png'"),n("span",{class:"token punctuation"},","),s(`
    1079. 

  1079.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    1080. 

  1080.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    1081. 

  1081.         `),n("span",{class:"token literal-property property"},"thumbUrl"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    1082. 

  1082.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1083. 

  1083.       `),n("span",{class:"token punctuation"},"{"),s(`
    1084. 

  1084.         `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'-2'"),n("span",{class:"token punctuation"},","),s(`
    1085. 

  1085.         `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'yyy.png'"),n("span",{class:"token punctuation"},","),s(`
    1086. 

  1086.         `),n("span",{class:"token literal-property property"},"status"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'done'"),n("span",{class:"token punctuation"},","),s(`
    1087. 

  1087.         `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    1088. 

  1088.         `),n("span",{class:"token literal-property property"},"thumbUrl"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'"),n("span",{class:"token punctuation"},","),s(`
    1089. 

  1089.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1090. 

  1090.     `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1091. 

  1091.     `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1092. 

  1092.       fileList`),n("span",{class:"token punctuation"},","),s(`
    1093. 

  1093.       fileList1`),n("span",{class:"token punctuation"},","),s(`
    1094. 

  1094.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1095. 

  1095.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1096. 

  1096. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1097. 

  1097. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    1098. 

  1098. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("style")]),s(),n("span",{class:"token attr-name"},"scoped"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[s(`
    1099. 

  1099. `),n("span",{class:"token comment"},"/* tile uploaded pictures */"),s(`
    1100. 

  1100. `),n("span",{class:"token selector"},".upload-list-inline :deep(.ant-upload-list-item)"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1101. 

  1101.   `),n("span",{class:"token property"},"float"),n("span",{class:"token punctuation"},":"),s(" left"),n("span",{class:"token punctuation"},";"),s(`
    1102. 

  1102.   `),n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),s(" 200px"),n("span",{class:"token punctuation"},";"),s(`
    1103. 

  1103.   `),n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),s(" 8px"),n("span",{class:"token punctuation"},";"),s(`
    1104. 

  1104. `),n("span",{class:"token punctuation"},"}"),s(`
    1105. 

  1105. `),n("span",{class:"token selector"},".upload-list-inline :deep(.ant-upload-animate-enter)"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1106. 

  1106.   `),n("span",{class:"token property"},"animation-name"),n("span",{class:"token punctuation"},":"),s(" uploadAnimateInlineIn"),n("span",{class:"token punctuation"},";"),s(`
    1107. 

  1107. `),n("span",{class:"token punctuation"},"}"),s(`
    1108. 

  1108. `),n("span",{class:"token selector"},".upload-list-inline :deep(.ant-upload-animate-leave)"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1109. 

  1109.   `),n("span",{class:"token property"},"animation-name"),n("span",{class:"token punctuation"},":"),s(" uploadAnimateInlineOut"),n("span",{class:"token punctuation"},";"),s(`
    1110. 

  1110. `),n("span",{class:"token punctuation"},"}"),s(`
    1111. 

  1111. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("style")]),n("span",{class:"token punctuation"},">")]),s(`
    1112. 

  1112. `)])],-1)])),_:1})}var gn=A(kn,[["render",rn],["__scopeId","data-v-2d73705f"]]);const dn=y({components:{UploadOutlined:f},setup(){const t=m([]),a=m(!1);return{fileList:t,uploading:a,handleRemove:i=>{const c=t.value.indexOf(i),k=t.value.slice();k.splice(c,1),t.value=k},beforeUpload:i=>(t.value=[...t.value,i],!1),handleUpload:()=>{const i=new FormData;t.value.forEach(c=>{i.append("files[]",c)}),a.value=!0,H("https://www.mocky.io/v2/5cc8019d300000980a055e76",{method:"post",data:i}).then(()=>{t.value=[],a.value=!1,Z.success("upload successfully.")}).catch(()=>{a.value=!1,Z.error("upload failed.")})}}}}),Cn={class:"clearfix"};function In(t,a,p,u,r,i){const c=e("upload-outlined"),k=e("a-button"),g=e("a-upload"),d=e("demo-box");return C(),b(d,{jsfiddle:{us:"Upload files manually after `beforeUpload` returns `false`.",cn:"`beforeUpload` \u8FD4\u56DE `false` \u540E\uFF0C\u624B\u52A8\u4E0A\u4F20\u6587\u4EF6\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
    1113. 

  1113. <p><code>beforeUpload</code> \u8FD4\u56DE <code>false</code> \u540E\uFF0C\u624B\u52A8\u4E0A\u4F20\u6587\u4EF6\u3002</p>
    1114. 

  1114. <h2 id="en-us">en-US</h2>
    1115. 

  1115. <p>Upload files manually after <code>beforeUpload</code> returns <code>false</code>.</p>
    1116. 

  1116. `,order:7,title:{"zh-CN":"\u624B\u52A8\u4E0A\u4F20","en-US":"Upload manually"},relativePath:"src/docs/upload/demo/upload-manually.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXYgY2xhc3M9ImNsZWFyZml4Ij4KICAgIDxhLXVwbG9hZCA6ZmlsZS1saXN0PSJmaWxlTGlzdCIgOnJlbW92ZT0iaGFuZGxlUmVtb3ZlIiA6YmVmb3JlLXVwbG9hZD0iYmVmb3JlVXBsb2FkIj4KICAgICAgPGEtYnV0dG9uPgogICAgICAgIDx1cGxvYWQtb3V0bGluZWQ+PC91cGxvYWQtb3V0bGluZWQ+CiAgICAgICAgU2VsZWN0IEZpbGUKICAgICAgPC9hLWJ1dHRvbj4KICAgIDwvYS11cGxvYWQ+CiAgICA8YS1idXR0b24KICAgICAgdHlwZT0icHJpbWFyeSIKICAgICAgOmRpc2FibGVkPSJmaWxlTGlzdC5sZW5ndGggPT09IDAiCiAgICAgIDpsb2FkaW5nPSJ1cGxvYWRpbmciCiAgICAgIHN0eWxlPSJtYXJnaW4tdG9wOiAxNnB4IgogICAgICBAY2xpY2s9ImhhbmRsZVVwbG9hZCIKICAgID4KICAgICAge3sgdXBsb2FkaW5nID8gJ1VwbG9hZGluZycgOiAnU3RhcnQgVXBsb2FkJyB9fQogICAgPC9hLWJ1dHRvbj4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCByZXF1ZXN0IGZyb20gJ3VtaS1yZXF1ZXN0JzsKaW1wb3J0IHsgVXBsb2FkT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwppbXBvcnQgeyBtZXNzYWdlIH0gZnJvbSAnYW50LWRlc2lnbi12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CgppbnRlcmZhY2UgRmlsZUl0ZW0gewogIHVpZDogc3RyaW5nOwogIG5hbWU/OiBzdHJpbmc7CiAgc3RhdHVzPzogc3RyaW5nOwogIHJlc3BvbnNlPzogc3RyaW5nOwogIHVybD86IHN0cmluZzsKICBwcmV2aWV3Pzogc3RyaW5nOwogIG9yaWdpbkZpbGVPYmo/OiBhbnk7CiAgZmlsZTogc3RyaW5nIHwgQmxvYjsKfQoKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBjb21wb25lbnRzOiB7CiAgICBVcGxvYWRPdXRsaW5lZCwKICB9LAogIHNldHVwKCkgewogICAgY29uc3QgZmlsZUxpc3QgPSByZWY8RmlsZUl0ZW1bXT4oW10pOwogICAgY29uc3QgdXBsb2FkaW5nID0gcmVmPGJvb2xlYW4+KGZhbHNlKTsKCiAgICBjb25zdCBoYW5kbGVSZW1vdmUgPSAoZmlsZTogRmlsZUl0ZW0pID0+IHsKICAgICAgY29uc3QgaW5kZXggPSBmaWxlTGlzdC52YWx1ZS5pbmRleE9mKGZpbGUpOwogICAgICBjb25zdCBuZXdGaWxlTGlzdCA9IGZpbGVMaXN0LnZhbHVlLnNsaWNlKCk7CiAgICAgIG5ld0ZpbGVMaXN0LnNwbGljZShpbmRleCwgMSk7CiAgICAgIGZpbGVMaXN0LnZhbHVlID0gbmV3RmlsZUxpc3Q7CiAgICB9OwoKICAgIGNvbnN0IGJlZm9yZVVwbG9hZCA9IChmaWxlOiBGaWxlSXRlbSkgPT4gewogICAgICBmaWxlTGlzdC52YWx1ZSA9IFsuLi5maWxlTGlzdC52YWx1ZSwgZmlsZV07CiAgICAgIHJldHVybiBmYWxzZTsKICAgIH07CgogICAgY29uc3QgaGFuZGxlVXBsb2FkID0gKCkgPT4gewogICAgICBjb25zdCBmb3JtRGF0YSA9IG5ldyBGb3JtRGF0YSgpOwogICAgICBmaWxlTGlzdC52YWx1ZS5mb3JFYWNoKChmaWxlOiBGaWxlSXRlbSkgPT4gewogICAgICAgIGZvcm1EYXRhLmFwcGVuZCgnZmlsZXNbXScsIGZpbGUgYXMgYW55KTsKICAgICAgfSk7CiAgICAgIHVwbG9hZGluZy52YWx1ZSA9IHRydWU7CgogICAgICAvLyBZb3UgY2FuIHVzZSBhbnkgQUpBWCBsaWJyYXJ5IHlvdSBsaWtlCiAgICAgIHJlcXVlc3QoJ2h0dHBzOi8vd3d3Lm1vY2t5LmlvL3YyLzVjYzgwMTlkMzAwMDAwOTgwYTA1NWU3NicsIHsKICAgICAgICBtZXRob2Q6ICdwb3N0JywKICAgICAgICBkYXRhOiBmb3JtRGF0YSwKICAgICAgfSkKICAgICAgICAudGhlbigoKSA9PiB7CiAgICAgICAgICBmaWxlTGlzdC52YWx1ZSA9IFtdOwogICAgICAgICAgdXBsb2FkaW5nLnZhbHVlID0gZmFsc2U7CiAgICAgICAgICBtZXNzYWdlLnN1Y2Nlc3MoJ3VwbG9hZCBzdWNjZXNzZnVsbHkuJyk7CiAgICAgICAgfSkKICAgICAgICAuY2F0Y2goKCkgPT4gewogICAgICAgICAgdXBsb2FkaW5nLnZhbHVlID0gZmFsc2U7CiAgICAgICAgICBtZXNzYWdlLmVycm9yKCd1cGxvYWQgZmFpbGVkLicpOwogICAgICAgIH0pOwogICAgfTsKCiAgICByZXR1cm4gewogICAgICBmaWxlTGlzdCwKICAgICAgdXBsb2FkaW5nLAogICAgICBoYW5kbGVSZW1vdmUsCiAgICAgIGJlZm9yZVVwbG9hZCwKICAgICAgaGFuZGxlVXBsb2FkLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXYgY2xhc3M9ImNsZWFyZml4Ij4KICAgIDxhLXVwbG9hZCA6ZmlsZS1saXN0PSJmaWxlTGlzdCIgOnJlbW92ZT0iaGFuZGxlUmVtb3ZlIiA6YmVmb3JlLXVwbG9hZD0iYmVmb3JlVXBsb2FkIj4KICAgICAgPGEtYnV0dG9uPgogICAgICAgIDx1cGxvYWQtb3V0bGluZWQ+PC91cGxvYWQtb3V0bGluZWQ+CiAgICAgICAgU2VsZWN0IEZpbGUKICAgICAgPC9hLWJ1dHRvbj4KICAgIDwvYS11cGxvYWQ+CiAgICA8YS1idXR0b24KICAgICAgdHlwZT0icHJpbWFyeSIKICAgICAgOmRpc2FibGVkPSJmaWxlTGlzdC5sZW5ndGggPT09IDAiCiAgICAgIDpsb2FkaW5nPSJ1cGxvYWRpbmciCiAgICAgIHN0eWxlPSJtYXJnaW4tdG9wOiAxNnB4IgogICAgICBAY2xpY2s9ImhhbmRsZVVwbG9hZCIKICAgID4KICAgICAge3sgdXBsb2FkaW5nID8gJ1VwbG9hZGluZycgOiAnU3RhcnQgVXBsb2FkJyB9fQogICAgPC9hLWJ1dHRvbj4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHJlcXVlc3QgZnJvbSAndW1pLXJlcXVlc3QnOwppbXBvcnQgeyBVcGxvYWRPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmltcG9ydCB7IG1lc3NhZ2UgfSBmcm9tICdhbnQtZGVzaWduLXZ1ZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBjb21wb25lbnRzOiB7CiAgICBVcGxvYWRPdXRsaW5lZCwKICB9LAogIHNldHVwKCkgewogICAgY29uc3QgZmlsZUxpc3QgPSByZWYoW10pOwogICAgY29uc3QgdXBsb2FkaW5nID0gcmVmKGZhbHNlKTsKICAgIGNvbnN0IGhhbmRsZVJlbW92ZSA9IGZpbGUgPT4gewogICAgICBjb25zdCBpbmRleCA9IGZpbGVMaXN0LnZhbHVlLmluZGV4T2YoZmlsZSk7CiAgICAgIGNvbnN0IG5ld0ZpbGVMaXN0ID0gZmlsZUxpc3QudmFsdWUuc2xpY2UoKTsKICAgICAgbmV3RmlsZUxpc3Quc3BsaWNlKGluZGV4LCAxKTsKICAgICAgZmlsZUxpc3QudmFsdWUgPSBuZXdGaWxlTGlzdDsKICAgIH07CiAgICBjb25zdCBiZWZvcmVVcGxvYWQgPSBmaWxlID0+IHsKICAgICAgZmlsZUxpc3QudmFsdWUgPSBbLi4uZmlsZUxpc3QudmFsdWUsIGZpbGVdOwogICAgICByZXR1cm4gZmFsc2U7CiAgICB9OwogICAgY29uc3QgaGFuZGxlVXBsb2FkID0gKCkgPT4gewogICAgICBjb25zdCBmb3JtRGF0YSA9IG5ldyBGb3JtRGF0YSgpOwogICAgICBmaWxlTGlzdC52YWx1ZS5mb3JFYWNoKGZpbGUgPT4gewogICAgICAgIGZvcm1EYXRhLmFwcGVuZCgnZmlsZXNbXScsIGZpbGUpOwogICAgICB9KTsKICAgICAgdXBsb2FkaW5nLnZhbHVlID0gdHJ1ZTsKCiAgICAgIC8vIFlvdSBjYW4gdXNlIGFueSBBSkFYIGxpYnJhcnkgeW91IGxpa2UKICAgICAgcmVxdWVzdCgnaHR0cHM6Ly93d3cubW9ja3kuaW8vdjIvNWNjODAxOWQzMDAwMDA5ODBhMDU1ZTc2JywgewogICAgICAgIG1ldGhvZDogJ3Bvc3QnLAogICAgICAgIGRhdGE6IGZvcm1EYXRhLAogICAgICB9KQogICAgICAgIC50aGVuKCgpID0+IHsKICAgICAgICAgIGZpbGVMaXN0LnZhbHVlID0gW107CiAgICAgICAgICB1cGxvYWRpbmcudmFsdWUgPSBmYWxzZTsKICAgICAgICAgIG1lc3NhZ2Uuc3VjY2VzcygndXBsb2FkIHN1Y2Nlc3NmdWxseS4nKTsKICAgICAgICB9KQogICAgICAgIC5jYXRjaCgoKSA9PiB7CiAgICAgICAgICB1cGxvYWRpbmcudmFsdWUgPSBmYWxzZTsKICAgICAgICAgIG1lc3NhZ2UuZXJyb3IoJ3VwbG9hZCBmYWlsZWQuJyk7CiAgICAgICAgfSk7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgZmlsZUxpc3QsCiAgICAgIHVwbG9hZGluZywKICAgICAgaGFuZGxlUmVtb3ZlLAogICAgICBiZWZvcmVVcGxvYWQsCiAgICAgIGhhbmRsZVVwbG9hZCwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:o(()=>[n("div",Cn,[l(g,{"file-list":t.fileList,remove:t.handleRemove,"before-upload":t.beforeUpload},{default:o(()=>[l(k,null,{default:o(()=>[l(c),a[0]||(a[0]=s(" Select File "))]),_:1,__:[0]})]),_:1},8,["file-list","remove","before-upload"]),l(k,{type:"primary",disabled:t.fileList.length===0,loading:t.uploading,style:{"margin-top":"16px"},onClick:t.handleUpload},{default:o(()=>[s(R(t.uploading?"Uploading":"Start Upload"),1)]),_:1},8,["disabled","loading","onClick"])])]),htmlCode:o(()=>a[1]||(a[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    1117. 

  1117.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("div")]),s(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("clearfix"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(`
    1118. 

  1118.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(),n("span",{class:"token attr-name"},":file-list"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token attr-name"},":remove"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("handleRemove"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token attr-name"},":before-upload"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("beforeUpload"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(`
    1119. 

  1119.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1120. 

  1120.         `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    1121. 

  1121.         Select File
    1122. 

  1122.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1123. 

  1123.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    1124. 

  1124.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-button")]),s(`
    1125. 

  1125.       `),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("primary"),n("span",{class:"token punctuation"},'"')]),s(`
    1126. 

  1126.       `),n("span",{class:"token attr-name"},":disabled"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList.length === 0"),n("span",{class:"token punctuation"},'"')]),s(`
    1127. 

  1127.       `),n("span",{class:"token attr-name"},":loading"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("uploading"),n("span",{class:"token punctuation"},'"')]),s(`
    1128. 

  1128.       `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-top"),n("span",{class:"token punctuation"},":"),s(" 16px")]),n("span",{class:"token punctuation"},'"')])]),s(`
    1129. 

  1129.       `),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("handleUpload"),n("span",{class:"token punctuation"},'"')]),s(`
    1130. 

  1130.     `),n("span",{class:"token punctuation"},">")]),s(`
    1131. 

  1131.       {{ uploading ? 'Uploading' : 'Start Upload' }}
    1132. 

  1132.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1133. 

  1133.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    1134. 

  1134. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    1135. 

  1135. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),s(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    1136. 

  1136. `),n("span",{class:"token keyword"},"import"),s(" request "),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'umi-request'"),n("span",{class:"token punctuation"},";"),s(`
    1137. 

  1137. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" UploadOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    1138. 

  1138. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" message "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),s(`
    1139. 

  1139. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent"),n("span",{class:"token punctuation"},","),s(" ref "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    1140. 

  1140. 

  1141. `),n("span",{class:"token keyword"},"interface"),s(),n("span",{class:"token class-name"},"FileItem"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1142. 

  1142.   `),n("span",{class:"token literal-property property"},"uid"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    1143. 

  1143.   name`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    1144. 

  1144.   status`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    1145. 

  1145.   response`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    1146. 

  1146.   url`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    1147. 

  1147.   preview`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    1148. 

  1148.   originFileObj`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(" any"),n("span",{class:"token punctuation"},";"),s(`
    1149. 

  1149.   `),n("span",{class:"token literal-property property"},"file"),n("span",{class:"token operator"},":"),s(" string "),n("span",{class:"token operator"},"|"),s(" Blob"),n("span",{class:"token punctuation"},";"),s(`
    1150. 

  1150. `),n("span",{class:"token punctuation"},"}"),s(`
    1151. 

  1151. 

  1152. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    1153. 

  1153.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1154. 

  1154.     UploadOutlined`),n("span",{class:"token punctuation"},","),s(`
    1155. 

  1155.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1156. 

  1156.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1157. 

  1157.     `),n("span",{class:"token keyword"},"const"),s(" fileList "),n("span",{class:"token operator"},"="),s(" ref"),n("span",{class:"token operator"},"<"),s("FileItem"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1158. 

  1158.     `),n("span",{class:"token keyword"},"const"),s(" uploading "),n("span",{class:"token operator"},"="),s(" ref"),n("span",{class:"token operator"},"<"),s("boolean"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1159. 

  1159. 

  1160.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"handleRemove"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"file"),n("span",{class:"token operator"},":"),s(" FileItem")]),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1161. 

  1161.       `),n("span",{class:"token keyword"},"const"),s(" index "),n("span",{class:"token operator"},"="),s(" fileList"),n("span",{class:"token punctuation"},"."),s("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"indexOf"),n("span",{class:"token punctuation"},"("),s("file"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1162. 

  1162.       `),n("span",{class:"token keyword"},"const"),s(" newFileList "),n("span",{class:"token operator"},"="),s(" fileList"),n("span",{class:"token punctuation"},"."),s("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"slice"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1163. 

  1163.       newFileList`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"splice"),n("span",{class:"token punctuation"},"("),s("index"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1164. 

  1164.       fileList`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(" newFileList"),n("span",{class:"token punctuation"},";"),s(`
    1165. 

  1165.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1166. 

  1166. 

  1167.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"beforeUpload"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"file"),n("span",{class:"token operator"},":"),s(" FileItem")]),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1168. 

  1168.       fileList`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"["),n("span",{class:"token operator"},"..."),s("fileList"),n("span",{class:"token punctuation"},"."),s("value"),n("span",{class:"token punctuation"},","),s(" file"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),s(`
    1169. 

  1169.       `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),s(`
    1170. 

  1170.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1171. 

  1171. 

  1172.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"handleUpload"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1173. 

  1173.       `),n("span",{class:"token keyword"},"const"),s(" formData "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token keyword"},"new"),s(),n("span",{class:"token class-name"},"FormData"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1174. 

  1174.       fileList`),n("span",{class:"token punctuation"},"."),s("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"forEach"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"file"),n("span",{class:"token operator"},":"),s(" FileItem")]),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1175. 

  1175.         formData`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"append"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'files[]'"),n("span",{class:"token punctuation"},","),s(" file "),n("span",{class:"token keyword"},"as"),s(" any"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1176. 

  1176.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1177. 

  1177.       uploading`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),s(`
    1178. 

  1178. 

  1179.       `),n("span",{class:"token comment"},"// You can use any AJAX library you like"),s(`
    1180. 

  1180.       `),n("span",{class:"token function"},"request"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'https://www.mocky.io/v2/5cc8019d300000980a055e76'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token punctuation"},"{"),s(`
    1181. 

  1181.         `),n("span",{class:"token literal-property property"},"method"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'post'"),n("span",{class:"token punctuation"},","),s(`
    1182. 

  1182.         `),n("span",{class:"token literal-property property"},"data"),n("span",{class:"token operator"},":"),s(" formData"),n("span",{class:"token punctuation"},","),s(`
    1183. 

  1183.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),s(`
    1184. 

  1184.         `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1185. 

  1185.           fileList`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),s(`
    1186. 

  1186.           uploading`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),s(`
    1187. 

  1187.           message`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"success"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'upload successfully.'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1188. 

  1188.         `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),s(`
    1189. 

  1189.         `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"catch"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1190. 

  1190.           uploading`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),s(`
    1191. 

  1191.           message`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"error"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'upload failed.'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1192. 

  1192.         `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1193. 

  1193.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1194. 

  1194. 

  1195.     `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1196. 

  1196.       fileList`),n("span",{class:"token punctuation"},","),s(`
    1197. 

  1197.       uploading`),n("span",{class:"token punctuation"},","),s(`
    1198. 

  1198.       handleRemove`),n("span",{class:"token punctuation"},","),s(`
    1199. 

  1199.       beforeUpload`),n("span",{class:"token punctuation"},","),s(`
    1200. 

  1200.       handleUpload`),n("span",{class:"token punctuation"},","),s(`
    1201. 

  1201.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1202. 

  1202.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1203. 

  1203. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1204. 

  1204. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    1205. 

  1205. `)])],-1)])),jsVersionHtml:o(()=>a[2]||(a[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    1206. 

  1206.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("div")]),s(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("clearfix"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(`
    1207. 

  1207.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(),n("span",{class:"token attr-name"},":file-list"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token attr-name"},":remove"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("handleRemove"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token attr-name"},":before-upload"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("beforeUpload"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(`
    1208. 

  1208.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1209. 

  1209.         `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    1210. 

  1210.         Select File
    1211. 

  1211.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1212. 

  1212.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    1213. 

  1213.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-button")]),s(`
    1214. 

  1214.       `),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("primary"),n("span",{class:"token punctuation"},'"')]),s(`
    1215. 

  1215.       `),n("span",{class:"token attr-name"},":disabled"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList.length === 0"),n("span",{class:"token punctuation"},'"')]),s(`
    1216. 

  1216.       `),n("span",{class:"token attr-name"},":loading"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("uploading"),n("span",{class:"token punctuation"},'"')]),s(`
    1217. 

  1217.       `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-top"),n("span",{class:"token punctuation"},":"),s(" 16px")]),n("span",{class:"token punctuation"},'"')])]),s(`
    1218. 

  1218.       `),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("handleUpload"),n("span",{class:"token punctuation"},'"')]),s(`
    1219. 

  1219.     `),n("span",{class:"token punctuation"},">")]),s(`
    1220. 

  1220.       {{ uploading ? 'Uploading' : 'Start Upload' }}
    1221. 

  1221.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1222. 

  1222.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    1223. 

  1223. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    1224. 

  1224. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    1225. 

  1225. `),n("span",{class:"token keyword"},"import"),s(" request "),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'umi-request'"),n("span",{class:"token punctuation"},";"),s(`
    1226. 

  1226. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" UploadOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    1227. 

  1227. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" message "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),s(`
    1228. 

  1228. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent"),n("span",{class:"token punctuation"},","),s(" ref "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    1229. 

  1229. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    1230. 

  1230.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1231. 

  1231.     UploadOutlined`),n("span",{class:"token punctuation"},","),s(`
    1232. 

  1232.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1233. 

  1233.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1234. 

  1234.     `),n("span",{class:"token keyword"},"const"),s(" fileList "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1235. 

  1235.     `),n("span",{class:"token keyword"},"const"),s(" uploading "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1236. 

  1236.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"handleRemove"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token parameter"},"file"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1237. 

  1237.       `),n("span",{class:"token keyword"},"const"),s(" index "),n("span",{class:"token operator"},"="),s(" fileList"),n("span",{class:"token punctuation"},"."),s("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"indexOf"),n("span",{class:"token punctuation"},"("),s("file"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1238. 

  1238.       `),n("span",{class:"token keyword"},"const"),s(" newFileList "),n("span",{class:"token operator"},"="),s(" fileList"),n("span",{class:"token punctuation"},"."),s("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"slice"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1239. 

  1239.       newFileList`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"splice"),n("span",{class:"token punctuation"},"("),s("index"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1240. 

  1240.       fileList`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(" newFileList"),n("span",{class:"token punctuation"},";"),s(`
    1241. 

  1241.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1242. 

  1242.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"beforeUpload"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token parameter"},"file"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1243. 

  1243.       fileList`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"["),n("span",{class:"token operator"},"..."),s("fileList"),n("span",{class:"token punctuation"},"."),s("value"),n("span",{class:"token punctuation"},","),s(" file"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),s(`
    1244. 

  1244.       `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),s(`
    1245. 

  1245.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1246. 

  1246.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"handleUpload"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1247. 

  1247.       `),n("span",{class:"token keyword"},"const"),s(" formData "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token keyword"},"new"),s(),n("span",{class:"token class-name"},"FormData"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1248. 

  1248.       fileList`),n("span",{class:"token punctuation"},"."),s("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"forEach"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"file"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1249. 

  1249.         formData`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"append"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'files[]'"),n("span",{class:"token punctuation"},","),s(" file"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1250. 

  1250.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1251. 

  1251.       uploading`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),s(`
    1252. 

  1252. 

  1253.       `),n("span",{class:"token comment"},"// You can use any AJAX library you like"),s(`
    1254. 

  1254.       `),n("span",{class:"token function"},"request"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'https://www.mocky.io/v2/5cc8019d300000980a055e76'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token punctuation"},"{"),s(`
    1255. 

  1255.         `),n("span",{class:"token literal-property property"},"method"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'post'"),n("span",{class:"token punctuation"},","),s(`
    1256. 

  1256.         `),n("span",{class:"token literal-property property"},"data"),n("span",{class:"token operator"},":"),s(" formData"),n("span",{class:"token punctuation"},","),s(`
    1257. 

  1257.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),s(`
    1258. 

  1258.         `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1259. 

  1259.           fileList`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),s(`
    1260. 

  1260.           uploading`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),s(`
    1261. 

  1261.           message`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"success"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'upload successfully.'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1262. 

  1262.         `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),s(`
    1263. 

  1263.         `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"catch"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1264. 

  1264.           uploading`),n("span",{class:"token punctuation"},"."),s("value "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),s(`
    1265. 

  1265.           message`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"error"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'upload failed.'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1266. 

  1266.         `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1267. 

  1267.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1268. 

  1268.     `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1269. 

  1269.       fileList`),n("span",{class:"token punctuation"},","),s(`
    1270. 

  1270.       uploading`),n("span",{class:"token punctuation"},","),s(`
    1271. 

  1271.       handleRemove`),n("span",{class:"token punctuation"},","),s(`
    1272. 

  1272.       beforeUpload`),n("span",{class:"token punctuation"},","),s(`
    1273. 

  1273.       handleUpload`),n("span",{class:"token punctuation"},","),s(`
    1274. 

  1274.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1275. 

  1275.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1276. 

  1276. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1277. 

  1277. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    1278. 

  1278. `)])],-1)])),_:1})}var mn=A(dn,[["render",In]]);const bn=y({components:{UploadOutlined:f}});function An(t,a,p,u,r,i){const c=e("upload-outlined"),k=e("a-button"),g=e("a-upload"),d=e("demo-box");return C(),b(d,{jsfiddle:{us:"You can select and upload a whole directory.",cn:"\u652F\u6301\u4E0A\u4F20\u4E00\u4E2A\u6587\u4EF6\u5939\u91CC\u7684\u6240\u6709\u6587\u4EF6\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
    1279. 

  1279. <p>\u652F\u6301\u4E0A\u4F20\u4E00\u4E2A\u6587\u4EF6\u5939\u91CC\u7684\u6240\u6709\u6587\u4EF6\u3002</p>
    1280. 

  1280. <h2 id="en-us">en-US</h2>
    1281. 

  1281. <p>You can select and upload a whole directory.</p>
    1282. 

  1282. `,order:8,title:{"zh-CN":"\u6587\u4EF6\u5939\u4E0A\u4F20","en-US":"Upload directory"},relativePath:"src/docs/upload/demo/directory.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXVwbG9hZCBhY3Rpb249Imh0dHBzOi8vd3d3Lm1vY2t5LmlvL3YyLzVjYzgwMTlkMzAwMDAwOTgwYTA1NWU3NiIgZGlyZWN0b3J5PgogICAgPGEtYnV0dG9uPgogICAgICA8dXBsb2FkLW91dGxpbmVkPjwvdXBsb2FkLW91dGxpbmVkPgogICAgICBVcGxvYWQgRGlyZWN0b3J5CiAgICA8L2EtYnV0dG9uPgogIDwvYS11cGxvYWQ+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwppbXBvcnQgeyBVcGxvYWRPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CgpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIFVwbG9hZE91dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXVwbG9hZCBhY3Rpb249Imh0dHBzOi8vd3d3Lm1vY2t5LmlvL3YyLzVjYzgwMTlkMzAwMDAwOTgwYTA1NWU3NiIgZGlyZWN0b3J5PgogICAgPGEtYnV0dG9uPgogICAgICA8dXBsb2FkLW91dGxpbmVkPjwvdXBsb2FkLW91dGxpbmVkPgogICAgICBVcGxvYWQgRGlyZWN0b3J5CiAgICA8L2EtYnV0dG9uPgogIDwvYS11cGxvYWQ+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7IFVwbG9hZE91dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBjb21wb25lbnRzOiB7CiAgICBVcGxvYWRPdXRsaW5lZCwKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:o(()=>[l(g,{action:"https://www.mocky.io/v2/5cc8019d300000980a055e76",directory:""},{default:o(()=>[l(k,null,{default:o(()=>[l(c),a[0]||(a[0]=s(" Upload Directory "))]),_:1,__:[0]})]),_:1})]),htmlCode:o(()=>a[1]||(a[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    1283. 

  1283.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("https://www.mocky.io/v2/5cc8019d300000980a055e76"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token attr-name"},"directory"),n("span",{class:"token punctuation"},">")]),s(`
    1284. 

  1284.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1285. 

  1285.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    1286. 

  1286.       Upload Directory
    1287. 

  1287.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1288. 

  1288.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    1289. 

  1289. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    1290. 

  1290. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),s(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    1291. 

  1291. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    1292. 

  1292. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" UploadOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    1293. 

  1293. 

  1294. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    1295. 

  1295.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1296. 

  1296.     UploadOutlined`),n("span",{class:"token punctuation"},","),s(`
    1297. 

  1297.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1298. 

  1298. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1299. 

  1299. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    1300. 

  1300. `)])],-1)])),jsVersionHtml:o(()=>a[2]||(a[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    1301. 

  1301.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("https://www.mocky.io/v2/5cc8019d300000980a055e76"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token attr-name"},"directory"),n("span",{class:"token punctuation"},">")]),s(`
    1302. 

  1302.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1303. 

  1303.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    1304. 

  1304.       Upload Directory
    1305. 

  1305.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1306. 

  1306.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    1307. 

  1307. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    1308. 

  1308. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    1309. 

  1309. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    1310. 

  1310. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" UploadOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    1311. 

  1311. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    1312. 

  1312.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1313. 

  1313.     UploadOutlined`),n("span",{class:"token punctuation"},","),s(`
    1314. 

  1314.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1315. 

  1315. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1316. 

  1316. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    1317. 

  1317. `)])],-1)])),_:1})}var yn=A(bn,[["render",An]]);const Zn=y({components:{UploadOutlined:f},setup(){return{previewFile:async a=>{console.log("Your upload file:",a);const p=await fetch("https://next.json-generator.com/api/json/get/4ytyBoLK8",{method:"POST",body:a}),{thumbnail:u}=await p.json();return u},fileList:m([])}}});function fn(t,a,p,u,r,i){const c=e("upload-outlined"),k=e("a-button"),g=e("a-upload"),d=e("demo-box");return C(),b(d,{jsfiddle:{us:"Customize local preview. Can handle with non-image format files such as video.",cn:"\u81EA\u5B9A\u4E49\u672C\u5730\u9884\u89C8\uFF0C\u7528\u4E8E\u5904\u7406\u975E\u56FE\u7247\u683C\u5F0F\u6587\u4EF6\uFF08\u4F8B\u5982\u89C6\u9891\u6587\u4EF6\uFF09\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
    1318. 

  1318. <p>\u81EA\u5B9A\u4E49\u672C\u5730\u9884\u89C8\uFF0C\u7528\u4E8E\u5904\u7406\u975E\u56FE\u7247\u683C\u5F0F\u6587\u4EF6\uFF08\u4F8B\u5982\u89C6\u9891\u6587\u4EF6\uFF09\u3002</p>
    1319. 

  1319. <h2 id="en-us">en-US</h2>
    1320. 

  1320. <p>Customize local preview. Can handle with non-image format files such as video.</p>
    1321. 

  1321. `,order:9,title:{"zh-CN":"\u81EA\u5B9A\u4E49\u9884\u89C8","en-US":"Customize preview file"},relativePath:"src/docs/upload/demo/preview-file.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS11cGxvYWQKICAgICAgbGlzdC10eXBlPSJwaWN0dXJlIgogICAgICBhY3Rpb249Ii8vanNvbnBsYWNlaG9sZGVyLnR5cGljb2RlLmNvbS9wb3N0cy8iCiAgICAgIDpwcmV2aWV3LWZpbGU9InByZXZpZXdGaWxlIgogICAgICB2LW1vZGVsOmZpbGUtbGlzdD0iZmlsZUxpc3QiCiAgICA+CiAgICAgIDxhLWJ1dHRvbj4KICAgICAgICA8dXBsb2FkLW91dGxpbmVkPjwvdXBsb2FkLW91dGxpbmVkPgogICAgICAgIFVwbG9hZAogICAgICA8L2EtYnV0dG9uPgogICAgPC9hLXVwbG9hZD4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IFVwbG9hZE91dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYgfSBmcm9tICd2dWUnOwoKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBjb21wb25lbnRzOiB7CiAgICBVcGxvYWRPdXRsaW5lZCwKICB9LAogIHNldHVwKCkgewogICAgY29uc3QgcHJldmlld0ZpbGUgPSBhc3luYyAoZmlsZTogYW55KTogUHJvbWlzZTxSZXNwb25zZT4gPT4gewogICAgICBjb25zb2xlLmxvZygnWW91ciB1cGxvYWQgZmlsZTonLCBmaWxlKTsKICAgICAgLy8gWW91ciBwcm9jZXNzIGxvZ2ljLiBIZXJlIHdlIGp1c3QgbW9jayB0byB0aGUgc2FtZSBmaWxlCiAgICAgIGNvbnN0IHJlcyA9IGF3YWl0IGZldGNoKCdodHRwczovL25leHQuanNvbi1nZW5lcmF0b3IuY29tL2FwaS9qc29uL2dldC80eXR5Qm9MSzgnLCB7CiAgICAgICAgbWV0aG9kOiAnUE9TVCcsCiAgICAgICAgYm9keTogZmlsZSwKICAgICAgfSk7CiAgICAgIGNvbnN0IHsgdGh1bWJuYWlsIH0gPSBhd2FpdCByZXMuanNvbigpOwogICAgICByZXR1cm4gdGh1bWJuYWlsOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIHByZXZpZXdGaWxlLAogICAgICBmaWxlTGlzdDogcmVmKFtdKSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS11cGxvYWQKICAgICAgbGlzdC10eXBlPSJwaWN0dXJlIgogICAgICBhY3Rpb249Ii8vanNvbnBsYWNlaG9sZGVyLnR5cGljb2RlLmNvbS9wb3N0cy8iCiAgICAgIDpwcmV2aWV3LWZpbGU9InByZXZpZXdGaWxlIgogICAgICB2LW1vZGVsOmZpbGUtbGlzdD0iZmlsZUxpc3QiCiAgICA+CiAgICAgIDxhLWJ1dHRvbj4KICAgICAgICA8dXBsb2FkLW91dGxpbmVkPjwvdXBsb2FkLW91dGxpbmVkPgogICAgICAgIFVwbG9hZAogICAgICA8L2EtYnV0dG9uPgogICAgPC9hLXVwbG9hZD4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgVXBsb2FkT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgVXBsb2FkT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IHByZXZpZXdGaWxlID0gYXN5bmMgZmlsZSA9PiB7CiAgICAgIGNvbnNvbGUubG9nKCdZb3VyIHVwbG9hZCBmaWxlOicsIGZpbGUpOwogICAgICAvLyBZb3VyIHByb2Nlc3MgbG9naWMuIEhlcmUgd2UganVzdCBtb2NrIHRvIHRoZSBzYW1lIGZpbGUKICAgICAgY29uc3QgcmVzID0gYXdhaXQgZmV0Y2goJ2h0dHBzOi8vbmV4dC5qc29uLWdlbmVyYXRvci5jb20vYXBpL2pzb24vZ2V0LzR5dHlCb0xLOCcsIHsKICAgICAgICBtZXRob2Q6ICdQT1NUJywKICAgICAgICBib2R5OiBmaWxlLAogICAgICB9KTsKICAgICAgY29uc3QgeyB0aHVtYm5haWwgfSA9IGF3YWl0IHJlcy5qc29uKCk7CiAgICAgIHJldHVybiB0aHVtYm5haWw7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgcHJldmlld0ZpbGUsCiAgICAgIGZpbGVMaXN0OiByZWYoW10pLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:o(()=>[n("div",null,[l(g,{"list-type":"picture",action:"//jsonplaceholder.typicode.com/posts/","preview-file":t.previewFile,"file-list":t.fileList,"onUpdate:fileList":a[0]||(a[0]=I=>t.fileList=I)},{default:o(()=>[l(k,null,{default:o(()=>[l(c),a[1]||(a[1]=s(" Upload "))]),_:1,__:[1]})]),_:1},8,["preview-file","file-list"])])]),htmlCode:o(()=>a[2]||(a[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    1322. 

  1322.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    1323. 

  1323.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(`
    1324. 

  1324.       `),n("span",{class:"token attr-name"},"list-type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("picture"),n("span",{class:"token punctuation"},'"')]),s(`
    1325. 

  1325.       `),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("//jsonplaceholder.typicode.com/posts/"),n("span",{class:"token punctuation"},'"')]),s(`
    1326. 

  1326.       `),n("span",{class:"token attr-name"},":preview-file"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("previewFile"),n("span",{class:"token punctuation"},'"')]),s(`
    1327. 

  1327.       `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),s("file-list")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList"),n("span",{class:"token punctuation"},'"')]),s(`
    1328. 

  1328.     `),n("span",{class:"token punctuation"},">")]),s(`
    1329. 

  1329.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1330. 

  1330.         `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    1331. 

  1331.         Upload
    1332. 

  1332.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1333. 

  1333.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    1334. 

  1334.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    1335. 

  1335. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    1336. 

  1336. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),s(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    1337. 

  1337. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" UploadOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    1338. 

  1338. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent"),n("span",{class:"token punctuation"},","),s(" ref "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    1339. 

  1339. 

  1340. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    1341. 

  1341.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1342. 

  1342.     UploadOutlined`),n("span",{class:"token punctuation"},","),s(`
    1343. 

  1343.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1344. 

  1344.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1345. 

  1345.     `),n("span",{class:"token keyword"},"const"),s(" previewFile "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token keyword"},"async"),s(),n("span",{class:"token punctuation"},"("),s("file"),n("span",{class:"token operator"},":"),s(" any"),n("span",{class:"token punctuation"},")"),n("span",{class:"token operator"},":"),s(" Promise"),n("span",{class:"token operator"},"<"),s("Response"),n("span",{class:"token operator"},">"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1346. 

  1346.       console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Your upload file:'"),n("span",{class:"token punctuation"},","),s(" file"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1347. 

  1347.       `),n("span",{class:"token comment"},"// Your process logic. Here we just mock to the same file"),s(`
    1348. 

  1348.       `),n("span",{class:"token keyword"},"const"),s(" res "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token keyword"},"await"),s(),n("span",{class:"token function"},"fetch"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'https://next.json-generator.com/api/json/get/4ytyBoLK8'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token punctuation"},"{"),s(`
    1349. 

  1349.         `),n("span",{class:"token literal-property property"},"method"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'POST'"),n("span",{class:"token punctuation"},","),s(`
    1350. 

  1350.         `),n("span",{class:"token literal-property property"},"body"),n("span",{class:"token operator"},":"),s(" file"),n("span",{class:"token punctuation"},","),s(`
    1351. 

  1351.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1352. 

  1352.       `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token punctuation"},"{"),s(" thumbnail "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token keyword"},"await"),s(" res"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"json"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1353. 

  1353.       `),n("span",{class:"token keyword"},"return"),s(" thumbnail"),n("span",{class:"token punctuation"},";"),s(`
    1354. 

  1354.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1355. 

  1355.     `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1356. 

  1356.       previewFile`),n("span",{class:"token punctuation"},","),s(`
    1357. 

  1357.       `),n("span",{class:"token literal-property property"},"fileList"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(`
    1358. 

  1358.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1359. 

  1359.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1360. 

  1360. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1361. 

  1361. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    1362. 

  1362. `)])],-1)])),jsVersionHtml:o(()=>a[3]||(a[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    1363. 

  1363.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    1364. 

  1364.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(`
    1365. 

  1365.       `),n("span",{class:"token attr-name"},"list-type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("picture"),n("span",{class:"token punctuation"},'"')]),s(`
    1366. 

  1366.       `),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("//jsonplaceholder.typicode.com/posts/"),n("span",{class:"token punctuation"},'"')]),s(`
    1367. 

  1367.       `),n("span",{class:"token attr-name"},":preview-file"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("previewFile"),n("span",{class:"token punctuation"},'"')]),s(`
    1368. 

  1368.       `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),s("file-list")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList"),n("span",{class:"token punctuation"},'"')]),s(`
    1369. 

  1369.     `),n("span",{class:"token punctuation"},">")]),s(`
    1370. 

  1370.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1371. 

  1371.         `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    1372. 

  1372.         Upload
    1373. 

  1373.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1374. 

  1374.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    1375. 

  1375.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    1376. 

  1376. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    1377. 

  1377. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    1378. 

  1378. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" UploadOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    1379. 

  1379. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent"),n("span",{class:"token punctuation"},","),s(" ref "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    1380. 

  1380. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    1381. 

  1381.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1382. 

  1382.     UploadOutlined`),n("span",{class:"token punctuation"},","),s(`
    1383. 

  1383.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1384. 

  1384.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1385. 

  1385.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"previewFile"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token keyword"},"async"),s(),n("span",{class:"token parameter"},"file"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1386. 

  1386.       console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Your upload file:'"),n("span",{class:"token punctuation"},","),s(" file"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1387. 

  1387.       `),n("span",{class:"token comment"},"// Your process logic. Here we just mock to the same file"),s(`
    1388. 

  1388.       `),n("span",{class:"token keyword"},"const"),s(" res "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token keyword"},"await"),s(),n("span",{class:"token function"},"fetch"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'https://next.json-generator.com/api/json/get/4ytyBoLK8'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token punctuation"},"{"),s(`
    1389. 

  1389.         `),n("span",{class:"token literal-property property"},"method"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'POST'"),n("span",{class:"token punctuation"},","),s(`
    1390. 

  1390.         `),n("span",{class:"token literal-property property"},"body"),n("span",{class:"token operator"},":"),s(" file"),n("span",{class:"token punctuation"},","),s(`
    1391. 

  1391.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1392. 

  1392.       `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token punctuation"},"{"),s(" thumbnail "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token keyword"},"await"),s(" res"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"json"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1393. 

  1393.       `),n("span",{class:"token keyword"},"return"),s(" thumbnail"),n("span",{class:"token punctuation"},";"),s(`
    1394. 

  1394.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1395. 

  1395.     `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1396. 

  1396.       previewFile`),n("span",{class:"token punctuation"},","),s(`
    1397. 

  1397.       `),n("span",{class:"token literal-property property"},"fileList"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(`
    1398. 

  1398.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1399. 

  1399.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1400. 

  1400. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1401. 

  1401. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    1402. 

  1402. `)])],-1)])),_:1})}var wn=A(Zn,[["render",fn]]);const hn=y({components:{UploadOutlined:f},setup(){return{transformFile:a=>new Promise(p=>{const u=new FileReader;u.readAsDataURL(a),u.onload=()=>{const r=document.createElement("canvas"),i=document.createElement("img");i.src=u.result,i.onload=()=>{const c=r.getContext("2d");c.drawImage(i,0,0),c.fillStyle="red",c.textBaseline="middle",c.fillText("Ant Design",20,20),r.toBlob(p)}}}),fileList:m([])}}});function vn(t,a,p,u,r,i){const c=e("upload-outlined"),k=e("a-button"),g=e("a-upload"),d=e("demo-box");return C(),b(d,{jsfiddle:{us:"Use `beforeUpload` for transform file before request such as add a watermark.",cn:"\u4F7F\u7528 `beforeUpload` \u8F6C\u6362\u4E0A\u4F20\u7684\u6587\u4EF6\uFF08\u4F8B\u5982\u6DFB\u52A0\u6C34\u5370\uFF09\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
    1403. 

  1403. <p>\u4F7F\u7528 <code>beforeUpload</code> \u8F6C\u6362\u4E0A\u4F20\u7684\u6587\u4EF6\uFF08\u4F8B\u5982\u6DFB\u52A0\u6C34\u5370\uFF09\u3002</p>
    1404. 

  1404. <h2 id="en-us">en-US</h2>
    1405. 

  1405. <p>Use <code>beforeUpload</code> for transform file before request such as add a watermark.</p>
    1406. 

  1406. `,order:10,title:{"zh-CN":"\u4E0A\u4F20\u524D\u8F6C\u6362\u6587\u4EF6","en-US":"Transform file before request"},relativePath:"src/docs/upload/demo/transform-file.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS11cGxvYWQKICAgICAgYWN0aW9uPSJodHRwczovL3d3dy5tb2NreS5pby92Mi81Y2M4MDE5ZDMwMDAwMDk4MGEwNTVlNzYiCiAgICAgIDp0cmFuc2Zvcm0tZmlsZT0idHJhbnNmb3JtRmlsZSIKICAgICAgdi1tb2RlbDpmaWxlLWxpc3Q9ImZpbGVMaXN0IgogICAgPgogICAgICA8YS1idXR0b24+CiAgICAgICAgPHVwbG9hZC1vdXRsaW5lZD48L3VwbG9hZC1vdXRsaW5lZD4KICAgICAgICBVcGxvYWQKICAgICAgPC9hLWJ1dHRvbj4KICAgIDwvYS11cGxvYWQ+CiAgPC9kaXY+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBVcGxvYWRPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKCmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgVXBsb2FkT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IHRyYW5zZm9ybUZpbGUgPSAoZmlsZTogYW55KSA9PiB7CiAgICAgIHJldHVybiBuZXcgUHJvbWlzZShyZXNvbHZlID0+IHsKICAgICAgICBjb25zdCByZWFkZXIgPSBuZXcgRmlsZVJlYWRlcigpOwogICAgICAgIHJlYWRlci5yZWFkQXNEYXRhVVJMKGZpbGUpOwogICAgICAgIHJlYWRlci5vbmxvYWQgPSAoKSA9PiB7CiAgICAgICAgICBjb25zdCBjYW52YXMgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdjYW52YXMnKTsKICAgICAgICAgIGNvbnN0IGltZzogSFRNTEltYWdlRWxlbWVudCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2ltZycpOwogICAgICAgICAgaW1nLnNyYyA9IHJlYWRlci5yZXN1bHQgYXMgc3RyaW5nOwogICAgICAgICAgaW1nLm9ubG9hZCA9ICgpID0+IHsKICAgICAgICAgICAgY29uc3QgY3R4OiBDYW52YXNSZW5kZXJpbmdDb250ZXh0MkQgPSBjYW52YXMuZ2V0Q29udGV4dCgnMmQnKSE7CiAgICAgICAgICAgIGN0eC5kcmF3SW1hZ2UoaW1nLCAwLCAwKTsKICAgICAgICAgICAgY3R4LmZpbGxTdHlsZSA9ICdyZWQnOwogICAgICAgICAgICBjdHgudGV4dEJhc2VsaW5lID0gJ21pZGRsZSc7CiAgICAgICAgICAgIGN0eC5maWxsVGV4dCgnQW50IERlc2lnbicsIDIwLCAyMCk7CiAgICAgICAgICAgIGNhbnZhcy50b0Jsb2IocmVzb2x2ZSk7CiAgICAgICAgICB9OwogICAgICAgIH07CiAgICAgIH0pOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIHRyYW5zZm9ybUZpbGUsCiAgICAgIGZpbGVMaXN0OiByZWYoW10pLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS11cGxvYWQKICAgICAgYWN0aW9uPSJodHRwczovL3d3dy5tb2NreS5pby92Mi81Y2M4MDE5ZDMwMDAwMDk4MGEwNTVlNzYiCiAgICAgIDp0cmFuc2Zvcm0tZmlsZT0idHJhbnNmb3JtRmlsZSIKICAgICAgdi1tb2RlbDpmaWxlLWxpc3Q9ImZpbGVMaXN0IgogICAgPgogICAgICA8YS1idXR0b24+CiAgICAgICAgPHVwbG9hZC1vdXRsaW5lZD48L3VwbG9hZC1vdXRsaW5lZD4KICAgICAgICBVcGxvYWQKICAgICAgPC9hLWJ1dHRvbj4KICAgIDwvYS11cGxvYWQ+CiAgPC9kaXY+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IFVwbG9hZE91dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYgfSBmcm9tICd2dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIFVwbG9hZE91dGxpbmVkLAogIH0sCiAgc2V0dXAoKSB7CiAgICBjb25zdCB0cmFuc2Zvcm1GaWxlID0gZmlsZSA9PiB7CiAgICAgIHJldHVybiBuZXcgUHJvbWlzZShyZXNvbHZlID0+IHsKICAgICAgICBjb25zdCByZWFkZXIgPSBuZXcgRmlsZVJlYWRlcigpOwogICAgICAgIHJlYWRlci5yZWFkQXNEYXRhVVJMKGZpbGUpOwogICAgICAgIHJlYWRlci5vbmxvYWQgPSAoKSA9PiB7CiAgICAgICAgICBjb25zdCBjYW52YXMgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdjYW52YXMnKTsKICAgICAgICAgIGNvbnN0IGltZyA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2ltZycpOwogICAgICAgICAgaW1nLnNyYyA9IHJlYWRlci5yZXN1bHQ7CiAgICAgICAgICBpbWcub25sb2FkID0gKCkgPT4gewogICAgICAgICAgICBjb25zdCBjdHggPSBjYW52YXMuZ2V0Q29udGV4dCgnMmQnKTsKICAgICAgICAgICAgY3R4LmRyYXdJbWFnZShpbWcsIDAsIDApOwogICAgICAgICAgICBjdHguZmlsbFN0eWxlID0gJ3JlZCc7CiAgICAgICAgICAgIGN0eC50ZXh0QmFzZWxpbmUgPSAnbWlkZGxlJzsKICAgICAgICAgICAgY3R4LmZpbGxUZXh0KCdBbnQgRGVzaWduJywgMjAsIDIwKTsKICAgICAgICAgICAgY2FudmFzLnRvQmxvYihyZXNvbHZlKTsKICAgICAgICAgIH07CiAgICAgICAgfTsKICAgICAgfSk7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgdHJhbnNmb3JtRmlsZSwKICAgICAgZmlsZUxpc3Q6IHJlZihbXSksCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:o(()=>[n("div",null,[l(g,{action:"https://www.mocky.io/v2/5cc8019d300000980a055e76","transform-file":t.transformFile,"file-list":t.fileList,"onUpdate:fileList":a[0]||(a[0]=I=>t.fileList=I)},{default:o(()=>[l(k,null,{default:o(()=>[l(c),a[1]||(a[1]=s(" Upload "))]),_:1,__:[1]})]),_:1},8,["transform-file","file-list"])])]),htmlCode:o(()=>a[2]||(a[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    1407. 

  1407.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    1408. 

  1408.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(`
    1409. 

  1409.       `),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("https://www.mocky.io/v2/5cc8019d300000980a055e76"),n("span",{class:"token punctuation"},'"')]),s(`
    1410. 

  1410.       `),n("span",{class:"token attr-name"},":transform-file"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("transformFile"),n("span",{class:"token punctuation"},'"')]),s(`
    1411. 

  1411.       `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),s("file-list")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList"),n("span",{class:"token punctuation"},'"')]),s(`
    1412. 

  1412.     `),n("span",{class:"token punctuation"},">")]),s(`
    1413. 

  1413.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1414. 

  1414.         `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    1415. 

  1415.         Upload
    1416. 

  1416.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1417. 

  1417.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    1418. 

  1418.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    1419. 

  1419. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    1420. 

  1420. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),s(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    1421. 

  1421. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" UploadOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    1422. 

  1422. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent"),n("span",{class:"token punctuation"},","),s(" ref "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    1423. 

  1423. 

  1424. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    1425. 

  1425.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1426. 

  1426.     UploadOutlined`),n("span",{class:"token punctuation"},","),s(`
    1427. 

  1427.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1428. 

  1428.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1429. 

  1429.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"transformFile"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"file"),n("span",{class:"token operator"},":"),s(" any")]),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1430. 

  1430.       `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token keyword"},"new"),s(),n("span",{class:"token class-name"},"Promise"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"resolve"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1431. 

  1431.         `),n("span",{class:"token keyword"},"const"),s(" reader "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token keyword"},"new"),s(),n("span",{class:"token class-name"},"FileReader"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1432. 

  1432.         reader`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"readAsDataURL"),n("span",{class:"token punctuation"},"("),s("file"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1433. 

  1433.         reader`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function-variable function"},"onload"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1434. 

  1434.           `),n("span",{class:"token keyword"},"const"),s(" canvas "),n("span",{class:"token operator"},"="),s(" document"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"createElement"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'canvas'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1435. 

  1435.           `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token literal-property property"},"img"),n("span",{class:"token operator"},":"),s(" HTMLImageElement "),n("span",{class:"token operator"},"="),s(" document"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"createElement"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'img'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1436. 

  1436.           img`),n("span",{class:"token punctuation"},"."),s("src "),n("span",{class:"token operator"},"="),s(" reader"),n("span",{class:"token punctuation"},"."),s("result "),n("span",{class:"token keyword"},"as"),s(" string"),n("span",{class:"token punctuation"},";"),s(`
    1437. 

  1437.           img`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function-variable function"},"onload"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1438. 

  1438.             `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token literal-property property"},"ctx"),n("span",{class:"token operator"},":"),s(" CanvasRenderingContext2D "),n("span",{class:"token operator"},"="),s(" canvas"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"getContext"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'2d'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token operator"},"!"),n("span",{class:"token punctuation"},";"),s(`
    1439. 

  1439.             ctx`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"drawImage"),n("span",{class:"token punctuation"},"("),s("img"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token number"},"0"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token number"},"0"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1440. 

  1440.             ctx`),n("span",{class:"token punctuation"},"."),s("fillStyle "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token string"},"'red'"),n("span",{class:"token punctuation"},";"),s(`
    1441. 

  1441.             ctx`),n("span",{class:"token punctuation"},"."),s("textBaseline "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token string"},"'middle'"),n("span",{class:"token punctuation"},";"),s(`
    1442. 

  1442.             ctx`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"fillText"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Ant Design'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token number"},"20"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token number"},"20"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1443. 

  1443.             canvas`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"toBlob"),n("span",{class:"token punctuation"},"("),s("resolve"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1444. 

  1444.           `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1445. 

  1445.         `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1446. 

  1446.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1447. 

  1447.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1448. 

  1448.     `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1449. 

  1449.       transformFile`),n("span",{class:"token punctuation"},","),s(`
    1450. 

  1450.       `),n("span",{class:"token literal-property property"},"fileList"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(`
    1451. 

  1451.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1452. 

  1452.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1453. 

  1453. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1454. 

  1454. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    1455. 

  1455. `)])],-1)])),jsVersionHtml:o(()=>a[3]||(a[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    1456. 

  1456.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    1457. 

  1457.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-upload")]),s(`
    1458. 

  1458.       `),n("span",{class:"token attr-name"},"action"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("https://www.mocky.io/v2/5cc8019d300000980a055e76"),n("span",{class:"token punctuation"},'"')]),s(`
    1459. 

  1459.       `),n("span",{class:"token attr-name"},":transform-file"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("transformFile"),n("span",{class:"token punctuation"},'"')]),s(`
    1460. 

  1460.       `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),s("file-list")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("fileList"),n("span",{class:"token punctuation"},'"')]),s(`
    1461. 

  1461.     `),n("span",{class:"token punctuation"},">")]),s(`
    1462. 

  1462.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1463. 

  1463.         `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("upload-outlined")]),n("span",{class:"token punctuation"},">")]),s(`
    1464. 

  1464.         Upload
    1465. 

  1465.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-button")]),n("span",{class:"token punctuation"},">")]),s(`
    1466. 

  1466.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("a-upload")]),n("span",{class:"token punctuation"},">")]),s(`
    1467. 

  1467.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
    1468. 

  1468. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("template")]),n("span",{class:"token punctuation"},">")]),s(`
    1469. 

  1469. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
    1470. 

  1470. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" UploadOutlined "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),s(`
    1471. 

  1471. `),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" defineComponent"),n("span",{class:"token punctuation"},","),s(" ref "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),s(`
    1472. 

  1472. `),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
    1473. 

  1473.   `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1474. 

  1474.     UploadOutlined`),n("span",{class:"token punctuation"},","),s(`
    1475. 

  1475.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1476. 

  1476.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1477. 

  1477.     `),n("span",{class:"token keyword"},"const"),s(),n("span",{class:"token function-variable function"},"transformFile"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token parameter"},"file"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1478. 

  1478.       `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token keyword"},"new"),s(),n("span",{class:"token class-name"},"Promise"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"resolve"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1479. 

  1479.         `),n("span",{class:"token keyword"},"const"),s(" reader "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token keyword"},"new"),s(),n("span",{class:"token class-name"},"FileReader"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1480. 

  1480.         reader`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"readAsDataURL"),n("span",{class:"token punctuation"},"("),s("file"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1481. 

  1481.         reader`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function-variable function"},"onload"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1482. 

  1482.           `),n("span",{class:"token keyword"},"const"),s(" canvas "),n("span",{class:"token operator"},"="),s(" document"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"createElement"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'canvas'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1483. 

  1483.           `),n("span",{class:"token keyword"},"const"),s(" img "),n("span",{class:"token operator"},"="),s(" document"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"createElement"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'img'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1484. 

  1484.           img`),n("span",{class:"token punctuation"},"."),s("src "),n("span",{class:"token operator"},"="),s(" reader"),n("span",{class:"token punctuation"},"."),s("result"),n("span",{class:"token punctuation"},";"),s(`
    1485. 

  1485.           img`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function-variable function"},"onload"),s(),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token operator"},"=>"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1486. 

  1486.             `),n("span",{class:"token keyword"},"const"),s(" ctx "),n("span",{class:"token operator"},"="),s(" canvas"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"getContext"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'2d'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1487. 

  1487.             ctx`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"drawImage"),n("span",{class:"token punctuation"},"("),s("img"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token number"},"0"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token number"},"0"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1488. 

  1488.             ctx`),n("span",{class:"token punctuation"},"."),s("fillStyle "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token string"},"'red'"),n("span",{class:"token punctuation"},";"),s(`
    1489. 

  1489.             ctx`),n("span",{class:"token punctuation"},"."),s("textBaseline "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token string"},"'middle'"),n("span",{class:"token punctuation"},";"),s(`
    1490. 

  1490.             ctx`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"fillText"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Ant Design'"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token number"},"20"),n("span",{class:"token punctuation"},","),s(),n("span",{class:"token number"},"20"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1491. 

  1491.             canvas`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"toBlob"),n("span",{class:"token punctuation"},"("),s("resolve"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1492. 

  1492.           `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1493. 

  1493.         `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1494. 

  1494.       `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1495. 

  1495.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1496. 

  1496.     `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
    1497. 

  1497.       transformFile`),n("span",{class:"token punctuation"},","),s(`
    1498. 

  1498.       `),n("span",{class:"token literal-property property"},"fileList"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(`
    1499. 

  1499.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
    1500. 

  1500.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
    1501. 

  1501. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
    1502. 

  1502. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
    1503. 

  1503. `)])],-1)])),_:1})}var Gn=A(hn,[["render",vn]]);const Wn={pageData:{title:"Upload",description:"",frontmatter:{category:"Components",subtitle:"\u4E0A\u4F20",type:"\u6570\u636E\u5F55\u5165",title:"Upload",cover:"https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg"},headers:[{level:2,title:"\u4F55\u65F6\u4F7F\u7528",slug:"\u4F55\u65F6\u4F7F\u7528",content:"\u4E0A\u4F20\u662F\u5C06\u4FE1\u606F\uFF08\u7F51\u9875\u3001\u6587\u5B57\u3001\u56FE\u7247\u3001\u89C6\u9891\u7B49\uFF09\u901A\u8FC7\u7F51\u9875\u6216\u8005\u4E0A\u4F20\u5DE5\u5177\u53D1\u5E03\u5230\u8FDC\u7A0B\u670D\u52A1\u5668\u4E0A\u7684\u8FC7\u7A0B\u3002"},{level:2,title:"API",slug:"api",content:""},{level:3,title:"\u4E8B\u4EF6",slug:"\u4E8B\u4EF6",content:""},{level:3,title:"change",slug:"change",content:""}],relativePath:"src/docs/upload/index.zh-CN.md",content:`
    1504. 

  1504. \u6587\u4EF6\u9009\u62E9\u4E0A\u4F20\u548C\u62D6\u62FD\u4E0A\u4F20\u63A7\u4EF6\u3002
    1505. 

  1505. 

  1506. ## \u4F55\u65F6\u4F7F\u7528
    1507. 

  1507. 

  1508. \u4E0A\u4F20\u662F\u5C06\u4FE1\u606F\uFF08\u7F51\u9875\u3001\u6587\u5B57\u3001\u56FE\u7247\u3001\u89C6\u9891\u7B49\uFF09\u901A\u8FC7\u7F51\u9875\u6216\u8005\u4E0A\u4F20\u5DE5\u5177\u53D1\u5E03\u5230\u8FDC\u7A0B\u670D\u52A1\u5668\u4E0A\u7684\u8FC7\u7A0B\u3002
    1509. 

  1509. 

  1510. - \u5F53\u9700\u8981\u4E0A\u4F20\u4E00\u4E2A\u6216\u4E00\u4E9B\u6587\u4EF6\u65F6\u3002
    1511. 

  1511. - \u5F53\u9700\u8981\u5C55\u73B0\u4E0A\u4F20\u7684\u8FDB\u5EA6\u65F6\u3002
    1512. 

  1512. - \u5F53\u9700\u8981\u4F7F\u7528\u62D6\u62FD\u4EA4\u4E92\u65F6\u3002
    1513. 

  1513. 

  1514. ## API
    1515. 

  1515. 

  1516. | \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C |
    1517. 

  1517. | --- | --- | --- | --- | --- |
    1518. 

  1518. | accept | \u63A5\u53D7\u4E0A\u4F20\u7684\u6587\u4EF6\u7C7B\u578B, \u8BE6\u89C1 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | \u65E0 |  |
    1519. 

  1519. | action | \u4E0A\u4F20\u7684\u5730\u5740 | string\\|(file) =&gt; \`Promise\` | \u65E0 |  |
    1520. 

  1520. | method | \u4E0A\u4F20\u8BF7\u6C42\u7684 http method | string | &#39;post&#39; | 1.5.0 |
    1521. 

  1521. | directory | \u652F\u6301\u4E0A\u4F20\u6587\u4EF6\u5939\uFF08[caniuse](https://caniuse.com/#feat=input-file-directory)\uFF09 | boolean | false |  |
    1522. 

  1522. | beforeUpload | \u4E0A\u4F20\u6587\u4EF6\u4E4B\u524D\u7684\u94A9\u5B50\uFF0C\u53C2\u6570\u4E3A\u4E0A\u4F20\u7684\u6587\u4EF6\uFF0C\u82E5\u8FD4\u56DE \`false\` \u5219\u505C\u6B62\u4E0A\u4F20\u3002\u652F\u6301\u8FD4\u56DE\u4E00\u4E2A Promise \u5BF9\u8C61\uFF0CPromise \u5BF9\u8C61 reject \u65F6\u5219\u505C\u6B62\u4E0A\u4F20\uFF0Cresolve \u65F6\u5F00\u59CB\u4E0A\u4F20\uFF08 resolve \u4F20\u5165 \`File\` \u6216 \`Blob\` \u5BF9\u8C61\u5219\u4E0A\u4F20 resolve \u4F20\u5165\u5BF9\u8C61\uFF09\u3002**\u6CE8\u610F\uFF1AIE9 \u4E0D\u652F\u6301\u8BE5\u65B9\u6CD5**\u3002 | (file, fileList) =&gt; \`boolean | Promise\` | \u65E0 |  |
    1523. 

  1523. | customRequest | \u901A\u8FC7\u8986\u76D6\u9ED8\u8BA4\u7684\u4E0A\u4F20\u884C\u4E3A\uFF0C\u53EF\u4EE5\u81EA\u5B9A\u4E49\u81EA\u5DF1\u7684\u4E0A\u4F20\u5B9E\u73B0 | Function | \u65E0 |  |
    1524. 

  1524. | data | \u4E0A\u4F20\u6240\u9700\u53C2\u6570\u6216\u8FD4\u56DE\u4E0A\u4F20\u53C2\u6570\u7684\u65B9\u6CD5 | object\\|(file) =&gt; object | \u65E0 |  |
    1525. 

  1525. | disabled | \u662F\u5426\u7981\u7528 | boolean | false |  |
    1526. 

  1526. | fileList | \u5DF2\u7ECF\u4E0A\u4F20\u7684\u6587\u4EF6\u5217\u8868\uFF08\u53D7\u63A7\uFF09 | object\\[] | \u65E0 |  |
    1527. 

  1527. | headers | \u8BBE\u7F6E\u4E0A\u4F20\u7684\u8BF7\u6C42\u5934\u90E8\uFF0CIE10 \u4EE5\u4E0A\u6709\u6548 | object | \u65E0 |  |
    1528. 

  1528. | listType | \u4E0A\u4F20\u5217\u8868\u7684\u5185\u5EFA\u6837\u5F0F\uFF0C\u652F\u6301\u4E09\u79CD\u57FA\u672C\u6837\u5F0F \`text\`, \`picture\` \u548C \`picture-card\` | string | &#39;text&#39; |  |
    1529. 

  1529. | multiple | \u662F\u5426\u652F\u6301\u591A\u9009\u6587\u4EF6\uFF0C\`ie10+\` \u652F\u6301\u3002\u5F00\u542F\u540E\u6309\u4F4F ctrl \u53EF\u9009\u62E9\u591A\u4E2A\u6587\u4EF6\u3002 | boolean | false |  |
    1530. 

  1530. | name | \u53D1\u5230\u540E\u53F0\u7684\u6587\u4EF6\u53C2\u6570\u540D | string | &#39;file&#39; |  |
    1531. 

  1531. | previewFile | \u81EA\u5B9A\u4E49\u6587\u4EF6\u9884\u89C8\u903B\u8F91 | (file: File \\| Blob) =&gt; Promise&lt;dataURL: string&gt; | \u65E0 | 1.5.0 |
    1532. 

  1532. | showUploadList | \u662F\u5426\u5C55\u793A uploadList, \u53EF\u8BBE\u4E3A\u4E00\u4E2A\u5BF9\u8C61\uFF0C\u7528\u4E8E\u5355\u72EC\u8BBE\u5B9A showPreviewIcon \u548C showRemoveIcon | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean } | true |  |
    1533. 

  1533. | supportServerRender | \u670D\u52A1\u7AEF\u6E32\u67D3\u65F6\u9700\u8981\u6253\u5F00\u8FD9\u4E2A | boolean | false |  |
    1534. 

  1534. | withCredentials | \u4E0A\u4F20\u8BF7\u6C42\u65F6\u662F\u5426\u643A\u5E26 cookie | boolean | false |  |
    1535. 

  1535. | openFileDialogOnClick | \u70B9\u51FB\u6253\u5F00\u6587\u4EF6\u5BF9\u8BDD\u6846 | boolean | true |  |
    1536. 

  1536. | remove \xA0 | \u70B9\u51FB\u79FB\u9664\u6587\u4EF6\u65F6\u7684\u56DE\u8C03\uFF0C\u8FD4\u56DE\u503C\u4E3A false \u65F6\u4E0D\u79FB\u9664\u3002\u652F\u6301\u8FD4\u56DE\u4E00\u4E2A Promise \u5BF9\u8C61\uFF0CPromise \u5BF9\u8C61 resolve(false) \u6216 reject \u65F6\u4E0D\u79FB\u9664\u3002 \xA0 \xA0 \xA0 \xA0 \xA0 \xA0 \xA0 | Function(file): \`boolean | Promise\` | \u65E0 \xA0 |  |
    1537. 

  1537. | transformFile \xA0 | \u5728\u4E0A\u4F20\u4E4B\u524D\u8F6C\u6362\u6587\u4EF6\u3002\u652F\u6301\u8FD4\u56DE\u4E00\u4E2A Promise \u5BF9\u8C61 \xA0 | Function(file): \`string | Blob | File | Promise&lt;string | Blob | File&gt;\` | \u65E0 \xA0 | 1.5.0 |
    1538. 

  1538. 

  1539. ### \u4E8B\u4EF6
    1540. 

  1540. 

  1541. | \u4E8B\u4EF6\u540D\u79F0 | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 | \u7248\u672C |
    1542. 

  1542. | --- | --- | --- | --- |
    1543. 

  1543. | change | \u4E0A\u4F20\u6587\u4EF6\u6539\u53D8\u65F6\u7684\u72B6\u6001\uFF0C\u8BE6\u89C1 [change](#change) | Function | \u65E0 |  |
    1544. 

  1544. | preview | \u70B9\u51FB\u6587\u4EF6\u94FE\u63A5\u6216\u9884\u89C8\u56FE\u6807\u65F6\u7684\u56DE\u8C03 | Function(file) | \u65E0 |  |
    1545. 

  1545. | download | \u70B9\u51FB\u4E0B\u8F7D\u6587\u4EF6\u65F6\u7684\u56DE\u8C03\uFF0C\u5982\u679C\u6CA1\u6709\u6307\u5B9A\uFF0C\u5219\u9ED8\u8BA4\u8DF3\u8F6C\u5230\u6587\u4EF6 url \u5BF9\u5E94\u7684\u6807\u7B7E\u9875\u3002 | Function(file): void | \u8DF3\u8F6C\u65B0\u6807\u7B7E\u9875 | 1.5.0 |
    1546. 

  1546. | reject | \u62D6\u62FD\u6587\u4EF6\u4E0D\u7B26\u5408 accept \u7C7B\u578B\u65F6\u7684\u56DE\u8C03 | Function(fileList) | \u65E0 |  |
    1547. 

  1547. 

  1548. ### change
    1549. 

  1549. 

  1550. &gt; \u4E0A\u4F20\u4E2D\u3001\u5B8C\u6210\u3001\u5931\u8D25\u90FD\u4F1A\u8C03\u7528\u8FD9\u4E2A\u51FD\u6570\u3002
    1551. 

  1551. 

  1552. \u6587\u4EF6\u72B6\u6001\u6539\u53D8\u7684\u56DE\u8C03\uFF0C\u8FD4\u56DE\u4E3A\uFF1A
    1553. 

  1553. 

  1554. \`\`\`jsx
    1555. 

  1555. {
    1556. 

  1556.   file: { /* ... */ },
    1557. 

  1557.   fileList: [ /* ... */ ],
    1558. 

  1558.   event: { /* ... */ },
    1559. 

  1559. }
    1560. 

  1560. \`\`\`
    1561. 

  1561. 

  1562. 1. \`file\` \u5F53\u524D\u64CD\u4F5C\u7684\u6587\u4EF6\u5BF9\u8C61\u3002
    1563. 

  1563. 

  1564.    \`\`\`jsx
    1565. 

  1565.    {
    1566. 

  1566.       uid: &#39;uid&#39;,      // \u6587\u4EF6\u552F\u4E00\u6807\u8BC6\uFF0C\u5EFA\u8BAE\u8BBE\u7F6E\u4E3A\u8D1F\u6570\uFF0C\u9632\u6B62\u548C\u5185\u90E8\u4EA7\u751F\u7684 id \u51B2\u7A81
    1567. 

  1567.       name: &#39;xx.png&#39;,   // \u6587\u4EF6\u540D
    1568. 

  1568.       status: &#39;done&#39;, // \u72B6\u6001\u6709\uFF1Auploading done error removed
    1569. 

  1569.       response: &#39;{&quot;status&quot;: &quot;success&quot;}&#39;, // \u670D\u52A1\u7AEF\u54CD\u5E94\u5185\u5BB9
    1570. 

  1570.       linkProps: &#39;{&quot;download&quot;: &quot;image&quot;}&#39;, // \u4E0B\u8F7D\u94FE\u63A5\u989D\u5916\u7684 HTML \u5C5E\u6027
    1571. 

  1571.       xhr: &#39;XMLHttpRequest{ ... }&#39;, // XMLHttpRequest Header
    1572. 

  1572.    }
    1573. 

  1573.    \`\`\`
    1574. 

  1574. 

  1575. 2. \`fileList\` \u5F53\u524D\u7684\u6587\u4EF6\u5217\u8868\u3002
    1576. 

  1576. 3. \`event\` \u4E0A\u4F20\u4E2D\u7684\u670D\u52A1\u7AEF\u54CD\u5E94\u5185\u5BB9\uFF0C\u5305\u542B\u4E86\u4E0A\u4F20\u8FDB\u5EA6\u7B49\u4FE1\u606F\uFF0C\u9AD8\u7EA7\u6D4F\u89C8\u5668\u652F\u6301\u3002
    1577. 

  1577. `,html:`<p>\u6587\u4EF6\u9009\u62E9\u4E0A\u4F20\u548C\u62D6\u62FD\u4E0A\u4F20\u63A7\u4EF6\u3002</p>
    1578. 

  1578. <h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528</h2>
    1579. 

  1579. <p>\u4E0A\u4F20\u662F\u5C06\u4FE1\u606F\uFF08\u7F51\u9875\u3001\u6587\u5B57\u3001\u56FE\u7247\u3001\u89C6\u9891\u7B49\uFF09\u901A\u8FC7\u7F51\u9875\u6216\u8005\u4E0A\u4F20\u5DE5\u5177\u53D1\u5E03\u5230\u8FDC\u7A0B\u670D\u52A1\u5668\u4E0A\u7684\u8FC7\u7A0B\u3002</p>
    1580. 

  1580. <ul>
    1581. 

  1581. <li>\u5F53\u9700\u8981\u4E0A\u4F20\u4E00\u4E2A\u6216\u4E00\u4E9B\u6587\u4EF6\u65F6\u3002</li>
    1582. 

  1582. <li>\u5F53\u9700\u8981\u5C55\u73B0\u4E0A\u4F20\u7684\u8FDB\u5EA6\u65F6\u3002</li>
    1583. 

  1583. <li>\u5F53\u9700\u8981\u4F7F\u7528\u62D6\u62FD\u4EA4\u4E92\u65F6\u3002</li>
    1584. 

  1584. </ul>
    1585. 

  1585. <h2 id="api">API</h2>
    1586. 

  1586. <table>
    1587. 

  1587. <thead>
    1588. 

  1588. <tr>
    1589. 

  1589. <th>\u53C2\u6570</th>
    1590. 

  1590. <th>\u8BF4\u660E</th>
    1591. 

  1591. <th>\u7C7B\u578B</th>
    1592. 

  1592. <th>\u9ED8\u8BA4\u503C</th>
    1593. 

  1593. <th>\u7248\u672C</th>
    1594. 

  1594. </tr>
    1595. 

  1595. </thead>
    1596. 

  1596. <tbody>
    1597. 

  1597. <tr>
    1598. 

  1598. <td>accept</td>
    1599. 

  1599. <td>\u63A5\u53D7\u4E0A\u4F20\u7684\u6587\u4EF6\u7C7B\u578B, \u8BE6\u89C1 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept" target="_blank" rel="noopener noreferrer">input accept Attribute</a></td>
    1600. 

  1600. <td>string</td>
    1601. 

  1601. <td>\u65E0</td>
    1602. 

  1602. <td></td>
    1603. 

  1603. </tr>
    1604. 

  1604. <tr>
    1605. 

  1605. <td>action</td>
    1606. 

  1606. <td>\u4E0A\u4F20\u7684\u5730\u5740</td>
    1607. 

  1607. <td>string|(file) =&gt; <code>Promise</code></td>
    1608. 

  1608. <td>\u65E0</td>
    1609. 

  1609. <td></td>
    1610. 

  1610. </tr>
    1611. 

  1611. <tr>
    1612. 

  1612. <td>method</td>
    1613. 

  1613. <td>\u4E0A\u4F20\u8BF7\u6C42\u7684 http method</td>
    1614. 

  1614. <td>string</td>
    1615. 

  1615. <td>'post'</td>
    1616. 

  1616. <td>1.5.0</td>
    1617. 

  1617. </tr>
    1618. 

  1618. <tr>
    1619. 

  1619. <td>directory</td>
    1620. 

  1620. <td>\u652F\u6301\u4E0A\u4F20\u6587\u4EF6\u5939\uFF08<a href="https://caniuse.com/#feat=input-file-directory" target="_blank" rel="noopener noreferrer">caniuse</a>\uFF09</td>
    1621. 

  1621. <td>boolean</td>
    1622. 

  1622. <td>false</td>
    1623. 

  1623. <td></td>
    1624. 

  1624. </tr>
    1625. 

  1625. <tr>
    1626. 

  1626. <td>beforeUpload</td>
    1627. 

  1627. <td>\u4E0A\u4F20\u6587\u4EF6\u4E4B\u524D\u7684\u94A9\u5B50\uFF0C\u53C2\u6570\u4E3A\u4E0A\u4F20\u7684\u6587\u4EF6\uFF0C\u82E5\u8FD4\u56DE <code>false</code> \u5219\u505C\u6B62\u4E0A\u4F20\u3002\u652F\u6301\u8FD4\u56DE\u4E00\u4E2A Promise \u5BF9\u8C61\uFF0CPromise \u5BF9\u8C61 reject \u65F6\u5219\u505C\u6B62\u4E0A\u4F20\uFF0Cresolve \u65F6\u5F00\u59CB\u4E0A\u4F20\uFF08 resolve \u4F20\u5165 <code>File</code> \u6216 <code>Blob</code> \u5BF9\u8C61\u5219\u4E0A\u4F20 resolve \u4F20\u5165\u5BF9\u8C61\uFF09\u3002<strong>\u6CE8\u610F\uFF1AIE9 \u4E0D\u652F\u6301\u8BE5\u65B9\u6CD5</strong>\u3002</td>
    1628. 

  1628. <td>(file, fileList) =&gt; <code>boolean | Promise</code></td>
    1629. 

  1629. <td>\u65E0</td>
    1630. 

  1630. <td></td>
    1631. 

  1631. </tr>
    1632. 

  1632. <tr>
    1633. 

  1633. <td>customRequest</td>
    1634. 

  1634. <td>\u901A\u8FC7\u8986\u76D6\u9ED8\u8BA4\u7684\u4E0A\u4F20\u884C\u4E3A\uFF0C\u53EF\u4EE5\u81EA\u5B9A\u4E49\u81EA\u5DF1\u7684\u4E0A\u4F20\u5B9E\u73B0</td>
    1635. 

  1635. <td>Function</td>
    1636. 

  1636. <td>\u65E0</td>
    1637. 

  1637. <td></td>
    1638. 

  1638. </tr>
    1639. 

  1639. <tr>
    1640. 

  1640. <td>data</td>
    1641. 

  1641. <td>\u4E0A\u4F20\u6240\u9700\u53C2\u6570\u6216\u8FD4\u56DE\u4E0A\u4F20\u53C2\u6570\u7684\u65B9\u6CD5</td>
    1642. 

  1642. <td>object|(file) =&gt; object</td>
    1643. 

  1643. <td>\u65E0</td>
    1644. 

  1644. <td></td>
    1645. 

  1645. </tr>
    1646. 

  1646. <tr>
    1647. 

  1647. <td>disabled</td>
    1648. 

  1648. <td>\u662F\u5426\u7981\u7528</td>
    1649. 

  1649. <td>boolean</td>
    1650. 

  1650. <td>false</td>
    1651. 

  1651. <td></td>
    1652. 

  1652. </tr>
    1653. 

  1653. <tr>
    1654. 

  1654. <td>fileList</td>
    1655. 

  1655. <td>\u5DF2\u7ECF\u4E0A\u4F20\u7684\u6587\u4EF6\u5217\u8868\uFF08\u53D7\u63A7\uFF09</td>
    1656. 

  1656. <td>object[]</td>
    1657. 

  1657. <td>\u65E0</td>
    1658. 

  1658. <td></td>
    1659. 

  1659. </tr>
    1660. 

  1660. <tr>
    1661. 

  1661. <td>headers</td>
    1662. 

  1662. <td>\u8BBE\u7F6E\u4E0A\u4F20\u7684\u8BF7\u6C42\u5934\u90E8\uFF0CIE10 \u4EE5\u4E0A\u6709\u6548</td>
    1663. 

  1663. <td>object</td>
    1664. 

  1664. <td>\u65E0</td>
    1665. 

  1665. <td></td>
    1666. 

  1666. </tr>
    1667. 

  1667. <tr>
    1668. 

  1668. <td>listType</td>
    1669. 

  1669. <td>\u4E0A\u4F20\u5217\u8868\u7684\u5185\u5EFA\u6837\u5F0F\uFF0C\u652F\u6301\u4E09\u79CD\u57FA\u672C\u6837\u5F0F <code>text</code>, <code>picture</code> \u548C <code>picture-card</code></td>
    1670. 

  1670. <td>string</td>
    1671. 

  1671. <td>'text'</td>
    1672. 

  1672. <td></td>
    1673. 

  1673. </tr>
    1674. 

  1674. <tr>
    1675. 

  1675. <td>multiple</td>
    1676. 

  1676. <td>\u662F\u5426\u652F\u6301\u591A\u9009\u6587\u4EF6\uFF0C<code>ie10+</code> \u652F\u6301\u3002\u5F00\u542F\u540E\u6309\u4F4F ctrl \u53EF\u9009\u62E9\u591A\u4E2A\u6587\u4EF6\u3002</td>
    1677. 

  1677. <td>boolean</td>
    1678. 

  1678. <td>false</td>
    1679. 

  1679. <td></td>
    1680. 

  1680. </tr>
    1681. 

  1681. <tr>
    1682. 

  1682. <td>name</td>
    1683. 

  1683. <td>\u53D1\u5230\u540E\u53F0\u7684\u6587\u4EF6\u53C2\u6570\u540D</td>
    1684. 

  1684. <td>string</td>
    1685. 

  1685. <td>'file'</td>
    1686. 

  1686. <td></td>
    1687. 

  1687. </tr>
    1688. 

  1688. <tr>
    1689. 

  1689. <td>previewFile</td>
    1690. 

  1690. <td>\u81EA\u5B9A\u4E49\u6587\u4EF6\u9884\u89C8\u903B\u8F91</td>
    1691. 

  1691. <td>(file: File | Blob) =&gt; Promise&lt;dataURL: string&gt;</td>
    1692. 

  1692. <td>\u65E0</td>
    1693. 

  1693. <td>1.5.0</td>
    1694. 

  1694. </tr>
    1695. 

  1695. <tr>
    1696. 

  1696. <td>showUploadList</td>
    1697. 

  1697. <td>\u662F\u5426\u5C55\u793A uploadList, \u53EF\u8BBE\u4E3A\u4E00\u4E2A\u5BF9\u8C61\uFF0C\u7528\u4E8E\u5355\u72EC\u8BBE\u5B9A showPreviewIcon \u548C showRemoveIcon</td>
    1698. 

  1698. <td>Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean }</td>
    1699. 

  1699. <td>true</td>
    1700. 

  1700. <td></td>
    1701. 

  1701. </tr>
    1702. 

  1702. <tr>
    1703. 

  1703. <td>supportServerRender</td>
    1704. 

  1704. <td>\u670D\u52A1\u7AEF\u6E32\u67D3\u65F6\u9700\u8981\u6253\u5F00\u8FD9\u4E2A</td>
    1705. 

  1705. <td>boolean</td>
    1706. 

  1706. <td>false</td>
    1707. 

  1707. <td></td>
    1708. 

  1708. </tr>
    1709. 

  1709. <tr>
    1710. 

  1710. <td>withCredentials</td>
    1711. 

  1711. <td>\u4E0A\u4F20\u8BF7\u6C42\u65F6\u662F\u5426\u643A\u5E26 cookie</td>
    1712. 

  1712. <td>boolean</td>
    1713. 

  1713. <td>false</td>
    1714. 

  1714. <td></td>
    1715. 

  1715. </tr>
    1716. 

  1716. <tr>
    1717. 

  1717. <td>openFileDialogOnClick</td>
    1718. 

  1718. <td>\u70B9\u51FB\u6253\u5F00\u6587\u4EF6\u5BF9\u8BDD\u6846</td>
    1719. 

  1719. <td>boolean</td>
    1720. 

  1720. <td>true</td>
    1721. 

  1721. <td></td>
    1722. 

  1722. </tr>
    1723. 

  1723. <tr>
    1724. 

  1724. <td>remove</td>
    1725. 

  1725. <td>\u70B9\u51FB\u79FB\u9664\u6587\u4EF6\u65F6\u7684\u56DE\u8C03\uFF0C\u8FD4\u56DE\u503C\u4E3A false \u65F6\u4E0D\u79FB\u9664\u3002\u652F\u6301\u8FD4\u56DE\u4E00\u4E2A Promise \u5BF9\u8C61\uFF0CPromise \u5BF9\u8C61 resolve(false) \u6216 reject \u65F6\u4E0D\u79FB\u9664\u3002</td>
    1726. 

  1726. <td>Function(file): <code>boolean | Promise</code></td>
    1727. 

  1727. <td>\u65E0</td>
    1728. 

  1728. <td></td>
    1729. 

  1729. </tr>
    1730. 

  1730. <tr>
    1731. 

  1731. <td>transformFile</td>
    1732. 

  1732. <td>\u5728\u4E0A\u4F20\u4E4B\u524D\u8F6C\u6362\u6587\u4EF6\u3002\u652F\u6301\u8FD4\u56DE\u4E00\u4E2A Promise \u5BF9\u8C61</td>
    1733. 

  1733. <td>Function(file): <code>string | Blob | File | Promise&lt;string | Blob | File&gt;</code></td>
    1734. 

  1734. <td>\u65E0</td>
    1735. 

  1735. <td>1.5.0</td>
    1736. 

  1736. </tr>
    1737. 

  1737. </tbody>
    1738. 

  1738. </table>
    1739. 

  1739. <h3 id="\u4E8B\u4EF6">\u4E8B\u4EF6</h3>
    1740. 

  1740. <table>
    1741. 

  1741. <thead>
    1742. 

  1742. <tr>
    1743. 

  1743. <th>\u4E8B\u4EF6\u540D\u79F0</th>
    1744. 

  1744. <th>\u8BF4\u660E</th>
    1745. 

  1745. <th>\u56DE\u8C03\u53C2\u6570</th>
    1746. 

  1746. <th>\u7248\u672C</th>
    1747. 

  1747. </tr>
    1748. 

  1748. </thead>
    1749. 

  1749. <tbody>
    1750. 

  1750. <tr>
    1751. 

  1751. <td>change</td>
    1752. 

  1752. <td>\u4E0A\u4F20\u6587\u4EF6\u6539\u53D8\u65F6\u7684\u72B6\u6001\uFF0C\u8BE6\u89C1 <a href="#change">change</a></td>
    1753. 

  1753. <td>Function</td>
    1754. 

  1754. <td>\u65E0</td>
    1755. 

  1755. </tr>
    1756. 

  1756. <tr>
    1757. 

  1757. <td>preview</td>
    1758. 

  1758. <td>\u70B9\u51FB\u6587\u4EF6\u94FE\u63A5\u6216\u9884\u89C8\u56FE\u6807\u65F6\u7684\u56DE\u8C03</td>
    1759. 

  1759. <td>Function(file)</td>
    1760. 

  1760. <td>\u65E0</td>
    1761. 

  1761. </tr>
    1762. 

  1762. <tr>
    1763. 

  1763. <td>download</td>
    1764. 

  1764. <td>\u70B9\u51FB\u4E0B\u8F7D\u6587\u4EF6\u65F6\u7684\u56DE\u8C03\uFF0C\u5982\u679C\u6CA1\u6709\u6307\u5B9A\uFF0C\u5219\u9ED8\u8BA4\u8DF3\u8F6C\u5230\u6587\u4EF6 url \u5BF9\u5E94\u7684\u6807\u7B7E\u9875\u3002</td>
    1765. 

  1765. <td>Function(file): void</td>
    1766. 

  1766. <td>\u8DF3\u8F6C\u65B0\u6807\u7B7E\u9875</td>
    1767. 

  1767. </tr>
    1768. 

  1768. <tr>
    1769. 

  1769. <td>reject</td>
    1770. 

  1770. <td>\u62D6\u62FD\u6587\u4EF6\u4E0D\u7B26\u5408 accept \u7C7B\u578B\u65F6\u7684\u56DE\u8C03</td>
    1771. 

  1771. <td>Function(fileList)</td>
    1772. 

  1772. <td>\u65E0</td>
    1773. 

  1773. </tr>
    1774. 

  1774. </tbody>
    1775. 

  1775. </table>
    1776. 

  1776. <h3 id="change">change</h3>
    1777. 

  1777. <blockquote>
    1778. 

  1778. <p>\u4E0A\u4F20\u4E2D\u3001\u5B8C\u6210\u3001\u5931\u8D25\u90FD\u4F1A\u8C03\u7528\u8FD9\u4E2A\u51FD\u6570\u3002</p>
    1779. 

  1779. </blockquote>
    1780. 

  1780. <p>\u6587\u4EF6\u72B6\u6001\u6539\u53D8\u7684\u56DE\u8C03\uFF0C\u8FD4\u56DE\u4E3A\uFF1A</p>
    1781. 

  1781. <pre class="language-jsx" v-pre><code><span class="token punctuation">{</span>
    1782. 

  1782.   <span class="token literal-property property">file</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    1783. 

  1783.   <span class="token literal-property property">fileList</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">/* ... */</span> <span class="token punctuation">]</span><span class="token punctuation">,</span>
    1784. 

  1784.   <span class="token literal-property property">event</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    1785. 

  1785. <span class="token punctuation">}</span>
    1786. 

  1786. </code></pre>
    1787. 

  1787. <ol>
    1788. 

  1788. <li>
    1789. 

  1789. <p><code>file</code> \u5F53\u524D\u64CD\u4F5C\u7684\u6587\u4EF6\u5BF9\u8C61\u3002</p>
    1790. 

  1790. <pre class="language-jsx" v-pre><code><span class="token punctuation">{</span>
    1791. 

  1791.    <span class="token literal-property property">uid</span><span class="token operator">:</span> <span class="token string">'uid'</span><span class="token punctuation">,</span>      <span class="token comment">// \u6587\u4EF6\u552F\u4E00\u6807\u8BC6\uFF0C\u5EFA\u8BAE\u8BBE\u7F6E\u4E3A\u8D1F\u6570\uFF0C\u9632\u6B62\u548C\u5185\u90E8\u4EA7\u751F\u7684 id \u51B2\u7A81</span>
    1792. 

  1792.    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'xx.png'</span><span class="token punctuation">,</span>   <span class="token comment">// \u6587\u4EF6\u540D</span>
    1793. 

  1793.    <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">'done'</span><span class="token punctuation">,</span> <span class="token comment">// \u72B6\u6001\u6709\uFF1Auploading done error removed</span>
    1794. 

  1794.    <span class="token literal-property property">response</span><span class="token operator">:</span> <span class="token string">'{"status": "success"}'</span><span class="token punctuation">,</span> <span class="token comment">// \u670D\u52A1\u7AEF\u54CD\u5E94\u5185\u5BB9</span>
    1795. 

  1795.    <span class="token literal-property property">linkProps</span><span class="token operator">:</span> <span class="token string">'{"download": "image"}'</span><span class="token punctuation">,</span> <span class="token comment">// \u4E0B\u8F7D\u94FE\u63A5\u989D\u5916\u7684 HTML \u5C5E\u6027</span>
    1796. 

  1796.    <span class="token literal-property property">xhr</span><span class="token operator">:</span> <span class="token string">'XMLHttpRequest{ ... }'</span><span class="token punctuation">,</span> <span class="token comment">// XMLHttpRequest Header</span>
    1797. 

  1797. <span class="token punctuation">}</span>
    1798. 

  1798. </code></pre>
    1799. 

  1799. </li>
    1800. 

  1800. <li>
    1801. 

  1801. <p><code>fileList</code> \u5F53\u524D\u7684\u6587\u4EF6\u5217\u8868\u3002</p>
    1802. 

  1802. </li>
    1803. 

  1803. <li>
    1804. 

  1804. <p><code>event</code> \u4E0A\u4F20\u4E2D\u7684\u670D\u52A1\u7AEF\u54CD\u5E94\u5185\u5BB9\uFF0C\u5305\u542B\u4E86\u4E0A\u4F20\u8FDB\u5EA6\u7B49\u4FE1\u606F\uFF0C\u9AD8\u7EA7\u6D4F\u89C8\u5668\u652F\u6301\u3002</p>
    1805. 

  1805. </li>
    1806. 

  1806. </ol>
    1807. 

  1807. `,lastUpdated:1748059052791}},Bn={class:"markdown"};function Vn(t,a,p,u,r,i){return C(),w("article",Bn,a[0]||(a[0]=[v(`<p>\u6587\u4EF6\u9009\u62E9\u4E0A\u4F20\u548C\u62D6\u62FD\u4E0A\u4F20\u63A7\u4EF6\u3002</p><h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528</h2><p>\u4E0A\u4F20\u662F\u5C06\u4FE1\u606F\uFF08\u7F51\u9875\u3001\u6587\u5B57\u3001\u56FE\u7247\u3001\u89C6\u9891\u7B49\uFF09\u901A\u8FC7\u7F51\u9875\u6216\u8005\u4E0A\u4F20\u5DE5\u5177\u53D1\u5E03\u5230\u8FDC\u7A0B\u670D\u52A1\u5668\u4E0A\u7684\u8FC7\u7A0B\u3002</p><ul><li>\u5F53\u9700\u8981\u4E0A\u4F20\u4E00\u4E2A\u6216\u4E00\u4E9B\u6587\u4EF6\u65F6\u3002</li><li>\u5F53\u9700\u8981\u5C55\u73B0\u4E0A\u4F20\u7684\u8FDB\u5EA6\u65F6\u3002</li><li>\u5F53\u9700\u8981\u4F7F\u7528\u62D6\u62FD\u4EA4\u4E92\u65F6\u3002</li></ul><h2 id="api">API</h2><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>accept</td><td>\u63A5\u53D7\u4E0A\u4F20\u7684\u6587\u4EF6\u7C7B\u578B, \u8BE6\u89C1 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept" target="_blank" rel="noopener noreferrer">input accept Attribute</a></td><td>string</td><td>\u65E0</td><td></td></tr><tr><td>action</td><td>\u4E0A\u4F20\u7684\u5730\u5740</td><td>string|(file) =&gt; <code>Promise</code></td><td>\u65E0</td><td></td></tr><tr><td>method</td><td>\u4E0A\u4F20\u8BF7\u6C42\u7684 http method</td><td>string</td><td>&#39;post&#39;</td><td>1.5.0</td></tr><tr><td>directory</td><td>\u652F\u6301\u4E0A\u4F20\u6587\u4EF6\u5939\uFF08<a href="https://caniuse.com/#feat=input-file-directory" target="_blank" rel="noopener noreferrer">caniuse</a>\uFF09</td><td>boolean</td><td>false</td><td></td></tr><tr><td>beforeUpload</td><td>\u4E0A\u4F20\u6587\u4EF6\u4E4B\u524D\u7684\u94A9\u5B50\uFF0C\u53C2\u6570\u4E3A\u4E0A\u4F20\u7684\u6587\u4EF6\uFF0C\u82E5\u8FD4\u56DE <code>false</code> \u5219\u505C\u6B62\u4E0A\u4F20\u3002\u652F\u6301\u8FD4\u56DE\u4E00\u4E2A Promise \u5BF9\u8C61\uFF0CPromise \u5BF9\u8C61 reject \u65F6\u5219\u505C\u6B62\u4E0A\u4F20\uFF0Cresolve \u65F6\u5F00\u59CB\u4E0A\u4F20\uFF08 resolve \u4F20\u5165 <code>File</code> \u6216 <code>Blob</code> \u5BF9\u8C61\u5219\u4E0A\u4F20 resolve \u4F20\u5165\u5BF9\u8C61\uFF09\u3002<strong>\u6CE8\u610F\uFF1AIE9 \u4E0D\u652F\u6301\u8BE5\u65B9\u6CD5</strong>\u3002</td><td>(file, fileList) =&gt; <code>boolean | Promise</code></td><td>\u65E0</td><td></td></tr><tr><td>customRequest</td><td>\u901A\u8FC7\u8986\u76D6\u9ED8\u8BA4\u7684\u4E0A\u4F20\u884C\u4E3A\uFF0C\u53EF\u4EE5\u81EA\u5B9A\u4E49\u81EA\u5DF1\u7684\u4E0A\u4F20\u5B9E\u73B0</td><td>Function</td><td>\u65E0</td><td></td></tr><tr><td>data</td><td>\u4E0A\u4F20\u6240\u9700\u53C2\u6570\u6216\u8FD4\u56DE\u4E0A\u4F20\u53C2\u6570\u7684\u65B9\u6CD5</td><td>object|(file) =&gt; object</td><td>\u65E0</td><td></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528</td><td>boolean</td><td>false</td><td></td></tr><tr><td>fileList</td><td>\u5DF2\u7ECF\u4E0A\u4F20\u7684\u6587\u4EF6\u5217\u8868\uFF08\u53D7\u63A7\uFF09</td><td>object[]</td><td>\u65E0</td><td></td></tr><tr><td>headers</td><td>\u8BBE\u7F6E\u4E0A\u4F20\u7684\u8BF7\u6C42\u5934\u90E8\uFF0CIE10 \u4EE5\u4E0A\u6709\u6548</td><td>object</td><td>\u65E0</td><td></td></tr><tr><td>listType</td><td>\u4E0A\u4F20\u5217\u8868\u7684\u5185\u5EFA\u6837\u5F0F\uFF0C\u652F\u6301\u4E09\u79CD\u57FA\u672C\u6837\u5F0F <code>text</code>, <code>picture</code> \u548C <code>picture-card</code></td><td>string</td><td>&#39;text&#39;</td><td></td></tr><tr><td>multiple</td><td>\u662F\u5426\u652F\u6301\u591A\u9009\u6587\u4EF6\uFF0C<code>ie10+</code> \u652F\u6301\u3002\u5F00\u542F\u540E\u6309\u4F4F ctrl \u53EF\u9009\u62E9\u591A\u4E2A\u6587\u4EF6\u3002</td><td>boolean</td><td>false</td><td></td></tr><tr><td>name</td><td>\u53D1\u5230\u540E\u53F0\u7684\u6587\u4EF6\u53C2\u6570\u540D</td><td>string</td><td>&#39;file&#39;</td><td></td></tr><tr><td>previewFile</td><td>\u81EA\u5B9A\u4E49\u6587\u4EF6\u9884\u89C8\u903B\u8F91</td><td>(file: File | Blob) =&gt; Promise&lt;dataURL: string&gt;</td><td>\u65E0</td><td>1.5.0</td></tr><tr><td>showUploadList</td><td>\u662F\u5426\u5C55\u793A uploadList, \u53EF\u8BBE\u4E3A\u4E00\u4E2A\u5BF9\u8C61\uFF0C\u7528\u4E8E\u5355\u72EC\u8BBE\u5B9A showPreviewIcon \u548C showRemoveIcon</td><td>Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean }</td><td>true</td><td></td></tr><tr><td>supportServerRender</td><td>\u670D\u52A1\u7AEF\u6E32\u67D3\u65F6\u9700\u8981\u6253\u5F00\u8FD9\u4E2A</td><td>boolean</td><td>false</td><td></td></tr><tr><td>withCredentials</td><td>\u4E0A\u4F20\u8BF7\u6C42\u65F6\u662F\u5426\u643A\u5E26 cookie</td><td>boolean</td><td>false</td><td></td></tr><tr><td>openFileDialogOnClick</td><td>\u70B9\u51FB\u6253\u5F00\u6587\u4EF6\u5BF9\u8BDD\u6846</td><td>boolean</td><td>true</td><td></td></tr><tr><td>remove</td><td>\u70B9\u51FB\u79FB\u9664\u6587\u4EF6\u65F6\u7684\u56DE\u8C03\uFF0C\u8FD4\u56DE\u503C\u4E3A false \u65F6\u4E0D\u79FB\u9664\u3002\u652F\u6301\u8FD4\u56DE\u4E00\u4E2A Promise \u5BF9\u8C61\uFF0CPromise \u5BF9\u8C61 resolve(false) \u6216 reject \u65F6\u4E0D\u79FB\u9664\u3002</td><td>Function(file): <code>boolean | Promise</code></td><td>\u65E0</td><td></td></tr><tr><td>transformFile</td><td>\u5728\u4E0A\u4F20\u4E4B\u524D\u8F6C\u6362\u6587\u4EF6\u3002\u652F\u6301\u8FD4\u56DE\u4E00\u4E2A Promise \u5BF9\u8C61</td><td>Function(file): <code>string | Blob | File | Promise&lt;string | Blob | File&gt;</code></td><td>\u65E0</td><td>1.5.0</td></tr></tbody></table><h3 id="\u4E8B\u4EF6">\u4E8B\u4EF6</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>change</td><td>\u4E0A\u4F20\u6587\u4EF6\u6539\u53D8\u65F6\u7684\u72B6\u6001\uFF0C\u8BE6\u89C1 <a href="#change">change</a></td><td>Function</td><td>\u65E0</td></tr><tr><td>preview</td><td>\u70B9\u51FB\u6587\u4EF6\u94FE\u63A5\u6216\u9884\u89C8\u56FE\u6807\u65F6\u7684\u56DE\u8C03</td><td>Function(file)</td><td>\u65E0</td></tr><tr><td>download</td><td>\u70B9\u51FB\u4E0B\u8F7D\u6587\u4EF6\u65F6\u7684\u56DE\u8C03\uFF0C\u5982\u679C\u6CA1\u6709\u6307\u5B9A\uFF0C\u5219\u9ED8\u8BA4\u8DF3\u8F6C\u5230\u6587\u4EF6 url \u5BF9\u5E94\u7684\u6807\u7B7E\u9875\u3002</td><td>Function(file): void</td><td>\u8DF3\u8F6C\u65B0\u6807\u7B7E\u9875</td></tr><tr><td>reject</td><td>\u62D6\u62FD\u6587\u4EF6\u4E0D\u7B26\u5408 accept \u7C7B\u578B\u65F6\u7684\u56DE\u8C03</td><td>Function(fileList)</td><td>\u65E0</td></tr></tbody></table><h3 id="change">change</h3><blockquote><p>\u4E0A\u4F20\u4E2D\u3001\u5B8C\u6210\u3001\u5931\u8D25\u90FD\u4F1A\u8C03\u7528\u8FD9\u4E2A\u51FD\u6570\u3002</p></blockquote><p>\u6587\u4EF6\u72B6\u6001\u6539\u53D8\u7684\u56DE\u8C03\uFF0C\u8FD4\u56DE\u4E3A\uFF1A</p><pre class="language-jsx"><code><span class="token punctuation">{</span>
    1808. 

  1808.   <span class="token literal-property property">file</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    1809. 

  1809.   <span class="token literal-property property">fileList</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">/* ... */</span> <span class="token punctuation">]</span><span class="token punctuation">,</span>
    1810. 

  1810.   <span class="token literal-property property">event</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    1811. 

  1811. <span class="token punctuation">}</span>
    1812. 

  1812. </code></pre><ol><li><p><code>file</code> \u5F53\u524D\u64CD\u4F5C\u7684\u6587\u4EF6\u5BF9\u8C61\u3002</p><pre class="language-jsx"><code><span class="token punctuation">{</span>
    1813. 

  1813.    <span class="token literal-property property">uid</span><span class="token operator">:</span> <span class="token string">&#39;uid&#39;</span><span class="token punctuation">,</span>      <span class="token comment">// \u6587\u4EF6\u552F\u4E00\u6807\u8BC6\uFF0C\u5EFA\u8BAE\u8BBE\u7F6E\u4E3A\u8D1F\u6570\uFF0C\u9632\u6B62\u548C\u5185\u90E8\u4EA7\u751F\u7684 id \u51B2\u7A81</span>
    1814. 

  1814.    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;xx.png&#39;</span><span class="token punctuation">,</span>   <span class="token comment">// \u6587\u4EF6\u540D</span>
    1815. 

  1815.    <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;done&#39;</span><span class="token punctuation">,</span> <span class="token comment">// \u72B6\u6001\u6709\uFF1Auploading done error removed</span>
    1816. 

  1816.    <span class="token literal-property property">response</span><span class="token operator">:</span> <span class="token string">&#39;{&quot;status&quot;: &quot;success&quot;}&#39;</span><span class="token punctuation">,</span> <span class="token comment">// \u670D\u52A1\u7AEF\u54CD\u5E94\u5185\u5BB9</span>
    1817. 

  1817.    <span class="token literal-property property">linkProps</span><span class="token operator">:</span> <span class="token string">&#39;{&quot;download&quot;: &quot;image&quot;}&#39;</span><span class="token punctuation">,</span> <span class="token comment">// \u4E0B\u8F7D\u94FE\u63A5\u989D\u5916\u7684 HTML \u5C5E\u6027</span>
    1818. 

  1818.    <span class="token literal-property property">xhr</span><span class="token operator">:</span> <span class="token string">&#39;XMLHttpRequest{ ... }&#39;</span><span class="token punctuation">,</span> <span class="token comment">// XMLHttpRequest Header</span>
    1819. 

  1819. <span class="token punctuation">}</span>
    1820. 

  1820. </code></pre></li><li><p><code>fileList</code> \u5F53\u524D\u7684\u6587\u4EF6\u5217\u8868\u3002</p></li><li><p><code>event</code> \u4E0A\u4F20\u4E2D\u7684\u670D\u52A1\u7AEF\u54CD\u5E94\u5185\u5BB9\uFF0C\u5305\u542B\u4E86\u4E0A\u4F20\u8FDB\u5EA6\u7B49\u4FE1\u606F\uFF0C\u9AD8\u7EA7\u6D4F\u89C8\u5668\u652F\u6301\u3002</p></li></ol>`,13)]))}var Fn=A(Wn,[["render",Vn]]);const Ln={pageData:{title:"Upload",description:"",frontmatter:{category:"Components",type:"Data Entry",title:"Upload",cover:"https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg"},headers:[{level:2,title:"When To Use",slug:"when-to-use",content:"Uploading is the process of publishing information (web pages, text, pictures, video, etc.) to a remote server via a web page or upload tool."},{level:2,title:"API",slug:"api",content:""},{level:3,title:"events",slug:"events",content:""},{level:3,title:"change",slug:"change",content:""}],relativePath:"src/docs/upload/index.en-US.md",content:`
    1821. 

  1821. Upload file by selecting or dragging.
    1822. 

  1822. 

  1823. ## When To Use
    1824. 

  1824. 

  1825. Uploading is the process of publishing information (web pages, text, pictures, video, etc.) to a remote server via a web page or upload tool.
    1826. 

  1826. 

  1827. - When you need to upload one or more files.
    1828. 

  1828. - When you need to show the process of uploading.
    1829. 

  1829. - When you need to upload files by dragging and dropping.
    1830. 

  1830. 

  1831. ## API
    1832. 

  1832. 

  1833. | Property | Description | Type | Default | Version |
    1834. 

  1834. | --- | --- | --- | --- | --- |
    1835. 

  1835. | accept | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - |  |
    1836. 

  1836. | action | Uploading URL | string\\|(file) =&gt; \`Promise\` | - |  |
    1837. 

  1837. | method | http method of upload request | string | &#39;post&#39; | 1.5.0 |
    1838. 

  1838. | directory | support upload whole directory ([caniuse](https://caniuse.com/#feat=input-file-directory)) | boolean | false |  |
    1839. 

  1839. | beforeUpload | Hook function which will be executed before uploading. Uploading will be stopped with \`false\` or a rejected Promise returned. **Warning\uFF1Athis function is not supported in IE9**\u3002 | (file, fileList) =&gt; \`boolean | Promise\` | - |  |
    1840. 

  1840. | customRequest | override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest | Function | - |  |
    1841. 

  1841. | data | Uploading params or function which can return uploading params. | object\\|function(file) | - |  |
    1842. 

  1842. | disabled | disable upload button | boolean | false |  |
    1843. 

  1843. | fileList | List of files that have been uploaded (controlled). Here is a common issue [#2423](https://github.com/ant-design/ant-design/issues/2423) when using it | object\\[] | - |  |
    1844. 

  1844. | headers | Set request headers, valid above IE10. | object | - |  |
    1845. 

  1845. | listType | Built-in stylesheets, support for three types: \`text\`, \`picture\` or \`picture-card\` | string | &#39;text&#39; |  |
    1846. 

  1846. | multiple | Whether to support selected multiple file. \`IE10+\` supported. You can select multiple files with CTRL holding down while multiple is set to be true | boolean | false |  |
    1847. 

  1847. | name | The name of uploading file | string | &#39;file&#39; |  |
    1848. 

  1848. | previewFile | Customize preview file logic | (file: File \\| Blob) =&gt; Promise&lt;dataURL: string&gt; | - | 1.5.0 |
    1849. 

  1849. | showUploadList | Whether to show default upload list, could be an object to specify \`showPreviewIcon\` and \`showRemoveIcon\` individually | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean } | true |  |
    1850. 

  1850. | supportServerRender | Need to be turned on while the server side is rendering. | boolean | false |  |
    1851. 

  1851. | withCredentials | ajax upload with cookie sent | boolean | false |  |
    1852. 

  1852. | openFileDialogOnClick | click open file dialog | boolean | true |  |
    1853. 

  1853. | remove | A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is \`false\` or a Promise which resolve(false) or reject. | Function(file): \`boolean | Promise\` | - |  |
    1854. 

  1854. | transformFile \xA0 | Customize transform file before request | Function(file): \`string | Blob | File | Promise&lt;string | Blob | File&gt;\` | - | 1.5.0 |
    1855. 

  1855. 

  1856. ### events
    1857. 

  1857. 

  1858. | Events Name | Description | Arguments | Version |
    1859. 

  1859. | --- | --- | --- | --- |
    1860. 

  1860. | change | A callback function, can be executed when uploading state is changing. See [change](#change) | Function | - |  |
    1861. 

  1861. | preview | A callback function, will be executed when file link or preview icon is clicked. | Function(file) | - |  |
    1862. 

  1862. | download | Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB. | Function(file): void | Jump to new TAB | 1.5.0 |
    1863. 

  1863. | reject | A callback function, will be executed when drop files is not accept. | Function(fileList) | - |  |
    1864. 

  1864. 

  1865. ### change
    1866. 

  1866. 

  1867. &gt; The function will be called when uploading is in progress, completed or failed
    1868. 

  1868. 

  1869. When uploading state change, it returns:
    1870. 

  1870. 

  1871. \`\`\`jsx
    1872. 

  1872. {
    1873. 

  1873.   file: { /* ... */ },
    1874. 

  1874.   fileList: [ /* ... */ ],
    1875. 

  1875.   event: { /* ... */ },
    1876. 

  1876. }
    1877. 

  1877. \`\`\`
    1878. 

  1878. 

  1879. 1. \`file\` File object for the current operation.
    1880. 

  1880. 

  1881.    \`\`\`jsx
    1882. 

  1882.    {
    1883. 

  1883.       uid: &#39;uid&#39;,   // unique identifier, negative is recommend, to prevent interference with internal generated id
    1884. 

  1884.       name: &#39;xx.png&#39;,   // file name
    1885. 

  1885.       status: &#39;done&#39;, // options\uFF1Auploading, done, error, removed
    1886. 

  1886.       response: &#39;{&quot;status&quot;: &quot;success&quot;}&#39;, // response from server
    1887. 

  1887.       linkProps: &#39;{&quot;download&quot;: &quot;image&quot;}&#39;, // additional html props of file link
    1888. 

  1888.       xhr: &#39;XMLHttpRequest{ ... }&#39;, // XMLHttpRequest Header
    1889. 

  1889.    }
    1890. 

  1890.    \`\`\`
    1891. 

  1891. 

  1892. 2. \`fileList\` current list of files
    1893. 

  1893. 3. \`event\` response from server, including uploading progress, supported by advanced browsers.
    1894. 

  1894. `,html:`<p>Upload file by selecting or dragging.</p>
    1895. 

  1895. <h2 id="when-to-use">When To Use</h2>
    1896. 

  1896. <p>Uploading is the process of publishing information (web pages, text, pictures, video, etc.) to a remote server via a web page or upload tool.</p>
    1897. 

  1897. <ul>
    1898. 

  1898. <li>When you need to upload one or more files.</li>
    1899. 

  1899. <li>When you need to show the process of uploading.</li>
    1900. 

  1900. <li>When you need to upload files by dragging and dropping.</li>
    1901. 

  1901. </ul>
    1902. 

  1902. <h2 id="api">API</h2>
    1903. 

  1903. <table>
    1904. 

  1904. <thead>
    1905. 

  1905. <tr>
    1906. 

  1906. <th>Property</th>
    1907. 

  1907. <th>Description</th>
    1908. 

  1908. <th>Type</th>
    1909. 

  1909. <th>Default</th>
    1910. 

  1910. <th>Version</th>
    1911. 

  1911. </tr>
    1912. 

  1912. </thead>
    1913. 

  1913. <tbody>
    1914. 

  1914. <tr>
    1915. 

  1915. <td>accept</td>
    1916. 

  1916. <td>File types that can be accepted. See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept" target="_blank" rel="noopener noreferrer">input accept Attribute</a></td>
    1917. 

  1917. <td>string</td>
    1918. 

  1918. <td>-</td>
    1919. 

  1919. <td></td>
    1920. 

  1920. </tr>
    1921. 

  1921. <tr>
    1922. 

  1922. <td>action</td>
    1923. 

  1923. <td>Uploading URL</td>
    1924. 

  1924. <td>string|(file) =&gt; <code>Promise</code></td>
    1925. 

  1925. <td>-</td>
    1926. 

  1926. <td></td>
    1927. 

  1927. </tr>
    1928. 

  1928. <tr>
    1929. 

  1929. <td>method</td>
    1930. 

  1930. <td>http method of upload request</td>
    1931. 

  1931. <td>string</td>
    1932. 

  1932. <td>'post'</td>
    1933. 

  1933. <td>1.5.0</td>
    1934. 

  1934. </tr>
    1935. 

  1935. <tr>
    1936. 

  1936. <td>directory</td>
    1937. 

  1937. <td>support upload whole directory (<a href="https://caniuse.com/#feat=input-file-directory" target="_blank" rel="noopener noreferrer">caniuse</a>)</td>
    1938. 

  1938. <td>boolean</td>
    1939. 

  1939. <td>false</td>
    1940. 

  1940. <td></td>
    1941. 

  1941. </tr>
    1942. 

  1942. <tr>
    1943. 

  1943. <td>beforeUpload</td>
    1944. 

  1944. <td>Hook function which will be executed before uploading. Uploading will be stopped with <code>false</code> or a rejected Promise returned. <strong>Warning\uFF1Athis function is not supported in IE9</strong>\u3002</td>
    1945. 

  1945. <td>(file, fileList) =&gt; <code>boolean | Promise</code></td>
    1946. 

  1946. <td>-</td>
    1947. 

  1947. <td></td>
    1948. 

  1948. </tr>
    1949. 

  1949. <tr>
    1950. 

  1950. <td>customRequest</td>
    1951. 

  1951. <td>override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest</td>
    1952. 

  1952. <td>Function</td>
    1953. 

  1953. <td>-</td>
    1954. 

  1954. <td></td>
    1955. 

  1955. </tr>
    1956. 

  1956. <tr>
    1957. 

  1957. <td>data</td>
    1958. 

  1958. <td>Uploading params or function which can return uploading params.</td>
    1959. 

  1959. <td>object|function(file)</td>
    1960. 

  1960. <td>-</td>
    1961. 

  1961. <td></td>
    1962. 

  1962. </tr>
    1963. 

  1963. <tr>
    1964. 

  1964. <td>disabled</td>
    1965. 

  1965. <td>disable upload button</td>
    1966. 

  1966. <td>boolean</td>
    1967. 

  1967. <td>false</td>
    1968. 

  1968. <td></td>
    1969. 

  1969. </tr>
    1970. 

  1970. <tr>
    1971. 

  1971. <td>fileList</td>
    1972. 

  1972. <td>List of files that have been uploaded (controlled). Here is a common issue <a href="https://github.com/ant-design/ant-design/issues/2423" target="_blank" rel="noopener noreferrer">#2423</a> when using it</td>
    1973. 

  1973. <td>object[]</td>
    1974. 

  1974. <td>-</td>
    1975. 

  1975. <td></td>
    1976. 

  1976. </tr>
    1977. 

  1977. <tr>
    1978. 

  1978. <td>headers</td>
    1979. 

  1979. <td>Set request headers, valid above IE10.</td>
    1980. 

  1980. <td>object</td>
    1981. 

  1981. <td>-</td>
    1982. 

  1982. <td></td>
    1983. 

  1983. </tr>
    1984. 

  1984. <tr>
    1985. 

  1985. <td>listType</td>
    1986. 

  1986. <td>Built-in stylesheets, support for three types: <code>text</code>, <code>picture</code> or <code>picture-card</code></td>
    1987. 

  1987. <td>string</td>
    1988. 

  1988. <td>'text'</td>
    1989. 

  1989. <td></td>
    1990. 

  1990. </tr>
    1991. 

  1991. <tr>
    1992. 

  1992. <td>multiple</td>
    1993. 

  1993. <td>Whether to support selected multiple file. <code>IE10+</code> supported. You can select multiple files with CTRL holding down while multiple is set to be true</td>
    1994. 

  1994. <td>boolean</td>
    1995. 

  1995. <td>false</td>
    1996. 

  1996. <td></td>
    1997. 

  1997. </tr>
    1998. 

  1998. <tr>
    1999. 

  1999. <td>name</td>
    2000. 

  2000. <td>The name of uploading file</td>
    2001. 

  2001. <td>string</td>
    2002. 

  2002. <td>'file'</td>
    2003. 

  2003. <td></td>
    2004. 

  2004. </tr>
    2005. 

  2005. <tr>
    2006. 

  2006. <td>previewFile</td>
    2007. 

  2007. <td>Customize preview file logic</td>
    2008. 

  2008. <td>(file: File | Blob) =&gt; Promise&lt;dataURL: string&gt;</td>
    2009. 

  2009. <td>-</td>
    2010. 

  2010. <td>1.5.0</td>
    2011. 

  2011. </tr>
    2012. 

  2012. <tr>
    2013. 

  2013. <td>showUploadList</td>
    2014. 

  2014. <td>Whether to show default upload list, could be an object to specify <code>showPreviewIcon</code> and <code>showRemoveIcon</code> individually</td>
    2015. 

  2015. <td>Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean }</td>
    2016. 

  2016. <td>true</td>
    2017. 

  2017. <td></td>
    2018. 

  2018. </tr>
    2019. 

  2019. <tr>
    2020. 

  2020. <td>supportServerRender</td>
    2021. 

  2021. <td>Need to be turned on while the server side is rendering.</td>
    2022. 

  2022. <td>boolean</td>
    2023. 

  2023. <td>false</td>
    2024. 

  2024. <td></td>
    2025. 

  2025. </tr>
    2026. 

  2026. <tr>
    2027. 

  2027. <td>withCredentials</td>
    2028. 

  2028. <td>ajax upload with cookie sent</td>
    2029. 

  2029. <td>boolean</td>
    2030. 

  2030. <td>false</td>
    2031. 

  2031. <td></td>
    2032. 

  2032. </tr>
    2033. 

  2033. <tr>
    2034. 

  2034. <td>openFileDialogOnClick</td>
    2035. 

  2035. <td>click open file dialog</td>
    2036. 

  2036. <td>boolean</td>
    2037. 

  2037. <td>true</td>
    2038. 

  2038. <td></td>
    2039. 

  2039. </tr>
    2040. 

  2040. <tr>
    2041. 

  2041. <td>remove</td>
    2042. 

  2042. <td>A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is <code>false</code> or a Promise which resolve(false) or reject.</td>
    2043. 

  2043. <td>Function(file): <code>boolean | Promise</code></td>
    2044. 

  2044. <td>-</td>
    2045. 

  2045. <td></td>
    2046. 

  2046. </tr>
    2047. 

  2047. <tr>
    2048. 

  2048. <td>transformFile</td>
    2049. 

  2049. <td>Customize transform file before request</td>
    2050. 

  2050. <td>Function(file): <code>string | Blob | File | Promise&lt;string | Blob | File&gt;</code></td>
    2051. 

  2051. <td>-</td>
    2052. 

  2052. <td>1.5.0</td>
    2053. 

  2053. </tr>
    2054. 

  2054. </tbody>
    2055. 

  2055. </table>
    2056. 

  2056. <h3 id="events">events</h3>
    2057. 

  2057. <table>
    2058. 

  2058. <thead>
    2059. 

  2059. <tr>
    2060. 

  2060. <th>Events Name</th>
    2061. 

  2061. <th>Description</th>
    2062. 

  2062. <th>Arguments</th>
    2063. 

  2063. <th>Version</th>
    2064. 

  2064. </tr>
    2065. 

  2065. </thead>
    2066. 

  2066. <tbody>
    2067. 

  2067. <tr>
    2068. 

  2068. <td>change</td>
    2069. 

  2069. <td>A callback function, can be executed when uploading state is changing. See <a href="#change">change</a></td>
    2070. 

  2070. <td>Function</td>
    2071. 

  2071. <td>-</td>
    2072. 

  2072. </tr>
    2073. 

  2073. <tr>
    2074. 

  2074. <td>preview</td>
    2075. 

  2075. <td>A callback function, will be executed when file link or preview icon is clicked.</td>
    2076. 

  2076. <td>Function(file)</td>
    2077. 

  2077. <td>-</td>
    2078. 

  2078. </tr>
    2079. 

  2079. <tr>
    2080. 

  2080. <td>download</td>
    2081. 

  2081. <td>Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB.</td>
    2082. 

  2082. <td>Function(file): void</td>
    2083. 

  2083. <td>Jump to new TAB</td>
    2084. 

  2084. </tr>
    2085. 

  2085. <tr>
    2086. 

  2086. <td>reject</td>
    2087. 

  2087. <td>A callback function, will be executed when drop files is not accept.</td>
    2088. 

  2088. <td>Function(fileList)</td>
    2089. 

  2089. <td>-</td>
    2090. 

  2090. </tr>
    2091. 

  2091. </tbody>
    2092. 

  2092. </table>
    2093. 

  2093. <h3 id="change">change</h3>
    2094. 

  2094. <blockquote>
    2095. 

  2095. <p>The function will be called when uploading is in progress, completed or failed</p>
    2096. 

  2096. </blockquote>
    2097. 

  2097. <p>When uploading state change, it returns:</p>
    2098. 

  2098. <pre class="language-jsx" v-pre><code><span class="token punctuation">{</span>
    2099. 

  2099.   <span class="token literal-property property">file</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    2100. 

  2100.   <span class="token literal-property property">fileList</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">/* ... */</span> <span class="token punctuation">]</span><span class="token punctuation">,</span>
    2101. 

  2101.   <span class="token literal-property property">event</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    2102. 

  2102. <span class="token punctuation">}</span>
    2103. 

  2103. </code></pre>
    2104. 

  2104. <ol>
    2105. 

  2105. <li>
    2106. 

  2106. <p><code>file</code> File object for the current operation.</p>
    2107. 

  2107. <pre class="language-jsx" v-pre><code><span class="token punctuation">{</span>
    2108. 

  2108.    <span class="token literal-property property">uid</span><span class="token operator">:</span> <span class="token string">'uid'</span><span class="token punctuation">,</span>   <span class="token comment">// unique identifier, negative is recommend, to prevent interference with internal generated id</span>
    2109. 

  2109.    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'xx.png'</span><span class="token punctuation">,</span>   <span class="token comment">// file name</span>
    2110. 

  2110.    <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">'done'</span><span class="token punctuation">,</span> <span class="token comment">// options\uFF1Auploading, done, error, removed</span>
    2111. 

  2111.    <span class="token literal-property property">response</span><span class="token operator">:</span> <span class="token string">'{"status": "success"}'</span><span class="token punctuation">,</span> <span class="token comment">// response from server</span>
    2112. 

  2112.    <span class="token literal-property property">linkProps</span><span class="token operator">:</span> <span class="token string">'{"download": "image"}'</span><span class="token punctuation">,</span> <span class="token comment">// additional html props of file link</span>
    2113. 

  2113.    <span class="token literal-property property">xhr</span><span class="token operator">:</span> <span class="token string">'XMLHttpRequest{ ... }'</span><span class="token punctuation">,</span> <span class="token comment">// XMLHttpRequest Header</span>
    2114. 

  2114. <span class="token punctuation">}</span>
    2115. 

  2115. </code></pre>
    2116. 

  2116. </li>
    2117. 

  2117. <li>
    2118. 

  2118. <p><code>fileList</code> current list of files</p>
    2119. 

  2119. </li>
    2120. 

  2120. <li>
    2121. 

  2121. <p><code>event</code> response from server, including uploading progress, supported by advanced browsers.</p>
    2122. 

  2122. </li>
    2123. 

  2123. </ol>
    2124. 

  2124. `,lastUpdated:1748059052791}},Yn={class:"markdown"};function Xn(t,a,p,u,r,i){return C(),w("article",Yn,a[0]||(a[0]=[v(`<p>Upload file by selecting or dragging.</p><h2 id="when-to-use">When To Use</h2><p>Uploading is the process of publishing information (web pages, text, pictures, video, etc.) to a remote server via a web page or upload tool.</p><ul><li>When you need to upload one or more files.</li><li>When you need to show the process of uploading.</li><li>When you need to upload files by dragging and dropping.</li></ul><h2 id="api">API</h2><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th><th>Version</th></tr></thead><tbody><tr><td>accept</td><td>File types that can be accepted. See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept" target="_blank" rel="noopener noreferrer">input accept Attribute</a></td><td>string</td><td>-</td><td></td></tr><tr><td>action</td><td>Uploading URL</td><td>string|(file) =&gt; <code>Promise</code></td><td>-</td><td></td></tr><tr><td>method</td><td>http method of upload request</td><td>string</td><td>&#39;post&#39;</td><td>1.5.0</td></tr><tr><td>directory</td><td>support upload whole directory (<a href="https://caniuse.com/#feat=input-file-directory" target="_blank" rel="noopener noreferrer">caniuse</a>)</td><td>boolean</td><td>false</td><td></td></tr><tr><td>beforeUpload</td><td>Hook function which will be executed before uploading. Uploading will be stopped with <code>false</code> or a rejected Promise returned. <strong>Warning\uFF1Athis function is not supported in IE9</strong>\u3002</td><td>(file, fileList) =&gt; <code>boolean | Promise</code></td><td>-</td><td></td></tr><tr><td>customRequest</td><td>override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest</td><td>Function</td><td>-</td><td></td></tr><tr><td>data</td><td>Uploading params or function which can return uploading params.</td><td>object|function(file)</td><td>-</td><td></td></tr><tr><td>disabled</td><td>disable upload button</td><td>boolean</td><td>false</td><td></td></tr><tr><td>fileList</td><td>List of files that have been uploaded (controlled). Here is a common issue <a href="https://github.com/ant-design/ant-design/issues/2423" target="_blank" rel="noopener noreferrer">#2423</a> when using it</td><td>object[]</td><td>-</td><td></td></tr><tr><td>headers</td><td>Set request headers, valid above IE10.</td><td>object</td><td>-</td><td></td></tr><tr><td>listType</td><td>Built-in stylesheets, support for three types: <code>text</code>, <code>picture</code> or <code>picture-card</code></td><td>string</td><td>&#39;text&#39;</td><td></td></tr><tr><td>multiple</td><td>Whether to support selected multiple file. <code>IE10+</code> supported. You can select multiple files with CTRL holding down while multiple is set to be true</td><td>boolean</td><td>false</td><td></td></tr><tr><td>name</td><td>The name of uploading file</td><td>string</td><td>&#39;file&#39;</td><td></td></tr><tr><td>previewFile</td><td>Customize preview file logic</td><td>(file: File | Blob) =&gt; Promise&lt;dataURL: string&gt;</td><td>-</td><td>1.5.0</td></tr><tr><td>showUploadList</td><td>Whether to show default upload list, could be an object to specify <code>showPreviewIcon</code> and <code>showRemoveIcon</code> individually</td><td>Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean }</td><td>true</td><td></td></tr><tr><td>supportServerRender</td><td>Need to be turned on while the server side is rendering.</td><td>boolean</td><td>false</td><td></td></tr><tr><td>withCredentials</td><td>ajax upload with cookie sent</td><td>boolean</td><td>false</td><td></td></tr><tr><td>openFileDialogOnClick</td><td>click open file dialog</td><td>boolean</td><td>true</td><td></td></tr><tr><td>remove</td><td>A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is <code>false</code> or a Promise which resolve(false) or reject.</td><td>Function(file): <code>boolean | Promise</code></td><td>-</td><td></td></tr><tr><td>transformFile</td><td>Customize transform file before request</td><td>Function(file): <code>string | Blob | File | Promise&lt;string | Blob | File&gt;</code></td><td>-</td><td>1.5.0</td></tr></tbody></table><h3 id="events">events</h3><table><thead><tr><th>Events Name</th><th>Description</th><th>Arguments</th><th>Version</th></tr></thead><tbody><tr><td>change</td><td>A callback function, can be executed when uploading state is changing. See <a href="#change">change</a></td><td>Function</td><td>-</td></tr><tr><td>preview</td><td>A callback function, will be executed when file link or preview icon is clicked.</td><td>Function(file)</td><td>-</td></tr><tr><td>download</td><td>Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB.</td><td>Function(file): void</td><td>Jump to new TAB</td></tr><tr><td>reject</td><td>A callback function, will be executed when drop files is not accept.</td><td>Function(fileList)</td><td>-</td></tr></tbody></table><h3 id="change">change</h3><blockquote><p>The function will be called when uploading is in progress, completed or failed</p></blockquote><p>When uploading state change, it returns:</p><pre class="language-jsx"><code><span class="token punctuation">{</span>
    2125. 

  2125.   <span class="token literal-property property">file</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    2126. 

  2126.   <span class="token literal-property property">fileList</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">/* ... */</span> <span class="token punctuation">]</span><span class="token punctuation">,</span>
    2127. 

  2127.   <span class="token literal-property property">event</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    2128. 

  2128. <span class="token punctuation">}</span>
    2129. 

  2129. </code></pre><ol><li><p><code>file</code> File object for the current operation.</p><pre class="language-jsx"><code><span class="token punctuation">{</span>
    2130. 

  2130.    <span class="token literal-property property">uid</span><span class="token operator">:</span> <span class="token string">&#39;uid&#39;</span><span class="token punctuation">,</span>   <span class="token comment">// unique identifier, negative is recommend, to prevent interference with internal generated id</span>
    2131. 

  2131.    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;xx.png&#39;</span><span class="token punctuation">,</span>   <span class="token comment">// file name</span>
    2132. 

  2132.    <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">&#39;done&#39;</span><span class="token punctuation">,</span> <span class="token comment">// options\uFF1Auploading, done, error, removed</span>
    2133. 

  2133.    <span class="token literal-property property">response</span><span class="token operator">:</span> <span class="token string">&#39;{&quot;status&quot;: &quot;success&quot;}&#39;</span><span class="token punctuation">,</span> <span class="token comment">// response from server</span>
    2134. 

  2134.    <span class="token literal-property property">linkProps</span><span class="token operator">:</span> <span class="token string">&#39;{&quot;download&quot;: &quot;image&quot;}&#39;</span><span class="token punctuation">,</span> <span class="token comment">// additional html props of file link</span>
    2135. 

  2135.    <span class="token literal-property property">xhr</span><span class="token operator">:</span> <span class="token string">&#39;XMLHttpRequest{ ... }&#39;</span><span class="token punctuation">,</span> <span class="token comment">// XMLHttpRequest Header</span>
    2136. 

  2136. <span class="token punctuation">}</span>
    2137. 

  2137. </code></pre></li><li><p><code>fileList</code> current list of files</p></li><li><p><code>event</code> response from server, including uploading progress, supported by advanced browsers.</p></li></ol>`,13)]))}var xn=A(Ln,[["render",Xn]]);const Hn=y({CN:Fn,US:xn,components:{Basic:z,Avatar:Q,DefaultFileList:T,PictureCard:an,FileList:en,Drag:un,PictureStyle:gn,UploadManually:mn,Directory:yn,PreviewFile:wn,TransformFile:Gn},setup(){return{}}});function Rn(t,a,p,u,r,i){const c=e("Basic"),k=e("Avatar"),g=e("DefaultFileList"),d=e("PictureCard"),I=e("FileList"),G=e("Drag"),W=e("PictureStyle"),B=e("UploadManually"),V=e("Directory"),F=e("PreviewFile"),L=e("TransformFile"),Y=e("demo-sort");return C(),b(Y,null,{default:o(()=>[l(c),l(k),l(g),l(d),l(I),l(G),l(W),l(B),l(V),l(F),l(L)]),_:1})}var zn=A(Hn,[["render",Rn]]);export{zn as default};
    2138.