147-9c128e7e1f8e9241073d.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[147],{921:function(n,a,s){"use strict";s.r(a),s.d(a,"default",(function(){return D}));var t=s(846),p=s.n(t),o=s(840),e=s.n(o),c=s(841),u=s.n(c),l=s(521),i=s.n(l),k=s(842),r=s.n(k),d=s(843),m=s.n(d),f=s(844),y=s.n(f),g=s(845),h=s.n(g),w=s(0),v=s.n(w),b=s(210),U=s(145);function E(n,a){var s=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);a&&(t=t.filter((function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable}))),s.push.apply(s,t)}return s}function S(n){for(var a=1;a<arguments.length;a++){var s=null!=arguments[a]?arguments[a]:{};a%2?E(Object(s),!0).forEach((function(a){h()(n,a,s[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(s)):E(Object(s)).forEach((function(a){Object.defineProperty(n,a,Object.getOwnPropertyDescriptor(s,a))}))}return n}function x(n){var a=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(n){return!1}}();return function(){var s,t=y()(n);if(a){var p=y()(this).constructor;s=Reflect.construct(t,arguments,p)}else s=t.apply(this,arguments);return m()(this,s)}}var M=function(){var n=function(n){r()(s,n);var a=x(s);function s(){var n;e()(this,s);for(var t=arguments.length,p=new Array(t),o=0;o<t;o++)p[o]=arguments[o];return n=a.call.apply(a,[this].concat(p)),h()(i()(n),"onUploadChange",(function(n){console.log(n)})),h()(i()(n),"onUpload",(function(n,a){return new Promise((function(n,s){var t=0;setTimeout((function p(){t<100?(a(t+=10),setTimeout(p,500)):Math.random()>.5?n():s()}),500)}))})),h()(i()(n),"onUploadError",(function(n,a){"overMaxAmount"===n?U.Notify.error("最多可上传 ".concat(a.maxAmount," 个文件")):"overMaxSize"===n&&U.Notify.error("文件大小不能超过 ".concat(a.formattedMaxSize))})),n}return u()(s,[{key:"render",value:function(){return v.a.createElement(U.Upload,{multiple:!0,className:"zent-upload-demo-pic",maxSize:2097152,maxAmount:3,tips:"单个文件不超过 2M",onChange:this.onUploadChange,onUpload:this.onUpload,onError:this.onUploadError})}}]),s}(v.a.Component);return v.a.createElement(n,null)},z=function(){var n=function(n){r()(s,n);var a=x(s);function s(){var n;e()(this,s);for(var t=arguments.length,p=new Array(t),o=0;o<t;o++)p[o]=arguments[o];return n=a.call.apply(a,[this].concat(p)),h()(i()(n),"state",{fileList:[]}),h()(i()(n),"onUploadChange",(function(a){n.setState({fileList:a})})),h()(i()(n),"onUpload",(function(n,a){return new Promise((function(n,s){var t=0;setTimeout((function p(){t<100?(a(t+=10),setTimeout(p,500)):Math.random()>.5?n():s()}),500)}))})),h()(i()(n),"onUploadError",(function(n,a){"overMaxAmount"===n?U.Notify.error("最多可上传 ".concat(a.maxAmount," 个文件")):"overMaxSize"===n&&U.Notify.error("文件大小不能超过 ".concat(a.formattedMaxSize))})),n}return u()(s,[{key:"render",value:function(){var n=this.state.fileList;return v.a.createElement(U.Upload,{multiple:!0,fileList:n,className:"zent-upload-demo-pic",maxSize:2097152,maxAmount:3,tips:"单个文件不超过 2M",onChange:this.onUploadChange,onUpload:this.onUpload,onError:this.onUploadError})}}]),s}(v.a.Component);return v.a.createElement(n,null)},A=function(){var n=[{name:"1.md",type:"text/plain"},{name:"2.mp4",type:"video/mpeg4"}],a=function(a){r()(t,a);var s=x(t);function t(){var n;e()(this,t);for(var a=arguments.length,p=new Array(a),o=0;o<a;o++)p[o]=arguments[o];return n=s.call.apply(s,[this].concat(p)),h()(i()(n),"onUploadChange",(function(n){console.log(n)})),h()(i()(n),"onUpload",(function(n,a){return new Promise((function(n,s){var t=0;setTimeout((function p(){t<100?(a(t+=10),setTimeout(p,500)):Math.random()>.5?n():s()}),500)}))})),h()(i()(n),"onUploadError",(function(n,a){"overMaxAmount"===n?U.Notify.error("最多可上传 ".concat(a.maxAmount," 个文件")):"overMaxSize"===n&&U.Notify.error("文件大小不能超过 ".concat(a.formattedMaxSize))})),n}return u()(t,[{key:"render",value:function(){return v.a.createElement(U.Upload,{multiple:!0,defaultFileList:n,className:"zent-upload-demo-pic",maxSize:2097152,maxAmount:3,tips:"单个文件不超过 2M",onChange:this.onUploadChange,onUpload:this.onUpload,onError:this.onUploadError})}}]),t}(v.a.Component);return v.a.createElement(a,null)},C=function(){var n=function(n){r()(s,n);var a=x(s);function s(){var n;e()(this,s);for(var t=arguments.length,p=new Array(t),o=0;o<t;o++)p[o]=arguments[o];return n=a.call.apply(a,[this].concat(p)),h()(i()(n),"state",{fileList:[]}),h()(i()(n),"onUploadChange",(function(a){n.setState({fileList:a})})),h()(i()(n),"onUpload",(function(n,a){return new Promise((function(n,s){var t=0;setTimeout((function p(){t<100?(a(t+=10),setTimeout(p,500)):Math.random()>.5?n():s()}),500)}))})),h()(i()(n),"onUploadError",(function(n,a){"overMaxAmount"===n?U.Notify.error("最多可上传 ".concat(a.maxAmount," 个文件")):"overMaxSize"===n&&U.Notify.error("文件大小不能超过 ".concat(a.formattedMaxSize))})),n}return u()(s,[{key:"render",value:function(){this.state.fileList;return v.a.createElement(U.Upload,{multiple:!0,className:"zent-upload-demo-pic",maxSize:10485760,tips:"单个文件不超过 10M",onChange:this.onUploadChange,onUpload:this.onUpload,onError:this.onUploadError,pagination:!0})}}]),s}(v.a.Component);return v.a.createElement(n,null)},L=function(){var n=function(n){r()(s,n);var a=x(s);function s(){var n;e()(this,s);for(var t=arguments.length,p=new Array(t),o=0;o<t;o++)p[o]=arguments[o];return n=a.call.apply(a,[this].concat(p)),h()(i()(n),"state",{fileList:[]}),h()(i()(n),"onUploadChange",(function(a){n.setState({fileList:a})})),h()(i()(n),"onUpload",(function(n,a){return new Promise((function(n,s){var t=0;setTimeout((function p(){t<100?(a(t+=10),setTimeout(p,500)):Math.random()>.5?n():s()}),500)}))})),h()(i()(n),"onUploadError",(function(n,a){"overMaxAmount"===n?U.Notify.error("最多可上传 ".concat(a.maxAmount," 个文件")):"overMaxSize"===n&&U.Notify.error("文件大小不能超过 ".concat(a.formattedMaxSize))})),n}return u()(s,[{key:"render",value:function(){this.state.fileList;return v.a.createElement(U.Upload,{multiple:!0,className:"zent-upload-demo-pic",maxSize:10485760,tips:"单个文件不超过 10M",onChange:this.onUploadChange,onUpload:this.onUpload,onError:this.onUploadError,sortable:!0})}}]),s}(v.a.Component);return v.a.createElement(n,null)},j=function(){var n=function(n){r()(s,n);var a=x(s);function s(){var n;e()(this,s);for(var t=arguments.length,p=new Array(t),o=0;o<t;o++)p[o]=arguments[o];return n=a.call.apply(a,[this].concat(p)),h()(i()(n),"onUploadChange",(function(n){console.log(n)})),h()(i()(n),"onUpload",(function(n,a){return new Promise((function(n,s){var t=0;setTimeout((function p(){t<100?(a(t+=10),setTimeout(p,500)):Math.random()>.5?Math.random()>.3?n():n("https://img.yzcdn.cn/public_files/2017/02/09/e84aa8cbbf7852688c86218c1f3bbf17.png"):s()}),500)}))})),h()(i()(n),"onUploadError",(function(n,a){"overMaxAmount"===n?U.Notify.error("最多可上传 ".concat(a.maxAmount," 张图片")):"overMaxSize"===n&&U.Notify.error("图片大小不能超过 ".concat(a.formattedMaxSize))})),n}return u()(s,[{key:"render",value:function(){return v.a.createElement(U.ImageUpload,{className:"zent-image-upload-demo",maxSize:5242880,tips:"建议尺寸 640*640，最多 9 张，单张图片不超过 5M",maxAmount:9,multiple:!0,sortable:!0,tips:"建议尺寸 640*640，最多 9 张，单张图片不超过 5M",onChange:this.onUploadChange,onUpload:this.onUpload,onError:this.onUploadError})}}]),s}(v.a.Component);return v.a.createElement(n,null)},N=function(){var n=U.ImageUpload.FILE_UPLOAD_STATUS,a=function(a){r()(t,a);var s=x(t);function t(){var a;e()(this,t);for(var p=arguments.length,o=new Array(p),c=0;c<p;c++)o[c]=arguments[c];return a=s.call.apply(s,[this].concat(o)),h()(i()(a),"state",{fileList:[]}),h()(i()(a),"onUploadChange",(function(n,s){a.setState({fileList:n}),s&&"retry"===s.type&&a.uploadItem(s.item._id)})),h()(i()(a),"uploadItem",(function(s){!function t(){var p=a.state.fileList.find((function(n){return n._id===s})),o=p.percent,e=p.status;o<100?(e=n.uploading,o+=10):e===n.uploading?e=Math.random()>.5?n.success:n.failed:e===n.failed&&(e=n.uploading,o=0);var c=S(S({},p),{},{percent:o,status:e});a.setState((function(){return{fileList:a.state.fileList.map((function(n){return n._id===p._id?c:n}))}}),(function(){-1===[n.success,n.failed].indexOf(e)&&setTimeout(t,500)}))}()})),h()(i()(a),"startUpload",(function(){a.state.fileList.forEach((function(s){s.status===n.beforeUpload&&a.uploadItem(s._id)}))})),h()(i()(a),"onUploadError",(function(n,a){"overMaxAmount"===n?U.Notify.error("最多可上传 ".concat(a.maxAmount," 张图片")):"overMaxSize"===n&&U.Notify.error("图片大小不能超过 ".concat(a.formattedMaxSize))})),a}return u()(t,[{key:"render",value:function(){var n=this.state.fileList;return v.a.createElement(v.a.Fragment,null,v.a.createElement(U.ImageUpload,{className:"zent-image-upload-demo",maxSize:5242880,fileList:n,maxAmount:9,multiple:!0,sortable:!0,manualUpload:!0,tips:"建议尺寸 640*640，最多 9 张，单张图片不超过 5M",onChange:this.onUploadChange,onError:this.onUploadError}),v.a.createElement(U.Button,{className:"zent-image-upload-skip-demo-btn",onClick:this.startUpload},"开始上传"))}}]),t}(v.a.Component);return v.a.createElement(a,null)},I=function(){var n=U.Upload.FILE_UPLOAD_STATUS,a=function(a){var s=a.item,t=(a.i18n,a.onRetry),p=a.onDelete;return v.a.createElement("div",null,v.a.createElement("p",null,s.name),v.a.createElement("p",null,"进度：",s.percent,"%"),v.a.createElement("div",null,s.status===n.failed&&v.a.createElement(U.Button,{onClick:function(){return t(s)}},"重试"),v.a.createElement(U.Button,{type:"danger",onClick:function(){return p(s)}},"删除")))},s=function(n){r()(t,n);var s=x(t);function t(){var n;e()(this,t);for(var a=arguments.length,p=new Array(a),o=0;o<a;o++)p[o]=arguments[o];return n=s.call.apply(s,[this].concat(p)),h()(i()(n),"onUploadChange",(function(n){console.log(n)})),h()(i()(n),"onUpload",(function(n,a){return new Promise((function(n,s){var t=0;setTimeout((function p(){t<100?(a(t+=10),setTimeout(p,500)):Math.random()>.5?n():s()}),500)}))})),h()(i()(n),"onUploadError",(function(n,a){"overMaxAmount"===n?U.Notify.error("最多可上传 ".concat(a.maxAmount," 个文件")):"overMaxSize"===n&&U.Notify.error("文件大小不能超过 ".concat(a.formattedMaxSize))})),n}return u()(t,[{key:"render",value:function(){return v.a.createElement(U.Upload,{multiple:!0,className:"zent-upload-demo-pic",maxSize:2097152,maxAmount:3,tips:"单个文件不超过 2M",onChange:this.onUploadChange,onUpload:this.onUpload,onError:this.onUploadError,customUploadItem:a})}}]),t}(v.a.Component);return v.a.createElement(s,null)};function T(n){return v.a.createElement(n.tag,p()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function _(n){return v.a.createElement(T,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function O(n){return v.a.createElement(T,{tag:"style",html:n.style})}var P=function(n){r()(s,n);var a=x(s);function s(){var n;e()(this,s);for(var t=arguments.length,p=new Array(t),o=0;o<t;o++)p[o]=arguments[o];return n=a.call.apply(a,[this].concat(p)),h()(i()(n),"state",{showCode:!1}),h()(i()(n),"toggle",(function(){n.setState({showCode:!n.state.showCode})})),n}return u()(s,[{key:"render",value:function(){var n=this.state.showCode,a=this.props,s=a.title,t=a.src,p=a.children;return v.a.createElement("div",{className:"zandoc-react-demo"},v.a.createElement("div",{className:"zandoc-react-demo__preview"},p),v.a.createElement("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle},v.a.createElement("div",{className:"zandoc-react-demo__title"},v.a.createElement("p",null,s||"")),v.a.createElement("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle ".concat(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})),n&&v.a.createElement("pre",{className:"zandoc-react-demo__code"},v.a.createElement(T,{tag:"code",html:t,attributes:{className:"language-jsx"}})))}}]),s}(w.Component),D=function(n){r()(s,n);var a=x(s);function s(){return e()(this,s),a.apply(this,arguments)}return u()(s,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var a=document.querySelector('a[href="'.concat(n,'"]'));a&&Object(b.a)(document.documentElement,0,function n(a,s){for(;a;)return a.offsetTop&&"static"!==getComputedStyle(a).position&&(s+=a.offsetTop),n(a.parentNode,s);return s}(a,-9))}}},{key:"render",value:function(){return v.a.createElement("div",{className:"zandoc-react-container",key:null},v.a.createElement(O,{style:".zent-image-upload-skip-demo-btn {\n\t\tmargin-top: 16px;\n\t}"}),v.a.createElement(_,{html:'<h1 class="anchor-heading"><a href="#upload-wen-jian-shang-chuan">¶</a><a href="javascript:void(0)" id="upload-wen-jian-shang-chuan" class="anchor-point"></a>Upload 文件上传</h1>\n<p>文件上传组件。</p>\n<h3 class="anchor-heading"><a href="#dai-ma-yan-shi">¶</a><a href="javascript:void(0)" id="dai-ma-yan-shi" class="anchor-point"></a>代码演示</h3>'}),v.a.createElement(P,{title:"基础用法",id:"Demobasic",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Upload</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Notify</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  <span class="token function-variable function">onUploadChange</span> <span class="token operator">=</span> <span class="token parameter">files</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>files<span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onUpload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">file<span class="token punctuation">,</span> report</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">let</span> count <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>\n      <span class="token keyword">const</span> <span class="token function-variable function">update</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n        <span class="token keyword">if</span> <span class="token punctuation">(</span>count <span class="token operator">&lt;</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n          count <span class="token operator">+=</span> <span class="token number">10</span><span class="token punctuation">;</span>\n          <span class="token function">report</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token function">setTimeout</span><span class="token punctuation">(</span>update<span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n          <span class="token comment">// 随机成功或失败</span>\n          <span class="token keyword">const</span> success <span class="token operator">=</span> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token number">0.5</span><span class="token punctuation">;</span>\n          <span class="token keyword">if</span> <span class="token punctuation">(</span>success<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n            <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n            <span class="token function">reject</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span>\n        <span class="token punctuation">}</span>\n      <span class="token punctuation">}</span><span class="token punctuation">;</span>\n      <span class="token function">setTimeout</span><span class="token punctuation">(</span>update<span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onUploadError</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">type<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">\'overMaxAmount\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">最多可上传 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span><span class="token property-access">maxAmount</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 个文件</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">\'overMaxSize\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">文件大小不能超过 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span><span class="token property-access">formattedMaxSize</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Upload</span></span>\n        <span class="token attr-name">multiple</span>\n        <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-upload-demo-pic<span class="token punctuation">"</span></span>\n        <span class="token attr-name">maxSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span> <span class="token operator">*</span> <span class="token number">1024</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">maxAmount</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">tips</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>单个文件不超过 2M<span class="token punctuation">"</span></span>\n        <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUploadChange</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">onUpload</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUpload</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">onError</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUploadError</span><span class="token punctuation">}</span></span>\n      <span class="token punctuation">/></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},v.a.createElement(M)),v.a.createElement(P,{title:"受控模式",id:"Democontrolled",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Upload</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Notify</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  state <span class="token operator">=</span> <span class="token punctuation">{</span>\n    fileList<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onUploadChange</span> <span class="token operator">=</span> <span class="token parameter">files</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      fileList<span class="token operator">:</span> files<span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onUpload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">file<span class="token punctuation">,</span> report</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">let</span> count <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>\n      <span class="token keyword">const</span> <span class="token function-variable function">update</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n        <span class="token keyword">if</span> <span class="token punctuation">(</span>count <span class="token operator">&lt;</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n          count <span class="token operator">+=</span> <span class="token number">10</span><span class="token punctuation">;</span>\n          <span class="token function">report</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token function">setTimeout</span><span class="token punctuation">(</span>update<span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n          <span class="token comment">// 随机成功或失败</span>\n          <span class="token keyword">const</span> success <span class="token operator">=</span> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token number">0.5</span><span class="token punctuation">;</span>\n          <span class="token keyword">if</span> <span class="token punctuation">(</span>success<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n            <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n            <span class="token function">reject</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span>\n        <span class="token punctuation">}</span>\n      <span class="token punctuation">}</span><span class="token punctuation">;</span>\n      <span class="token function">setTimeout</span><span class="token punctuation">(</span>update<span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onUploadError</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">type<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">\'overMaxAmount\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">最多可上传 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span><span class="token property-access">maxAmount</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 个文件</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">\'overMaxSize\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">文件大小不能超过 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span><span class="token property-access">formattedMaxSize</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">const</span> <span class="token punctuation">{</span> fileList <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">;</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Upload</span></span>\n        <span class="token attr-name">multiple</span>\n        <span class="token attr-name">fileList</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>fileList<span class="token punctuation">}</span></span>\n        <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-upload-demo-pic<span class="token punctuation">"</span></span>\n        <span class="token attr-name">maxSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span> <span class="token operator">*</span> <span class="token number">1024</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">maxAmount</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">tips</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>单个文件不超过 2M<span class="token punctuation">"</span></span>\n        <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUploadChange</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">onUpload</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUpload</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">onError</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUploadError</span><span class="token punctuation">}</span></span>\n      <span class="token punctuation">/></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},v.a.createElement(z)),v.a.createElement(P,{title:"默认文件列表",id:"Demodefaultfilelist",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Upload</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Notify</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> defaultFileList <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    name<span class="token operator">:</span> <span class="token string">\'1.md\'</span><span class="token punctuation">,</span>\n    type<span class="token operator">:</span> <span class="token string">\'text/plain\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    name<span class="token operator">:</span> <span class="token string">\'2.mp4\'</span><span class="token punctuation">,</span>\n    type<span class="token operator">:</span> <span class="token string">\'video/mpeg4\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  <span class="token function-variable function">onUploadChange</span> <span class="token operator">=</span> <span class="token parameter">files</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>files<span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onUpload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">file<span class="token punctuation">,</span> report</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">let</span> count <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>\n      <span class="token keyword">const</span> <span class="token function-variable function">update</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n        <span class="token keyword">if</span> <span class="token punctuation">(</span>count <span class="token operator">&lt;</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n          count <span class="token operator">+=</span> <span class="token number">10</span><span class="token punctuation">;</span>\n          <span class="token function">report</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token function">setTimeout</span><span class="token punctuation">(</span>update<span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n          <span class="token comment">// 随机成功或失败</span>\n          <span class="token keyword">const</span> success <span class="token operator">=</span> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token number">0.5</span><span class="token punctuation">;</span>\n          <span class="token keyword">if</span> <span class="token punctuation">(</span>success<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n            <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n            <span class="token function">reject</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span>\n        <span class="token punctuation">}</span>\n      <span class="token punctuation">}</span><span class="token punctuation">;</span>\n      <span class="token function">setTimeout</span><span class="token punctuation">(</span>update<span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onUploadError</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">type<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">\'overMaxAmount\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">最多可上传 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span><span class="token property-access">maxAmount</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 个文件</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">\'overMaxSize\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">文件大小不能超过 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span><span class="token property-access">formattedMaxSize</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Upload</span></span>\n        <span class="token attr-name">multiple</span>\n        <span class="token attr-name">defaultFileList</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>defaultFileList<span class="token punctuation">}</span></span>\n        <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-upload-demo-pic<span class="token punctuation">"</span></span>\n        <span class="token attr-name">maxSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span> <span class="token operator">*</span> <span class="token number">1024</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">maxAmount</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">tips</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>单个文件不超过 2M<span class="token punctuation">"</span></span>\n        <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUploadChange</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">onUpload</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUpload</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">onError</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUploadError</span><span class="token punctuation">}</span></span>\n      <span class="token punctuation">/></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},v.a.createElement(A)),v.a.createElement(P,{title:"文件列表分页",id:"Demopagination",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Upload</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Notify</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  state <span class="token operator">=</span> <span class="token punctuation">{</span>\n    fileList<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onUploadChange</span> <span class="token operator">=</span> <span class="token parameter">files</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      fileList<span class="token operator">:</span> files<span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onUpload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">file<span class="token punctuation">,</span> report</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">let</span> count <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>\n      <span class="token keyword">const</span> <span class="token function-variable function">update</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n        <span class="token keyword">if</span> <span class="token punctuation">(</span>count <span class="token operator">&lt;</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n          count <span class="token operator">+=</span> <span class="token number">10</span><span class="token punctuation">;</span>\n          <span class="token function">report</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token function">setTimeout</span><span class="token punctuation">(</span>update<span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n          <span class="token comment">// 随机成功或失败</span>\n          <span class="token keyword">const</span> success <span class="token operator">=</span> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token number">0.5</span><span class="token punctuation">;</span>\n          <span class="token keyword">if</span> <span class="token punctuation">(</span>success<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n            <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n            <span class="token function">reject</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span>\n        <span class="token punctuation">}</span>\n      <span class="token punctuation">}</span><span class="token punctuation">;</span>\n      <span class="token function">setTimeout</span><span class="token punctuation">(</span>update<span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onUploadError</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">type<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">\'overMaxAmount\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">最多可上传 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span><span class="token property-access">maxAmount</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 个文件</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">\'overMaxSize\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">文件大小不能超过 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span><span class="token property-access">formattedMaxSize</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">const</span> <span class="token punctuation">{</span> fileList <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">;</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Upload</span></span>\n        <span class="token attr-name">multiple</span>\n        <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-upload-demo-pic<span class="token punctuation">"</span></span>\n        <span class="token attr-name">maxSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">10</span> <span class="token operator">*</span> <span class="token number">1024</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">tips</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>单个文件不超过 10M<span class="token punctuation">"</span></span>\n        <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUploadChange</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">onUpload</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUpload</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">onError</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUploadError</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">pagination</span>\n      <span class="token punctuation">/></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},v.a.createElement(C)),v.a.createElement(P,{title:"可拖拽排序",id:"Demosortable",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Upload</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Notify</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  state <span class="token operator">=</span> <span class="token punctuation">{</span>\n    fileList<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onUploadChange</span> <span class="token operator">=</span> <span class="token parameter">files</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      fileList<span class="token operator">:</span> files<span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onUpload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">file<span class="token punctuation">,</span> report</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">let</span> count <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>\n      <span class="token keyword">const</span> <span class="token function-variable function">update</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n        <span class="token keyword">if</span> <span class="token punctuation">(</span>count <span class="token operator">&lt;</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n          count <span class="token operator">+=</span> <span class="token number">10</span><span class="token punctuation">;</span>\n          <span class="token function">report</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token function">setTimeout</span><span class="token punctuation">(</span>update<span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n          <span class="token comment">// 随机成功或失败</span>\n          <span class="token keyword">const</span> success <span class="token operator">=</span> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token number">0.5</span><span class="token punctuation">;</span>\n          <span class="token keyword">if</span> <span class="token punctuation">(</span>success<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n            <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n            <span class="token function">reject</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span>\n        <span class="token punctuation">}</span>\n      <span class="token punctuation">}</span><span class="token punctuation">;</span>\n      <span class="token function">setTimeout</span><span class="token punctuation">(</span>update<span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onUploadError</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">type<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">\'overMaxAmount\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">最多可上传 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span><span class="token property-access">maxAmount</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 个文件</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">\'overMaxSize\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">文件大小不能超过 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span><span class="token property-access">formattedMaxSize</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">const</span> <span class="token punctuation">{</span> fileList <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">;</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Upload</span></span>\n        <span class="token attr-name">multiple</span>\n        <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-upload-demo-pic<span class="token punctuation">"</span></span>\n        <span class="token attr-name">maxSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">10</span> <span class="token operator">*</span> <span class="token number">1024</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">tips</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>单个文件不超过 10M<span class="token punctuation">"</span></span>\n        <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUploadChange</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">onUpload</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUpload</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">onError</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUploadError</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">sortable</span>\n      <span class="token punctuation">/></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},v.a.createElement(L)),v.a.createElement(P,{title:"图片上传",id:"Demoimage",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">ImageUpload</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Notify</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  <span class="token function-variable function">onUploadChange</span> <span class="token operator">=</span> <span class="token parameter">files</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>files<span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onUpload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">file<span class="token punctuation">,</span> report</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">let</span> count <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>\n      <span class="token keyword">const</span> <span class="token function-variable function">update</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n        <span class="token keyword">if</span> <span class="token punctuation">(</span>count <span class="token operator">&lt;</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n          count <span class="token operator">+=</span> <span class="token number">10</span><span class="token punctuation">;</span>\n          <span class="token function">report</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token function">setTimeout</span><span class="token punctuation">(</span>update<span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n          <span class="token comment">// 随机成功或失败</span>\n          <span class="token keyword">const</span> success <span class="token operator">=</span> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token number">0.5</span><span class="token punctuation">;</span>\n          <span class="token keyword">if</span> <span class="token punctuation">(</span>success<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n            <span class="token comment">// 可以在上传成功时替换图片 src 地址</span>\n            <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token number">0.3</span>\n              <span class="token operator">?</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\n              <span class="token operator">:</span> <span class="token function">resolve</span><span class="token punctuation">(</span>\n                  <span class="token string">\'https://img.yzcdn.cn/public_files/2017/02/09/e84aa8cbbf7852688c86218c1f3bbf17.png\'</span>\n                <span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n            <span class="token function">reject</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span>\n        <span class="token punctuation">}</span>\n      <span class="token punctuation">}</span><span class="token punctuation">;</span>\n      <span class="token function">setTimeout</span><span class="token punctuation">(</span>update<span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onUploadError</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">type<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">\'overMaxAmount\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">最多可上传 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span><span class="token property-access">maxAmount</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 张图片</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">\'overMaxSize\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">图片大小不能超过 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span><span class="token property-access">formattedMaxSize</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">ImageUpload</span></span>\n        <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-image-upload-demo<span class="token punctuation">"</span></span>\n        <span class="token attr-name">maxSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">5</span> <span class="token operator">*</span> <span class="token number">1024</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">tips</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>建议尺寸 640*640，最多 9 张，单张图片不超过 5M<span class="token punctuation">"</span></span>\n        <span class="token attr-name">maxAmount</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">9</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">multiple</span>\n        <span class="token attr-name">sortable</span>\n        <span class="token attr-name">tips</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>建议尺寸 640*640，最多 9 张，单张图片不超过 5M<span class="token punctuation">"</span></span>\n        <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUploadChange</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">onUpload</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUpload</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">onError</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUploadError</span><span class="token punctuation">}</span></span>\n      <span class="token punctuation">/></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},v.a.createElement(j)),v.a.createElement(P,{title:"手动上传",id:"Demomanual",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">ImageUpload</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Notify</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token comment">// ImageUpload 和 Upload 上都有 FILE_UPLOAD_STATUS 这个静态属性</span>\n<span class="token keyword">const</span> <span class="token constant">FILE_UPLOAD_STATUS</span> <span class="token operator">=</span> <span class="token maybe-class-name">ImageUpload</span><span class="token punctuation">.</span><span class="token constant">FILE_UPLOAD_STATUS</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  state <span class="token operator">=</span> <span class="token punctuation">{</span>\n    fileList<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onUploadChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">files<span class="token punctuation">,</span> detail</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      fileList<span class="token operator">:</span> files<span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n    <span class="token keyword">if</span> <span class="token punctuation">(</span>detail <span class="token operator">&amp;&amp;</span> detail<span class="token punctuation">.</span><span class="token property-access">type</span> <span class="token operator">===</span> <span class="token string">\'retry\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">uploadItem</span><span class="token punctuation">(</span>detail<span class="token punctuation">.</span><span class="token property-access">item</span><span class="token punctuation">.</span><span class="token property-access">_id</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">uploadItem</span> <span class="token operator">=</span> <span class="token parameter">id</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">const</span> <span class="token function-variable function">update</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">const</span> item <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">fileList</span><span class="token punctuation">.</span><span class="token method function property-access">find</span><span class="token punctuation">(</span><span class="token parameter">o</span> <span class="token arrow operator">=></span> o<span class="token punctuation">.</span><span class="token property-access">_id</span> <span class="token operator">===</span> id<span class="token punctuation">)</span><span class="token punctuation">;</span>\n      <span class="token keyword">let</span> percent <span class="token operator">=</span> item<span class="token punctuation">.</span><span class="token property-access">percent</span><span class="token punctuation">;</span>\n      <span class="token keyword">let</span> status <span class="token operator">=</span> item<span class="token punctuation">.</span><span class="token property-access">status</span><span class="token punctuation">;</span>\n      <span class="token keyword">if</span> <span class="token punctuation">(</span>percent <span class="token operator">&lt;</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n        status <span class="token operator">=</span> <span class="token constant">FILE_UPLOAD_STATUS</span><span class="token punctuation">.</span><span class="token property-access">uploading</span><span class="token punctuation">;</span>\n        percent <span class="token operator">+=</span> <span class="token number">10</span><span class="token punctuation">;</span>\n      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>status <span class="token operator">===</span> <span class="token constant">FILE_UPLOAD_STATUS</span><span class="token punctuation">.</span><span class="token property-access">uploading</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n        <span class="token comment">// 随机成功或失败</span>\n        status <span class="token operator">=</span>\n          <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token number">0.5</span>\n            <span class="token operator">?</span> <span class="token constant">FILE_UPLOAD_STATUS</span><span class="token punctuation">.</span><span class="token property-access">success</span>\n            <span class="token operator">:</span> <span class="token constant">FILE_UPLOAD_STATUS</span><span class="token punctuation">.</span><span class="token property-access">failed</span><span class="token punctuation">;</span>\n      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>status <span class="token operator">===</span> <span class="token constant">FILE_UPLOAD_STATUS</span><span class="token punctuation">.</span><span class="token property-access">failed</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n        <span class="token comment">// 失败重传</span>\n        status <span class="token operator">=</span> <span class="token constant">FILE_UPLOAD_STATUS</span><span class="token punctuation">.</span><span class="token property-access">uploading</span><span class="token punctuation">;</span>\n        percent <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>\n      <span class="token punctuation">}</span>\n\n      <span class="token keyword">const</span> newItem <span class="token operator">=</span> <span class="token punctuation">{</span>\n        <span class="token spread operator">...</span>item<span class="token punctuation">,</span>\n        percent<span class="token punctuation">,</span>\n        status<span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span>\n        <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n          <span class="token keyword">const</span> newList <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">fileList</span><span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token parameter">itemInner</span> <span class="token arrow operator">=></span>\n            itemInner<span class="token punctuation">.</span><span class="token property-access">_id</span> <span class="token operator">===</span> item<span class="token punctuation">.</span><span class="token property-access">_id</span> <span class="token operator">?</span> newItem <span class="token operator">:</span> itemInner\n          <span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token keyword">return</span> <span class="token punctuation">{</span>\n            fileList<span class="token operator">:</span> newList<span class="token punctuation">,</span>\n          <span class="token punctuation">}</span><span class="token punctuation">;</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n          <span class="token keyword">if</span> <span class="token punctuation">(</span>\n            <span class="token punctuation">[</span><span class="token constant">FILE_UPLOAD_STATUS</span><span class="token punctuation">.</span><span class="token property-access">success</span><span class="token punctuation">,</span> <span class="token constant">FILE_UPLOAD_STATUS</span><span class="token punctuation">.</span><span class="token property-access">failed</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token method function property-access">indexOf</span><span class="token punctuation">(</span>\n              status\n            <span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">1</span>\n          <span class="token punctuation">)</span> <span class="token punctuation">{</span>\n            <span class="token function">setTimeout</span><span class="token punctuation">(</span>update<span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span>\n        <span class="token punctuation">}</span>\n      <span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n    <span class="token function">update</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">startUpload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">fileList</span><span class="token punctuation">.</span><span class="token method function property-access">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span><span class="token property-access">status</span> <span class="token operator">===</span> <span class="token constant">FILE_UPLOAD_STATUS</span><span class="token punctuation">.</span><span class="token property-access">beforeUpload</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">uploadItem</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span><span class="token property-access">_id</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n      <span class="token punctuation">}</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onUploadError</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">type<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">\'overMaxAmount\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">最多可上传 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span><span class="token property-access">maxAmount</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 张图片</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">\'overMaxSize\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">图片大小不能超过 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span><span class="token property-access">formattedMaxSize</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">const</span> <span class="token punctuation">{</span> fileList <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">;</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">ImageUpload</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-image-upload-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">maxSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">5</span> <span class="token operator">*</span> <span class="token number">1024</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">fileList</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>fileList<span class="token punctuation">}</span></span>\n          <span class="token attr-name">maxAmount</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">9</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">multiple</span>\n          <span class="token attr-name">sortable</span>\n          <span class="token attr-name">manualUpload</span>\n          <span class="token attr-name">tips</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>建议尺寸 640*640，最多 9 张，单张图片不超过 5M<span class="token punctuation">"</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUploadChange</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onError</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUploadError</span><span class="token punctuation">}</span></span>\n        <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-image-upload-skip-demo-btn<span class="token punctuation">"</span></span>\n          <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">startUpload</span><span class="token punctuation">}</span></span>\n        <span class="token punctuation">></span></span>\n          开始上传\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},v.a.createElement(N)),v.a.createElement(P,{title:"自定义展示项",id:"Democustomitem",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Upload</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Notify</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token constant">FILE_UPLOAD_STATUS</span> <span class="token operator">=</span> <span class="token maybe-class-name">Upload</span><span class="token punctuation">.</span><span class="token constant">FILE_UPLOAD_STATUS</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">CustomItem</span></span> <span class="token operator">=</span> <span class="token parameter">props</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> <span class="token punctuation">{</span> item<span class="token punctuation">,</span> i18n<span class="token punctuation">,</span> onRetry<span class="token punctuation">,</span> onDelete <span class="token punctuation">}</span> <span class="token operator">=</span> props<span class="token punctuation">;</span>\n  <span class="token keyword">return</span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>进度：<span class="token punctuation">{</span>item<span class="token punctuation">.</span><span class="token property-access">percent</span><span class="token punctuation">}</span><span class="token operator">%</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>\n        <span class="token punctuation">{</span>item<span class="token punctuation">.</span><span class="token property-access">status</span> <span class="token operator">===</span> <span class="token constant">FILE_UPLOAD_STATUS</span><span class="token punctuation">.</span><span class="token property-access">failed</span> <span class="token operator">&amp;&amp;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">onRetry</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>重试<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token punctuation">}</span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">onDelete</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>删除<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  <span class="token function-variable function">onUploadChange</span> <span class="token operator">=</span> <span class="token parameter">files</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>files<span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onUpload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">file<span class="token punctuation">,</span> report</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">let</span> count <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>\n      <span class="token keyword">const</span> <span class="token function-variable function">update</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n        <span class="token keyword">if</span> <span class="token punctuation">(</span>count <span class="token operator">&lt;</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n          count <span class="token operator">+=</span> <span class="token number">10</span><span class="token punctuation">;</span>\n          <span class="token function">report</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token function">setTimeout</span><span class="token punctuation">(</span>update<span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n          <span class="token comment">// 随机成功或失败</span>\n          <span class="token keyword">const</span> success <span class="token operator">=</span> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token number">0.5</span><span class="token punctuation">;</span>\n          <span class="token keyword">if</span> <span class="token punctuation">(</span>success<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n            <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n            <span class="token function">reject</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span>\n        <span class="token punctuation">}</span>\n      <span class="token punctuation">}</span><span class="token punctuation">;</span>\n      <span class="token function">setTimeout</span><span class="token punctuation">(</span>update<span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onUploadError</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">type<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">\'overMaxAmount\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">最多可上传 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span><span class="token property-access">maxAmount</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 个文件</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">\'overMaxSize\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">文件大小不能超过 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span><span class="token property-access">formattedMaxSize</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Upload</span></span>\n        <span class="token attr-name">multiple</span>\n        <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-upload-demo-pic<span class="token punctuation">"</span></span>\n        <span class="token attr-name">maxSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span> <span class="token operator">*</span> <span class="token number">1024</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">maxAmount</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">tips</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>单个文件不超过 2M<span class="token punctuation">"</span></span>\n        <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUploadChange</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">onUpload</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUpload</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">onError</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUploadError</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">customUploadItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token maybe-class-name">CustomItem</span><span class="token punctuation">}</span></span>\n      <span class="token punctuation">/></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},v.a.createElement(I)),v.a.createElement(_,{html:'<h3 class="anchor-heading"><a href="#api">¶</a><a href="javascript:void(0)" id="api" class="anchor-point"></a>API</h3>\n<h4 class="anchor-heading"><a href="#upload-gong-gong-can-shu">¶</a><a href="javascript:void(0)" id="upload-gong-gong-can-shu" class="anchor-point"></a>Upload 公共参数</h4>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>是否必填</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>className</td>\n<td>自定义类名</td>\n<td>string</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>fileList</td>\n<td>受控模式下使用的上传文件列表</td>\n<td>Array&#x3C;\n<code>IUploadFileItem</code>\n \n|\n \n<code>IImageUploadFileItem</code>\n></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>defaultFileList</td>\n<td>非受控模式下使用的默认文件列表</td>\n<td>Array&#x3C;\n<code>IUploadFileItem</code>\n \n|\n \n<code>IImageUploadFileItem</code>\n></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>上传内容发生变化时的回调函数，任何修改文件列表及其内容的行为都会触发该函数</td>\n<td><code>IUploadOnChangeHandler</code></td>\n<td></td>\n<td>是</td>\n</tr>\n<tr>\n<td>beforeUpload</td>\n<td>文件上传前的预处理函数，若返回 false 或 reject 的 Promie，则不上传该文件</td>\n<td><code>(file: File) => boolean | Promise&#x3C;void></code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>manualUpload</td>\n<td>是否手动进行上传操作，若设置为 true，所有进度更新、上传成功失败、重试等数据更新都需要手动进行维护</td>\n<td>boolean</td>\n<td>false</td>\n<td>否</td>\n</tr>\n<tr>\n<td>onUpload</td>\n<td>文件上传处理</td>\n<td><code>IUploadOnUploadHandler</code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>onError</td>\n<td>发生内部错误时的统一回调函数，错误类型见 \n<code>IUploadErrorMessageConfigMap</code></td>\n<td><code>IUploadOnErrorHandler</code></td>\n<td>否</td>\n<td></td>\n</tr>\n<tr>\n<td>multiple</td>\n<td>是否支持文件多选</td>\n<td>boolean</td>\n<td>false</td>\n<td>否</td>\n</tr>\n<tr>\n<td>maxSize</td>\n<td>图片大小限制，单位为 byte，\n<code>Infinity</code>\n 为不限制</td>\n<td>number</td>\n<td><code>Infinity</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>maxAmount</td>\n<td>图片数量限制，\n<code>Infinity</code>\n 为不限制</td>\n<td>number</td>\n<td><code>Infinity</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>accept</td>\n<td>可选文件类型，与 \n<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept">input accept</a>\n 一致</td>\n<td>string</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>是否禁用上传</td>\n<td>boolean</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>sortable</td>\n<td>是否可拖拽排序</td>\n<td>boolean</td>\n<td>false</td>\n<td>否</td>\n</tr>\n<tr>\n<td>tips</td>\n<td>提示文案</td>\n<td>string \n|\n \n<code>IUploadTipsFunc</code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>customUploadItem</td>\n<td>自定义上传项展示组件</td>\n<td><code>React.ComponentType&#x3C;IUploadFileItem|IImageUploadFileItem></code></td>\n<td></td>\n<td>否</td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#upload">¶</a><a href="javascript:void(0)" id="upload" class="anchor-point"></a>Upload</h4>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>是否必填</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>pagination</td>\n<td>是否对文件列表进行分页</td>\n<td>boolean</td>\n<td>false</td>\n<td>否</td>\n</tr>\n<tr>\n<td>pageSize</td>\n<td>分页时的每页展示数量</td>\n<td>number</td>\n<td>5</td>\n<td>否</td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#imageupload">¶</a><a href="javascript:void(0)" id="imageupload" class="anchor-point"></a>ImageUpload</h4>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>是否必填</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>preview</td>\n<td>自定义点击图片时的展示逻辑</td>\n<td><code>IImageUploadPreviewHandler</code></td>\n<td>PreviewImages（不展示上传失败的图片）</td>\n<td>否</td>\n</tr>\n<tr>\n<td>getThumbSrcFromFile</td>\n<td>自定义选择图片时将其转化为展示用的缩略图 src 的函数</td>\n<td><code>(file: File) => string | Promise&#x3C;string></code></td>\n<td>FileReader 实现</td>\n<td>否</td>\n</tr>\n</tbody>\n</table>'}))}}]),s}(w.Component)}}]);