6 lines
117 KiB
JavaScript
6 lines
117 KiB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{1195:function(module,exports,__webpack_require__){var __WEBPACK_AMD_DEFINE_FACTORY__,__WEBPACK_AMD_DEFINE_RESULT__,definition;
|
||
/*!
|
||
* Reqwest! A general purpose XHR connection manager
|
||
* license MIT (c) Dustin Diaz 2015
|
||
* https://github.com/ded/reqwest
|
||
*/definition=function(){var context=this,XHR2;if("window"in context)var doc=document,byTag="getElementsByTagName",head=doc[byTag]("head")[0];else try{XHR2=__webpack_require__(1196)}catch(s){throw new Error("Peer dependency `xhr2` required! Please npm install xhr2")}var httpsRe=/^http/,protocolRe=/(^\w+):\/\//,twoHundo=/^(20\d|1223)$/,readyState="readyState",contentType="Content-Type",requestedWith="X-Requested-With",uniqid=0,callbackPrefix="reqwest_"+ +new Date,lastValue,xmlHttpRequest="XMLHttpRequest",xDomainRequest="XDomainRequest",noop=function(){},isArray="function"==typeof Array.isArray?Array.isArray:function(s){return s instanceof Array},defaultHeaders={contentType:"application/x-www-form-urlencoded",requestedWith:xmlHttpRequest,accept:{"*":"text/javascript, text/html, application/xml, text/xml, */*",xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript",js:"application/javascript, text/javascript"}},xhr=function(s){if(!0===s.crossOrigin){var t=context[xmlHttpRequest]?new XMLHttpRequest:null;if(t&&"withCredentials"in t)return t;if(context[xDomainRequest])return new XDomainRequest;throw new Error("Browser does not support cross-origin requests")}return context[xmlHttpRequest]?new XMLHttpRequest:XHR2?new XHR2:new ActiveXObject("Microsoft.XMLHTTP")},globalSetupOptions={dataFilter:function(s){return s}};function succeed(s){var t=protocolRe.exec(s.url);return t=t&&t[1]||context.location.protocol,httpsRe.test(t)?twoHundo.test(s.request.status):!!s.request.response}function handleReadyState(s,t,a){return function(){return s._aborted?a(s.request):s._timedOut?a(s.request,"Request is aborted: timeout"):void(s.request&&4==s.request[readyState]&&(s.request.onreadystatechange=noop,succeed(s)?t(s.request):a(s.request)))}}function setHeaders(s,t){var a,n=t.headers||{};n.Accept=n.Accept||defaultHeaders.accept[t.type]||defaultHeaders.accept["*"];var e="undefined"!=typeof FormData&&t.data instanceof FormData;for(a in t.crossOrigin||n[requestedWith]||(n[requestedWith]=defaultHeaders.requestedWith),n[contentType]||e||(n[contentType]=t.contentType||defaultHeaders.contentType),n)n.hasOwnProperty(a)&&"setRequestHeader"in s&&s.setRequestHeader(a,n[a])}function setCredentials(s,t){void 0!==t.withCredentials&&void 0!==s.withCredentials&&(s.withCredentials=!!t.withCredentials)}function generalCallback(s){lastValue=s}function urlappend(s,t){return s+(/\?/.test(s)?"&":"?")+t}function handleJsonp(s,t,a,n){var e=uniqid++,l=s.jsonpCallback||"callback",i=s.jsonpCallbackName||reqwest.getcallbackPrefix(e),r=new RegExp("((^|\\?|&)"+l+")=([^&]+)"),o=n.match(r),v=doc.createElement("script"),p=0,c=-1!==navigator.userAgent.indexOf("MSIE 10.0");return o?"?"===o[3]?n=n.replace(r,"$1="+i):i=o[3]:n=urlappend(n,l+"="+i),context[i]=generalCallback,v.type="text/javascript",v.src=n,v.async=!0,void 0===v.onreadystatechange||c||(v.htmlFor=v.id="_reqwest_"+e),v.onload=v.onreadystatechange=function(){if(v[readyState]&&"complete"!==v[readyState]&&"loaded"!==v[readyState]||p)return!1;v.onload=v.onreadystatechange=null,v.onclick&&v.onclick(),t(lastValue),lastValue=void 0,head.removeChild(v),p=1},head.appendChild(v),{abort:function(){v.onload=v.onreadystatechange=null,a({},"Request is aborted: timeout",{}),lastValue=void 0,head.removeChild(v),p=1}}}function getRequest(s,t){var a,n=this.o,e=(n.method||"GET").toUpperCase(),l="string"==typeof n?n:n.url,i=!1!==n.processData&&n.data&&"string"!=typeof n.data?reqwest.toQueryString(n.data):n.data||null,r=!1;return"jsonp"!=n.type&&"GET"!=e||!i||(l=urlappend(l,i),i=null),"jsonp"==n.type?handleJsonp(n,s,t,l):((a=n.xhr&&n.xhr(n)||xhr(n)).open(e,l,!1!==n.async),setHeaders(a,n),setCredentials(a,n),context[xDomainRequest]&&a instanceof context[xDomainRequest]?(a.onload=s,a.onerror=t,a.onprogress=function(){},r=!0):a.onreadystatechange=handleReadyState(this,s,t),n.before&&n.before(a),r?setTimeout((function(){a.send(i)}),200):a.send(i),a)}function Reqwest(s,t){this.o=s,this.fn=t,init.apply(this,arguments)}function setType(s){if(null!==s)return s.match("json")?"json":s.match("javascript")?"js":s.match("text")?"html":s.match("xml")?"xml":void 0}function init(o,fn){this.url="string"==typeof o?o:o.url,this.timeout=null,this._fulfilled=!1,this._successHandler=function(){},this._fulfillmentHandlers=[],this._errorHandlers=[],this._completeHandlers=[],this._erred=!1,this._responseArgs={};var self=this;function complete(s){for(o.timeout&&clearTimeout(self.timeout),self.timeout=null;self._completeHandlers.length>0;)self._completeHandlers.shift()(s)}function success(resp){var type=o.type||resp&&setType(resp.getResponseHeader("Content-Type"));resp="jsonp"!==type?self.request:resp;var filteredResponse=globalSetupOptions.dataFilter(resp.responseText,type),r=filteredResponse;try{resp.responseText=r}catch(s){}if(r)switch(type){case"json":try{resp=context.JSON?context.JSON.parse(r):eval("("+r+")")}catch(s){return error(resp,"Could not parse JSON in response",s)}break;case"js":resp=eval(r);break;case"html":resp=r;break;case"xml":resp=resp.responseXML&&resp.responseXML.parseError&&resp.responseXML.parseError.errorCode&&resp.responseXML.parseError.reason?null:resp.responseXML}for(self._responseArgs.resp=resp,self._fulfilled=!0,fn(resp),self._successHandler(resp);self._fulfillmentHandlers.length>0;)resp=self._fulfillmentHandlers.shift()(resp);complete(resp)}function timedOut(){self._timedOut=!0,self.request.abort()}function error(s,t,a){for(s=self.request,self._responseArgs.resp=s,self._responseArgs.msg=t,self._responseArgs.t=a,self._erred=!0;self._errorHandlers.length>0;)self._errorHandlers.shift()(s,t,a);complete(s)}fn=fn||function(){},o.timeout&&(this.timeout=setTimeout((function(){timedOut()}),o.timeout)),o.success&&(this._successHandler=function(){o.success.apply(o,arguments)}),o.error&&this._errorHandlers.push((function(){o.error.apply(o,arguments)})),o.complete&&this._completeHandlers.push((function(){o.complete.apply(o,arguments)})),this.request=getRequest.call(this,success,error)}function reqwest(s,t){return new Reqwest(s,t)}function normalize(s){return s?s.replace(/\r?\n/g,"\r\n"):""}function serial(s,t){var a,n,e,l,i=s.name,r=s.tagName.toLowerCase(),o=function(s){s&&!s.disabled&&t(i,normalize(s.attributes.value&&s.attributes.value.specified?s.value:s.text))};if(!s.disabled&&i)switch(r){case"input":/reset|button|image|file/i.test(s.type)||(a=/checkbox/i.test(s.type),n=/radio/i.test(s.type),e=s.value,(!a&&!n||s.checked)&&t(i,normalize(a&&""===e?"on":e)));break;case"textarea":t(i,normalize(s.value));break;case"select":if("select-one"===s.type.toLowerCase())o(s.selectedIndex>=0?s.options[s.selectedIndex]:null);else for(l=0;s.length&&l<s.length;l++)s.options[l].selected&&o(s.options[l])}}function eachFormElement(){var s,t,a=this,n=function(s,t){var n,e,l;for(n=0;n<t.length;n++)for(l=s[byTag](t[n]),e=0;e<l.length;e++)serial(l[e],a)};for(t=0;t<arguments.length;t++)s=arguments[t],/input|select|textarea/i.test(s.tagName)&&serial(s,a),n(s,["input","select","textarea"])}function serializeQueryString(){return reqwest.toQueryString(reqwest.serializeArray.apply(null,arguments))}function serializeHash(){var s={};return eachFormElement.apply((function(t,a){t in s?(s[t]&&!isArray(s[t])&&(s[t]=[s[t]]),s[t].push(a)):s[t]=a}),arguments),s}function buildParams(s,t,a,n){var e,l,i,r=/\[\]$/;if(isArray(t))for(l=0;t&&l<t.length;l++)i=t[l],a||r.test(s)?n(s,i):buildParams(s+"["+("object"==typeof i?l:"")+"]",i,a,n);else if(t&&"[object Object]"===t.toString())for(e in t)buildParams(s+"["+e+"]",t[e],a,n);else n(s,t)}return Reqwest.prototype={abort:function(){this._aborted=!0,this.request.abort()},retry:function(){init.call(this,this.o,this.fn)},then:function(s,t){return s=s||function(){},t=t||function(){},this._fulfilled?this._responseArgs.resp=s(this._responseArgs.resp):this._erred?t(this._responseArgs.resp,this._responseArgs.msg,this._responseArgs.t):(this._fulfillmentHandlers.push(s),this._errorHandlers.push(t)),this},always:function(s){return this._fulfilled||this._erred?s(this._responseArgs.resp):this._completeHandlers.push(s),this},fail:function(s){return this._erred?s(this._responseArgs.resp,this._responseArgs.msg,this._responseArgs.t):this._errorHandlers.push(s),this},catch:function(s){return this.fail(s)}},reqwest.serializeArray=function(){var s=[];return eachFormElement.apply((function(t,a){s.push({name:t,value:a})}),arguments),s},reqwest.serialize=function(){if(0===arguments.length)return"";var s,t=Array.prototype.slice.call(arguments,0);return(s=t.pop())&&s.nodeType&&t.push(s)&&(s=null),s&&(s=s.type),("map"==s?serializeHash:"array"==s?reqwest.serializeArray:serializeQueryString).apply(null,t)},reqwest.toQueryString=function(s,t){var a,n,e=t||!1,l=[],i=encodeURIComponent,r=function(s,t){t="function"==typeof t?t():null==t?"":t,l[l.length]=i(s)+"="+i(t)};if(isArray(s))for(n=0;s&&n<s.length;n++)r(s[n].name,s[n].value);else for(a in s)s.hasOwnProperty(a)&&buildParams(a,s[a],e,r);return l.join("&").replace(/%20/g,"+")},reqwest.getcallbackPrefix=function(){return callbackPrefix},reqwest.compat=function(s,t){return s&&(s.type&&(s.method=s.type)&&delete s.type,s.dataType&&(s.type=s.dataType),s.jsonpCallback&&(s.jsonpCallbackName=s.jsonpCallback)&&delete s.jsonpCallback,s.jsonp&&(s.jsonpCallback=s.jsonp)),new Reqwest(s,t)},reqwest.ajaxSetup=function(s){for(var t in s=s||{})globalSetupOptions[t]=s[t]},reqwest},module.exports?module.exports=definition():void 0===(__WEBPACK_AMD_DEFINE_RESULT__="function"==typeof(__WEBPACK_AMD_DEFINE_FACTORY__=definition)?__WEBPACK_AMD_DEFINE_FACTORY__.call(exports,__webpack_require__,exports,module):__WEBPACK_AMD_DEFINE_FACTORY__)||(module.exports=__WEBPACK_AMD_DEFINE_RESULT__)},1196:function(s,t){},1255:function(s,t,a){},1256:function(s,t,a){},1257:function(s,t,a){},1354:function(s,t,a){"use strict";var n=a(1255);a.n(n).a},1355:function(s,t,a){"use strict";var n=a(1256);a.n(n).a},1356:function(s,t,a){"use strict";var n=a(1257);a.n(n).a},1430:function(s,t,a){"use strict";a.r(t);var n=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-upload name="file" :multiple="true" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :headers="headers" @change="handleChange">\n <a-button> <a-icon type="upload"/> Click to Upload </a-button>\n </a-upload>\n',script:"\n export default {\n data() {\n return {\n headers: {\n authorization: 'authorization-text',\n },\n };\n },\n methods: {\n handleChange(info) {\n if (info.file.status !== 'uploading') {\n console.log(info.file, info.fileList);\n }\n if (info.file.status === 'done') {\n this.$message.success(`${info.file.name} file uploaded successfully`);\n } else if (info.file.status === 'error') {\n this.$message.error(`${info.file.name} file upload failed.`);\n }\n },\n },\n };\n",style:null,us:"\n#### Upload by clicking\nClassic mode. File selection dialog pops up when upload button is clicked.\n",cn:"\n#### 点击上传\n经典款式，用户点击按钮弹出文件选择框。\n",sourceCode:'<template>\n <a-upload\n name="file"\n :multiple="true"\n action="https://www.mocky.io/v2/5cc8019d300000980a055e76"\n :headers="headers"\n @change="handleChange"\n >\n <a-button> <a-icon type="upload" /> Click to Upload </a-button>\n </a-upload>\n</template>\n<script>\n export default {\n data() {\n return {\n headers: {\n authorization: \'authorization-text\',\n },\n };\n },\n methods: {\n handleChange(info) {\n if (info.file.status !== \'uploading\') {\n console.log(info.file, info.fileList);\n }\n if (info.file.status === \'done\') {\n this.$message.success(`${info.file.name} file uploaded successfully`);\n } else if (info.file.status === \'error\') {\n this.$message.error(`${info.file.name} file upload failed.`);\n }\n },\n },\n };\n<\/script>\n'}}},[a("template",{slot:"component"},[a("a-upload",{attrs:{name:"file",multiple:!0,action:"https://www.mocky.io/v2/5cc8019d300000980a055e76",headers:s.headers},on:{change:s.handleChange}},[a("a-button",[a("a-icon",{attrs:{type:"upload"}}),s._v(" Click to Upload ")],1)],1)],1),s._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"点击上传"}},[s._v("点击上传 "),a("a",{staticClass:"anchor",attrs:{href:"#点击上传"}},[s._v("#")])]),s._v(" "),a("p",[s._v("经典款式，用户点击按钮弹出文件选择框。")])]),s._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Upload-by-clicking"}},[s._v("Upload by clicking "),a("a",{staticClass:"anchor",attrs:{href:"#Upload-by-clicking"}},[s._v("#")])]),s._v(" "),a("p",[s._v("Classic mode. File selection dialog pops up when upload button is clicked.")])]),s._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"file"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":multiple")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.mocky.io/v2/5cc8019d300000980a055e76"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":headers")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"headers"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v("\n >")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v(" "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v(" />")]),s._v(" Click to Upload "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("headers")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("authorization")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'authorization-text'")]),s._v(",\n },\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleChange(info) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (info.file.status !== "),a("span",{staticClass:"hljs-string"},[s._v("'uploading'")]),s._v(") {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(info.file, info.fileList);\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (info.file.status === "),a("span",{staticClass:"hljs-string"},[s._v("'done'")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.success("),a("span",{staticClass:"hljs-string"},[s._v("`"),a("span",{staticClass:"hljs-subst"},[s._v("${info.file.name}")]),s._v(" file uploaded successfully`")]),s._v(");\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (info.file.status === "),a("span",{staticClass:"hljs-string"},[s._v("'error'")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("`"),a("span",{staticClass:"hljs-subst"},[s._v("${info.file.name}")]),s._v(" file upload failed.`")]),s._v(");\n }\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};n._withStripped=!0;var e={data:function(){return{headers:{authorization:"authorization-text"}}},methods:{handleChange:function(s){"uploading"!==s.file.status&&console.log(s.file,s.fileList),"done"===s.file.status?this.$message.success(s.file.name+" file uploaded successfully"):"error"===s.file.status&&this.$message.error(s.file.name+" file upload failed.")}}},l=a(31),i=Object(l.a)(e,n,[],!1,null,null,null);i.options.__file="components/upload/demo/basic.md";var r=i.exports,o=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-upload name="avatar" listType="picture-card" class="avatar-uploader" :showUploadList="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :beforeUpload="beforeUpload" @change="handleChange">\n <img v-if="imageUrl" :src="imageUrl" alt="avatar"/>\n <div v-else="">\n <a-icon :type="loading ? \'loading\' : \'plus\'"/>\n <div class="ant-upload-text">Upload</div>\n </div>\n </a-upload>\n',script:"\n function getBase64(img, callback) {\n const reader = new FileReader();\n reader.addEventListener('load', () => callback(reader.result));\n reader.readAsDataURL(img);\n }\n export default {\n data() {\n return {\n loading: false,\n imageUrl: '',\n };\n },\n methods: {\n handleChange(info) {\n if (info.file.status === 'uploading') {\n this.loading = true;\n return;\n }\n if (info.file.status === 'done') {\n // Get this url from response in real world.\n getBase64(info.file.originFileObj, imageUrl => {\n this.imageUrl = imageUrl;\n this.loading = false;\n });\n }\n },\n beforeUpload(file) {\n const isJPG = file.type === 'image/jpeg';\n if (!isJPG) {\n this.$message.error('You can only upload JPG file!');\n }\n const isLt2M = file.size / 1024 / 1024 < 2;\n if (!isLt2M) {\n this.$message.error('Image must smaller than 2MB!');\n }\n return isJPG && isLt2M;\n },\n },\n };\n",style:"\n .avatar-uploader > .ant-upload {\n width: 128px;\n height: 128px;\n }\n .ant-upload-select-picture-card i {\n font-size: 32px;\n color: #999;\n }\n\n .ant-upload-select-picture-card .ant-upload-text {\n margin-top: 8px;\n color: #666;\n }\n",us:"\n#### Avatar\nClick to upload user's avatar, and validate size and format of picture with `beforeUpload`.\nThe return value of function `beforeUpload` can be a Promise to check asynchronously.\n",cn:"\n#### 用户头像\n点击上传用户头像，并使用 `beforeUpload` 限制用户上传的图片格式和大小。\n`beforeUpload` 的返回值可以是一个 Promise 以支持异步处理，如服务端校验等\n",sourceCode:'<template>\n <a-upload\n name="avatar"\n listType="picture-card"\n class="avatar-uploader"\n :showUploadList="false"\n action="https://www.mocky.io/v2/5cc8019d300000980a055e76"\n :beforeUpload="beforeUpload"\n @change="handleChange"\n >\n <img v-if="imageUrl" :src="imageUrl" alt="avatar" />\n <div v-else>\n <a-icon :type="loading ? \'loading\' : \'plus\'" />\n <div class="ant-upload-text">Upload</div>\n </div>\n </a-upload>\n</template>\n<script>\n function getBase64(img, callback) {\n const reader = new FileReader();\n reader.addEventListener(\'load\', () => callback(reader.result));\n reader.readAsDataURL(img);\n }\n export default {\n data() {\n return {\n loading: false,\n imageUrl: \'\',\n };\n },\n methods: {\n handleChange(info) {\n if (info.file.status === \'uploading\') {\n this.loading = true;\n return;\n }\n if (info.file.status === \'done\') {\n // Get this url from response in real world.\n getBase64(info.file.originFileObj, imageUrl => {\n this.imageUrl = imageUrl;\n this.loading = false;\n });\n }\n },\n beforeUpload(file) {\n const isJPG = file.type === \'image/jpeg\';\n if (!isJPG) {\n this.$message.error(\'You can only upload JPG file!\');\n }\n const isLt2M = file.size / 1024 / 1024 < 2;\n if (!isLt2M) {\n this.$message.error(\'Image must smaller than 2MB!\');\n }\n return isJPG && isLt2M;\n },\n },\n };\n<\/script>\n<style>\n .avatar-uploader > .ant-upload {\n width: 128px;\n height: 128px;\n }\n .ant-upload-select-picture-card i {\n font-size: 32px;\n color: #999;\n }\n\n .ant-upload-select-picture-card .ant-upload-text {\n margin-top: 8px;\n color: #666;\n }\n</style>\n'}}},[a("template",{slot:"component"},[a("a-upload",{staticClass:"avatar-uploader",attrs:{name:"avatar",listType:"picture-card",showUploadList:!1,action:"https://www.mocky.io/v2/5cc8019d300000980a055e76",beforeUpload:s.beforeUpload},on:{change:s.handleChange}},[s.imageUrl?a("img",{attrs:{src:s.imageUrl,alt:"avatar"}}):a("div",[a("a-icon",{attrs:{type:s.loading?"loading":"plus"}}),s._v(" "),a("div",{staticClass:"ant-upload-text"},[s._v("Upload")])],1)])],1),s._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"用户头像"}},[s._v("用户头像 "),a("a",{staticClass:"anchor",attrs:{href:"#用户头像"}},[s._v("#")])]),s._v(" "),a("p",[s._v("点击上传用户头像，并使用 "),a("code",[s._v("beforeUpload")]),s._v(" 限制用户上传的图片格式和大小。"),a("br"),s._v(" "),a("code",[s._v("beforeUpload")]),s._v(" 的返回值可以是一个 Promise 以支持异步处理，如服务端校验等"),a("br")])]),s._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Avatar"}},[s._v("Avatar "),a("a",{staticClass:"anchor",attrs:{href:"#Avatar"}},[s._v("#")])]),s._v(" "),a("p",[s._v("Click to upload user's avatar, and validate size and format of picture with "),a("code",[s._v("beforeUpload")]),s._v("."),a("br"),s._v("\nThe return value of function "),a("code",[s._v("beforeUpload")]),s._v(" can be a Promise to check asynchronously."),a("br")])]),s._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("listType")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture-card"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar-uploader"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":showUploadList")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.mocky.io/v2/5cc8019d300000980a055e76"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":beforeUpload")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beforeUpload"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v("\n >")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"imageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"imageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("alt")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar"')]),s._v(" />")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"loading ? 'loading' : 'plus'\"")]),s._v(" />")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ant-upload-text"')]),s._v(">")]),s._v("Upload"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v(" "),a("span",{staticClass:"hljs-title"},[s._v("getBase64")]),s._v("("),a("span",{staticClass:"hljs-params"},[s._v("img, callback")]),s._v(") ")]),s._v("{\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" reader = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" FileReader();\n reader.addEventListener("),a("span",{staticClass:"hljs-string"},[s._v("'load'")]),s._v(", () => callback(reader.result));\n reader.readAsDataURL(img);\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("imageUrl")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleChange(info) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (info.file.status === "),a("span",{staticClass:"hljs-string"},[s._v("'uploading'")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (info.file.status === "),a("span",{staticClass:"hljs-string"},[s._v("'done'")]),s._v(") {\n "),a("span",{staticClass:"hljs-comment"},[s._v("// Get this url from response in real world.")]),s._v("\n getBase64(info.file.originFileObj, imageUrl => {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".imageUrl = imageUrl;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n });\n }\n },\n beforeUpload(file) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" isJPG = file.type === "),a("span",{staticClass:"hljs-string"},[s._v("'image/jpeg'")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!isJPG) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'You can only upload JPG file!'")]),s._v(");\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" isLt2M = file.size / "),a("span",{staticClass:"hljs-number"},[s._v("1024")]),s._v(" / "),a("span",{staticClass:"hljs-number"},[s._v("1024")]),s._v(" < "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!isLt2M) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'Image must smaller than 2MB!'")]),s._v(");\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" isJPG && isLt2M;\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader")]),s._v(" > "),a("span",{staticClass:"hljs-selector-class"},[s._v(".ant-upload")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("128px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("128px")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".ant-upload-select-picture-card")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("i")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("32px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#999")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".ant-upload-select-picture-card")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".ant-upload-text")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#666")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])],2)]],2)};o._withStripped=!0;var v={data:function(){return{loading:!1,imageUrl:""}},methods:{handleChange:function(s){var t,a,n,e=this;"uploading"!==s.file.status?"done"===s.file.status&&(t=s.file.originFileObj,a=function(s){e.imageUrl=s,e.loading=!1},(n=new FileReader).addEventListener("load",(function(){return a(n.result)})),n.readAsDataURL(t)):this.loading=!0},beforeUpload:function(s){var t="image/jpeg"===s.type;t||this.$message.error("You can only upload JPG file!");var a=s.size/1024/1024<2;return a||this.$message.error("Image must smaller than 2MB!"),t&&a}}},p=(a(1354),Object(l.a)(v,o,[],!1,null,null,null));p.options.__file="components/upload/demo/avatar.md";var c=p.exports,_=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :defaultFileList="defaultFileList">\n <a-button> <a-icon type="upload"/> Upload </a-button>\n </a-upload>\n',script:"\n export default {\n data() {\n return {\n defaultFileList: [\n {\n uid: '1',\n name: 'xxx.png',\n status: 'done',\n response: 'Server Error 500', // custom error message to show\n url: 'http://www.baidu.com/xxx.png',\n },\n {\n uid: '2',\n name: 'yyy.png',\n status: 'done',\n url: 'http://www.baidu.com/yyy.png',\n },\n {\n uid: '3',\n name: 'zzz.png',\n status: 'error',\n response: 'Server Error 500', // custom error message to show\n url: 'http://www.baidu.com/zzz.png',\n },\n ],\n };\n },\n methods: {\n handleChange({ file, fileList }) {\n if (file.status !== 'uploading') {\n console.log(file, fileList);\n }\n },\n },\n };\n",style:null,us:"\n#### Default Files\nUse `defaultFileList` for uploaded files when page init.\n",cn:"\n#### 已上传的文件列表\n使用 `defaultFileList` 设置已上传的内容。\n",sourceCode:"<template>\n <a-upload\n action=\"https://www.mocky.io/v2/5cc8019d300000980a055e76\"\n :defaultFileList=\"defaultFileList\"\n >\n <a-button> <a-icon type=\"upload\" /> Upload </a-button>\n </a-upload>\n</template>\n<script>\n export default {\n data() {\n return {\n defaultFileList: [\n {\n uid: '1',\n name: 'xxx.png',\n status: 'done',\n response: 'Server Error 500', // custom error message to show\n url: 'http://www.baidu.com/xxx.png',\n },\n {\n uid: '2',\n name: 'yyy.png',\n status: 'done',\n url: 'http://www.baidu.com/yyy.png',\n },\n {\n uid: '3',\n name: 'zzz.png',\n status: 'error',\n response: 'Server Error 500', // custom error message to show\n url: 'http://www.baidu.com/zzz.png',\n },\n ],\n };\n },\n methods: {\n handleChange({ file, fileList }) {\n if (file.status !== 'uploading') {\n console.log(file, fileList);\n }\n },\n },\n };\n<\/script>\n"}}},[a("template",{slot:"component"},[a("a-upload",{attrs:{action:"https://www.mocky.io/v2/5cc8019d300000980a055e76",defaultFileList:s.defaultFileList}},[a("a-button",[a("a-icon",{attrs:{type:"upload"}}),s._v(" Upload ")],1)],1)],1),s._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"已上传的文件列表"}},[s._v("已上传的文件列表 "),a("a",{staticClass:"anchor",attrs:{href:"#已上传的文件列表"}},[s._v("#")])]),s._v(" "),a("p",[s._v("使用 "),a("code",[s._v("defaultFileList")]),s._v(" 设置已上传的内容。")])]),s._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Default-Files"}},[s._v("Default Files "),a("a",{staticClass:"anchor",attrs:{href:"#Default-Files"}},[s._v("#")])]),s._v(" "),a("p",[s._v("Use "),a("code",[s._v("defaultFileList")]),s._v(" for uploaded files when page init.")])]),s._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.mocky.io/v2/5cc8019d300000980a055e76"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":defaultFileList")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultFileList"')]),s._v("\n >")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v(" "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v(" />")]),s._v(" Upload "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("defaultFileList")]),s._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("uid")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xxx.png'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'done'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("response")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Server Error 500'")]),s._v(", "),a("span",{staticClass:"hljs-comment"},[s._v("// custom error message to show")]),s._v("\n url: "),a("span",{staticClass:"hljs-string"},[s._v("'http://www.baidu.com/xxx.png'")]),s._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("uid")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yyy.png'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'done'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'http://www.baidu.com/yyy.png'")]),s._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("uid")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zzz.png'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'error'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("response")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Server Error 500'")]),s._v(", "),a("span",{staticClass:"hljs-comment"},[s._v("// custom error message to show")]),s._v("\n url: "),a("span",{staticClass:"hljs-string"},[s._v("'http://www.baidu.com/zzz.png'")]),s._v(",\n },\n ],\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleChange({ file, fileList }) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (file.status !== "),a("span",{staticClass:"hljs-string"},[s._v("'uploading'")]),s._v(") {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n }\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};_._withStripped=!0;var d={data:function(){return{defaultFileList:[{uid:"1",name:"xxx.png",status:"done",response:"Server Error 500",url:"http://www.baidu.com/xxx.png"},{uid:"2",name:"yyy.png",status:"done",url:"http://www.baidu.com/yyy.png"},{uid:"3",name:"zzz.png",status:"error",response:"Server Error 500",url:"http://www.baidu.com/zzz.png"}]}},methods:{handleChange:function(s){var t=s.file,a=s.fileList;"uploading"!==t.status&&console.log(t,a)}}},h=Object(l.a)(d,_,[],!1,null,null,null);h.options.__file="components/upload/demo/defaultFileList.md";var u=h.exports,f=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <div class="clearfix">\n <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" :fileList="fileList" @preview="handlePreview" @change="handleChange">\n <div v-if="fileList.length < 3">\n <a-icon type="plus"/>\n <div class="ant-upload-text">Upload</div>\n </div>\n </a-upload>\n <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">\n <img alt="example" style="width: 100%" :src="previewImage"/>\n </a-modal>\n </div>\n',script:"\n export default {\n data() {\n return {\n previewVisible: false,\n previewImage: '',\n fileList: [\n {\n uid: '-1',\n name: 'xxx.png',\n status: 'done',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n ],\n };\n },\n methods: {\n handleCancel() {\n this.previewVisible = false;\n },\n handlePreview(file) {\n this.previewImage = file.url || file.thumbUrl;\n this.previewVisible = true;\n },\n handleChange({ fileList }) {\n this.fileList = fileList;\n },\n },\n };\n",style:"\n /* you can make up upload button and sample style by using stylesheets */\n .ant-upload-select-picture-card i {\n font-size: 32px;\n color: #999;\n }\n\n .ant-upload-select-picture-card .ant-upload-text {\n margin-top: 8px;\n color: #666;\n }\n",us:"\n#### Pictures Wall\nAfter users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation.\n",cn:"\n#### 照片墙\n用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。\n",sourceCode:'<template>\n <div class="clearfix">\n <a-upload\n action="https://www.mocky.io/v2/5cc8019d300000980a055e76"\n listType="picture-card"\n :fileList="fileList"\n @preview="handlePreview"\n @change="handleChange"\n >\n <div v-if="fileList.length < 3">\n <a-icon type="plus" />\n <div class="ant-upload-text">Upload</div>\n </div>\n </a-upload>\n <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">\n <img alt="example" style="width: 100%" :src="previewImage" />\n </a-modal>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n previewVisible: false,\n previewImage: \'\',\n fileList: [\n {\n uid: \'-1\',\n name: \'xxx.png\',\n status: \'done\',\n url: \'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png\',\n },\n ],\n };\n },\n methods: {\n handleCancel() {\n this.previewVisible = false;\n },\n handlePreview(file) {\n this.previewImage = file.url || file.thumbUrl;\n this.previewVisible = true;\n },\n handleChange({ fileList }) {\n this.fileList = fileList;\n },\n },\n };\n<\/script>\n<style>\n /* you can make up upload button and sample style by using stylesheets */\n .ant-upload-select-picture-card i {\n font-size: 32px;\n color: #999;\n }\n\n .ant-upload-select-picture-card .ant-upload-text {\n margin-top: 8px;\n color: #666;\n }\n</style>\n'}}},[a("template",{slot:"component"},[a("div",{staticClass:"clearfix"},[a("a-upload",{attrs:{action:"https://www.mocky.io/v2/5cc8019d300000980a055e76",listType:"picture-card",fileList:s.fileList},on:{preview:s.handlePreview,change:s.handleChange}},[s.fileList.length<3?a("div",[a("a-icon",{attrs:{type:"plus"}}),s._v(" "),a("div",{staticClass:"ant-upload-text"},[s._v("Upload")])],1):s._e()]),s._v(" "),a("a-modal",{attrs:{visible:s.previewVisible,footer:null},on:{cancel:s.handleCancel}},[a("img",{staticStyle:{width:"100%"},attrs:{alt:"example",src:s.previewImage}})])],1)]),s._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"照片墙"}},[s._v("照片墙 "),a("a",{staticClass:"anchor",attrs:{href:"#照片墙"}},[s._v("#")])]),s._v(" "),a("p",[s._v("用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。")])]),s._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Pictures-Wall"}},[s._v("Pictures Wall "),a("a",{staticClass:"anchor",attrs:{href:"#Pictures-Wall"}},[s._v("#")])]),s._v(" "),a("p",[s._v("After users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation.")])]),s._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.mocky.io/v2/5cc8019d300000980a055e76"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("listType")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture-card"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":fileList")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v("\n >")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList.length < 3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"plus"')]),s._v(" />")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ant-upload-text"')]),s._v(">")]),s._v("Upload"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-upload")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-modal")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":visible")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"previewVisible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":footer")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"null"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@cancel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCancel"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("alt")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"example"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"previewImage"')]),s._v(" />")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-modal")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("previewVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("previewImage")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("fileList")]),s._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("uid")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xxx.png'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'done'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'")]),s._v(",\n },\n ],\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleCancel() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".previewVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n },\n handlePreview(file) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".previewImage = file.url || file.thumbUrl;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".previewVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n },\n handleChange({ fileList }) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fileList = fileList;\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("/* you can make up upload button and sample style by using stylesheets */")]),s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".ant-upload-select-picture-card")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("i")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("32px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#999")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".ant-upload-select-picture-card")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".ant-upload-text")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#666")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])],2)]],2)};f._withStripped=!0;var m={data:function(){return{previewVisible:!1,previewImage:"",fileList:[{uid:"-1",name:"xxx.png",status:"done",url:"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"}]}},methods:{handleCancel:function(){this.previewVisible=!1},handlePreview:function(s){this.previewImage=s.url||s.thumbUrl,this.previewVisible=!0},handleChange:function(s){var t=s.fileList;this.fileList=t}}},j=(a(1355),Object(l.a)(m,f,[],!1,null,null,null));j.options.__file="components/upload/demo/picture-card.md";var g=j.exports,C=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :multiple="true" :fileList="fileList" @change="handleChange">\n <a-button> <a-icon type="upload"/> Upload </a-button>\n </a-upload>\n',script:"\n export default {\n data() {\n return {\n fileList: [\n {\n uid: '-1',\n name: 'xxx.png',\n status: 'done',\n url: 'http://www.baidu.com/xxx.png',\n },\n ],\n };\n },\n methods: {\n handleChange(info) {\n let fileList = [...info.fileList];\n\n // 1. Limit the number of uploaded files\n // Only to show two recent uploaded files, and old ones will be replaced by the new\n fileList = fileList.slice(-2);\n\n // 2. read from response and show file link\n fileList = fileList.map(file => {\n if (file.response) {\n // Component will show file.url as link\n file.url = file.response.url;\n }\n return file;\n });\n\n this.fileList = fileList;\n },\n },\n };\n",style:null,us:"\n#### Complete control over file list\nYou can gain full control over filelist by configuring `fileList`. You can accomplish all kinds of customed functions. The following shows three circumstances:\n1) limit the number of uploaded files.\n2) read from response and show file link.\n3) filter successfully uploaded files according to response from server.\n",cn:"\n#### 完全控制的上传列表\n使用 `fileList` 对列表进行完全控制，可以实现各种自定义功能，以下演示三种情况：\n1) 上传列表数量的限制。\n2) 读取远程路径并显示链接。\n3) 按照服务器返回信息筛选成功上传的文件。\n",sourceCode:'<template>\n <a-upload\n action="https://www.mocky.io/v2/5cc8019d300000980a055e76"\n :multiple="true"\n :fileList="fileList"\n @change="handleChange"\n >\n <a-button> <a-icon type="upload" /> Upload </a-button>\n </a-upload>\n</template>\n<script>\n export default {\n data() {\n return {\n fileList: [\n {\n uid: \'-1\',\n name: \'xxx.png\',\n status: \'done\',\n url: \'http://www.baidu.com/xxx.png\',\n },\n ],\n };\n },\n methods: {\n handleChange(info) {\n let fileList = [...info.fileList];\n\n // 1. Limit the number of uploaded files\n // Only to show two recent uploaded files, and old ones will be replaced by the new\n fileList = fileList.slice(-2);\n\n // 2. read from response and show file link\n fileList = fileList.map(file => {\n if (file.response) {\n // Component will show file.url as link\n file.url = file.response.url;\n }\n return file;\n });\n\n this.fileList = fileList;\n },\n },\n };\n<\/script>\n'}}},[a("template",{slot:"component"},[a("a-upload",{attrs:{action:"https://www.mocky.io/v2/5cc8019d300000980a055e76",multiple:!0,fileList:s.fileList},on:{change:s.handleChange}},[a("a-button",[a("a-icon",{attrs:{type:"upload"}}),s._v(" Upload ")],1)],1)],1),s._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"完全控制的上传列表"}},[s._v("完全控制的上传列表 "),a("a",{staticClass:"anchor",attrs:{href:"#完全控制的上传列表"}},[s._v("#")])]),s._v(" "),a("p",[s._v("使用 "),a("code",[s._v("fileList")]),s._v(" 对列表进行完全控制，可以实现各种自定义功能，以下演示三种情况：")]),s._v(" "),a("ol",[a("li",[s._v("上传列表数量的限制。")]),s._v(" "),a("li",[s._v("读取远程路径并显示链接。")]),s._v(" "),a("li",[s._v("按照服务器返回信息筛选成功上传的文件。")])])]),s._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Complete-control-over-file-list"}},[s._v("Complete control over file list "),a("a",{staticClass:"anchor",attrs:{href:"#Complete-control-over-file-list"}},[s._v("#")])]),s._v(" "),a("p",[s._v("You can gain full control over filelist by configuring "),a("code",[s._v("fileList")]),s._v(". You can accomplish all kinds of customed functions. The following shows three circumstances:")]),s._v(" "),a("ol",[a("li",[s._v("limit the number of uploaded files.")]),s._v(" "),a("li",[s._v("read from response and show file link.")]),s._v(" "),a("li",[s._v("filter successfully uploaded files according to response from server.")])])]),s._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.mocky.io/v2/5cc8019d300000980a055e76"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":multiple")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":fileList")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v("\n >")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v(" "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v(" />")]),s._v(" Upload "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("fileList")]),s._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("uid")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xxx.png'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'done'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'http://www.baidu.com/xxx.png'")]),s._v(",\n },\n ],\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleChange(info) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" fileList = [...info.fileList];\n\n "),a("span",{staticClass:"hljs-comment"},[s._v("// 1. Limit the number of uploaded files")]),s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("// Only to show two recent uploaded files, and old ones will be replaced by the new")]),s._v("\n fileList = fileList.slice("),a("span",{staticClass:"hljs-number"},[s._v("-2")]),s._v(");\n\n "),a("span",{staticClass:"hljs-comment"},[s._v("// 2. read from response and show file link")]),s._v("\n fileList = fileList.map("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("file")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (file.response) {\n "),a("span",{staticClass:"hljs-comment"},[s._v("// Component will show file.url as link")]),s._v("\n file.url = file.response.url;\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" file;\n });\n\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fileList = fileList;\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};C._withStripped=!0;var w=a(15),y=a.n(w),b={data:function(){return{fileList:[{uid:"-1",name:"xxx.png",status:"done",url:"http://www.baidu.com/xxx.png"}]}},methods:{handleChange:function(s){var t=[].concat(y()(s.fileList));t=(t=t.slice(-2)).map((function(s){return s.response&&(s.url=s.response.url),s})),this.fileList=t}}},x=Object(l.a)(b,C,[],!1,null,null,null);x.options.__file="components/upload/demo/fileList.md";var k=x.exports,L=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-upload-dragger name="file" :multiple="true" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="handleChange">\n <p class="ant-upload-drag-icon">\n <a-icon type="inbox"/>\n </p>\n <p class="ant-upload-text">Click or drag file to this area to upload</p>\n <p class="ant-upload-hint">\n Support for a single or bulk upload. Strictly prohibit from uploading company data or other\n band files\n </p>\n </a-upload-dragger>\n',script:"\n export default {\n data() {\n return {};\n },\n methods: {\n handleChange(info) {\n const status = info.file.status;\n if (status !== 'uploading') {\n console.log(info.file, info.fileList);\n }\n if (status === 'done') {\n this.$message.success(`${info.file.name} file uploaded successfully.`);\n } else if (status === 'error') {\n this.$message.error(`${info.file.name} file upload failed.`);\n }\n },\n },\n };\n",style:null,us:"\n#### Drag and Drop\nClassic mode. File selection dialog pops up when upload button is clicked.\n",cn:"\n#### 拖拽上传\n把文件拖入指定区域，完成上传，同样支持点击上传。\n设置 `multiple` 后，在 `IE10+` 可以一次上传多个文件。\n",sourceCode:'<template>\n <a-upload-dragger\n name="file"\n :multiple="true"\n action="https://www.mocky.io/v2/5cc8019d300000980a055e76"\n @change="handleChange"\n >\n <p class="ant-upload-drag-icon">\n <a-icon type="inbox" />\n </p>\n <p class="ant-upload-text">Click or drag file to this area to upload</p>\n <p class="ant-upload-hint">\n Support for a single or bulk upload. Strictly prohibit from uploading company data or other\n band files\n </p>\n </a-upload-dragger>\n</template>\n<script>\n export default {\n data() {\n return {};\n },\n methods: {\n handleChange(info) {\n const status = info.file.status;\n if (status !== \'uploading\') {\n console.log(info.file, info.fileList);\n }\n if (status === \'done\') {\n this.$message.success(`${info.file.name} file uploaded successfully.`);\n } else if (status === \'error\') {\n this.$message.error(`${info.file.name} file upload failed.`);\n }\n },\n },\n };\n<\/script>\n'}}},[a("template",{slot:"component"},[a("a-upload-dragger",{attrs:{name:"file",multiple:!0,action:"https://www.mocky.io/v2/5cc8019d300000980a055e76"},on:{change:s.handleChange}},[a("p",{staticClass:"ant-upload-drag-icon"},[a("a-icon",{attrs:{type:"inbox"}})],1),s._v(" "),a("p",{staticClass:"ant-upload-text"},[s._v("Click or drag file to this area to upload")]),s._v(" "),a("p",{staticClass:"ant-upload-hint"},[s._v("\n Support for a single or bulk upload. Strictly prohibit from uploading company data or other\n band files\n ")])])],1),s._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"拖拽上传"}},[s._v("拖拽上传 "),a("a",{staticClass:"anchor",attrs:{href:"#拖拽上传"}},[s._v("#")])]),s._v(" "),a("p",[s._v("把文件拖入指定区域，完成上传，同样支持点击上传。"),a("br"),s._v("\n设置 "),a("code",[s._v("multiple")]),s._v(" 后，在 "),a("code",[s._v("IE10+")]),s._v(" 可以一次上传多个文件。"),a("br")])]),s._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Drag-and-Drop"}},[s._v("Drag and Drop "),a("a",{staticClass:"anchor",attrs:{href:"#Drag-and-Drop"}},[s._v("#")])]),s._v(" "),a("p",[s._v("Classic mode. File selection dialog pops up when upload button is clicked.")])]),s._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-upload-dragger")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"file"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":multiple")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.mocky.io/v2/5cc8019d300000980a055e76"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v("\n >")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ant-upload-drag-icon"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inbox"')]),s._v(" />")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ant-upload-text"')]),s._v(">")]),s._v("Click or drag file to this area to upload"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ant-upload-hint"')]),s._v(">")]),s._v("\n Support for a single or bulk upload. Strictly prohibit from uploading company data or other\n band files\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-upload-dragger")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {};\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleChange(info) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" status = info.file.status;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (status !== "),a("span",{staticClass:"hljs-string"},[s._v("'uploading'")]),s._v(") {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(info.file, info.fileList);\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (status === "),a("span",{staticClass:"hljs-string"},[s._v("'done'")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.success("),a("span",{staticClass:"hljs-string"},[s._v("`"),a("span",{staticClass:"hljs-subst"},[s._v("${info.file.name}")]),s._v(" file uploaded successfully.`")]),s._v(");\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (status === "),a("span",{staticClass:"hljs-string"},[s._v("'error'")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("`"),a("span",{staticClass:"hljs-subst"},[s._v("${info.file.name}")]),s._v(" file upload failed.`")]),s._v(");\n }\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};L._withStripped=!0;var U={data:function(){return{}},methods:{handleChange:function(s){var t=s.file.status;"uploading"!==t&&console.log(s.file,s.fileList),"done"===t?this.$message.success(s.file.name+" file uploaded successfully."):"error"===t&&this.$message.error(s.file.name+" file upload failed.")}}},P=Object(l.a)(U,L,[],!1,null,null,null);P.options.__file="components/upload/demo/drag.md";var E=P.exports,R=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture" :defaultFileList="fileList">\n <a-button> <a-icon type="upload"/> upload </a-button>\n </a-upload>\n <br/>\n <br/>\n <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture" :defaultFileList="fileList" class="upload-list-inline">\n <a-button> <a-icon type="upload"/> upload </a-button>\n </a-upload>\n </div>\n',script:"\n export default {\n data() {\n return {\n fileList: [\n {\n uid: '-1',\n name: 'xxx.png',\n status: 'done',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n thumbUrl:\n 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n {\n uid: '-2',\n name: 'yyy.png',\n status: 'done',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n thumbUrl:\n 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n ],\n };\n },\n };\n",style:null,us:"\n#### Pictures with list style\nIf uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not support local thumbnail show. Please use `thumbUrl` instead.\n",cn:"\n#### 图片列表样式\n上传文件为图片，可展示本地缩略图。`IE8/9` 不支持浏览器本地缩略图展示（[Ref](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL)），可以写 `thumbUrl` 属性来代替。\n",sourceCode:"<template>\n <div>\n <a-upload\n action=\"https://www.mocky.io/v2/5cc8019d300000980a055e76\"\n listType=\"picture\"\n :defaultFileList=\"fileList\"\n >\n <a-button> <a-icon type=\"upload\" /> upload </a-button>\n </a-upload>\n <br />\n <br />\n <a-upload\n action=\"https://www.mocky.io/v2/5cc8019d300000980a055e76\"\n listType=\"picture\"\n :defaultFileList=\"fileList\"\n class=\"upload-list-inline\"\n >\n <a-button> <a-icon type=\"upload\" /> upload </a-button>\n </a-upload>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n fileList: [\n {\n uid: '-1',\n name: 'xxx.png',\n status: 'done',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n thumbUrl:\n 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n {\n uid: '-2',\n name: 'yyy.png',\n status: 'done',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n thumbUrl:\n 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n ],\n };\n },\n };\n<\/script>\n<style scoped>\n /* tile uploaded pictures */\n .upload-list-inline >>> .ant-upload-list-item {\n float: left;\n width: 200px;\n margin-right: 8px;\n }\n .upload-list-inline >>> .ant-upload-animate-enter {\n animation-name: uploadAnimateInlineIn;\n }\n .upload-list-inline >>> .ant-upload-animate-leave {\n animation-name: uploadAnimateInlineOut;\n }\n</style>\n"}}},[a("template",{slot:"component"},[a("div",[a("a-upload",{attrs:{action:"https://www.mocky.io/v2/5cc8019d300000980a055e76",listType:"picture",defaultFileList:s.fileList}},[a("a-button",[a("a-icon",{attrs:{type:"upload"}}),s._v(" upload ")],1)],1),s._v(" "),a("br"),s._v(" "),a("br"),s._v(" "),a("a-upload",{staticClass:"upload-list-inline",attrs:{action:"https://www.mocky.io/v2/5cc8019d300000980a055e76",listType:"picture",defaultFileList:s.fileList}},[a("a-button",[a("a-icon",{attrs:{type:"upload"}}),s._v(" upload ")],1)],1)],1)]),s._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"图片列表样式"}},[s._v("图片列表样式 "),a("a",{staticClass:"anchor",attrs:{href:"#图片列表样式"}},[s._v("#")])]),s._v(" "),a("p",[s._v("上传文件为图片，可展示本地缩略图。"),a("code",[s._v("IE8/9")]),s._v(" 不支持浏览器本地缩略图展示（"),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL"}},[s._v("Ref")]),s._v("），可以写 "),a("code",[s._v("thumbUrl")]),s._v(" 属性来代替。")])]),s._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Pictures-with-list-style"}},[s._v("Pictures with list style "),a("a",{staticClass:"anchor",attrs:{href:"#Pictures-with-list-style"}},[s._v("#")])]),s._v(" "),a("p",[s._v("If uploaded file is a picture, the thumbnail can be shown. "),a("code",[s._v("IE8/9")]),s._v(" do not support local thumbnail show. Please use "),a("code",[s._v("thumbUrl")]),s._v(" instead.")])]),s._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.mocky.io/v2/5cc8019d300000980a055e76"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("listType")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":defaultFileList")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v("\n >")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v(" "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v(" />")]),s._v(" upload "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-upload")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.mocky.io/v2/5cc8019d300000980a055e76"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("listType")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":defaultFileList")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-list-inline"')]),s._v("\n >")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v(" "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v(" />")]),s._v(" upload "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-upload")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("fileList")]),s._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("uid")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xxx.png'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'done'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("thumbUrl")]),s._v(":\n "),a("span",{staticClass:"hljs-string"},[s._v("'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'")]),s._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("uid")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yyy.png'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'done'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("thumbUrl")]),s._v(":\n "),a("span",{staticClass:"hljs-string"},[s._v("'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'")]),s._v(",\n },\n ],\n };\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scoped")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("/* tile uploaded pictures */")]),s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".upload-list-inline")]),s._v(" >>> "),a("span",{staticClass:"hljs-selector-class"},[s._v(".ant-upload-list-item")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("float")]),s._v(": left;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8px")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".upload-list-inline")]),s._v(" >>> "),a("span",{staticClass:"hljs-selector-class"},[s._v(".ant-upload-animate-enter")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("animation-name")]),s._v(": uploadAnimateInlineIn;\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".upload-list-inline")]),s._v(" >>> "),a("span",{staticClass:"hljs-selector-class"},[s._v(".ant-upload-animate-leave")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("animation-name")]),s._v(": uploadAnimateInlineOut;\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])],2)]],2)};R._withStripped=!0;var F={data:function(){return{fileList:[{uid:"-1",name:"xxx.png",status:"done",url:"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",thumbUrl:"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"},{uid:"-2",name:"yyy.png",status:"done",url:"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",thumbUrl:"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"}]}}},A=(a(1356),Object(l.a)(F,R,[],!1,null,"c91678b8",null));A.options.__file="components/upload/demo/picture-style.md";var z=A.exports,I=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <div class="clearfix">\n <a-upload :fileList="fileList" :remove="handleRemove" :beforeUpload="beforeUpload">\n <a-button> <a-icon type="upload"/> Select File </a-button>\n </a-upload>\n <a-button type="primary" @click="handleUpload" :disabled="fileList.length === 0" :loading="uploading" style="margin-top: 16px">\n {{uploading ? \'Uploading\' : \'Start Upload\' }}\n </a-button>\n </div>\n',script:"\n import reqwest from 'reqwest';\n export default {\n data() {\n return {\n fileList: [],\n uploading: false,\n };\n },\n methods: {\n handleRemove(file) {\n const index = this.fileList.indexOf(file);\n const newFileList = this.fileList.slice();\n newFileList.splice(index, 1);\n this.fileList = newFileList;\n },\n beforeUpload(file) {\n this.fileList = [...this.fileList, file];\n return false;\n },\n handleUpload() {\n const { fileList } = this;\n const formData = new FormData();\n fileList.forEach(file => {\n formData.append('files[]', file);\n });\n this.uploading = true;\n\n // You can use any AJAX library you like\n reqwest({\n url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',\n method: 'post',\n processData: false,\n data: formData,\n success: () => {\n this.fileList = [];\n this.uploading = false;\n this.$message.success('upload successfully.');\n },\n error: () => {\n this.uploading = false;\n this.$message.error('upload failed.');\n },\n });\n },\n },\n };\n",style:null,us:"\n#### Upload manually\nUpload files manually after `beforeUpload` returns `false`.\n",cn:"\n#### 手动上传\n`beforeUpload` 返回 `false` 后，手动上传文件。\n",sourceCode:'<template>\n <div class="clearfix">\n <a-upload :fileList="fileList" :remove="handleRemove" :beforeUpload="beforeUpload">\n <a-button> <a-icon type="upload" /> Select File </a-button>\n </a-upload>\n <a-button\n type="primary"\n @click="handleUpload"\n :disabled="fileList.length === 0"\n :loading="uploading"\n style="margin-top: 16px"\n >\n {{uploading ? \'Uploading\' : \'Start Upload\' }}\n </a-button>\n </div>\n</template>\n<script>\n import reqwest from \'reqwest\';\n export default {\n data() {\n return {\n fileList: [],\n uploading: false,\n };\n },\n methods: {\n handleRemove(file) {\n const index = this.fileList.indexOf(file);\n const newFileList = this.fileList.slice();\n newFileList.splice(index, 1);\n this.fileList = newFileList;\n },\n beforeUpload(file) {\n this.fileList = [...this.fileList, file];\n return false;\n },\n handleUpload() {\n const { fileList } = this;\n const formData = new FormData();\n fileList.forEach(file => {\n formData.append(\'files[]\', file);\n });\n this.uploading = true;\n\n // You can use any AJAX library you like\n reqwest({\n url: \'https://www.mocky.io/v2/5cc8019d300000980a055e76\',\n method: \'post\',\n processData: false,\n data: formData,\n success: () => {\n this.fileList = [];\n this.uploading = false;\n this.$message.success(\'upload successfully.\');\n },\n error: () => {\n this.uploading = false;\n this.$message.error(\'upload failed.\');\n },\n });\n },\n },\n };\n<\/script>\n'}}},[a("template",{slot:"component"},[a("div",{staticClass:"clearfix"},[a("a-upload",{attrs:{fileList:s.fileList,remove:s.handleRemove,beforeUpload:s.beforeUpload}},[a("a-button",[a("a-icon",{attrs:{type:"upload"}}),s._v(" Select File ")],1)],1),s._v(" "),a("a-button",{staticStyle:{"margin-top":"16px"},attrs:{type:"primary",disabled:0===s.fileList.length,loading:s.uploading},on:{click:s.handleUpload}},[s._v("\n "+s._s(s.uploading?"Uploading":"Start Upload")+"\n ")])],1)]),s._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"手动上传"}},[s._v("手动上传 "),a("a",{staticClass:"anchor",attrs:{href:"#手动上传"}},[s._v("#")])]),s._v(" "),a("p",[a("code",[s._v("beforeUpload")]),s._v(" 返回 "),a("code",[s._v("false")]),s._v(" 后，手动上传文件。")])]),s._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Upload-manually"}},[s._v("Upload manually "),a("a",{staticClass:"anchor",attrs:{href:"#Upload-manually"}},[s._v("#")])]),s._v(" "),a("p",[s._v("Upload files manually after "),a("code",[s._v("beforeUpload")]),s._v(" returns "),a("code",[s._v("false")]),s._v(".")])]),s._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-upload")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":fileList")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":beforeUpload")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beforeUpload"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v(" "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v(" />")]),s._v(" Select File "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-upload")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleUpload"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList.length === 0"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"uploading"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 16px"')]),s._v("\n >")]),s._v("\n "),a("span",[s._v("{{")]),s._v("uploading ? 'Uploading' : 'Start Upload' "),a("span",[s._v("}}")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" reqwest "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'reqwest'")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("fileList")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("uploading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleRemove(file) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" index = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fileList.indexOf(file);\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" newFileList = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fileList.slice();\n newFileList.splice(index, "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fileList = newFileList;\n },\n beforeUpload(file) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fileList = [...this.fileList, file];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n },\n handleUpload() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" { fileList } = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" formData = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" FormData();\n fileList.forEach("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("file")]),s._v(" =>")]),s._v(" {\n formData.append("),a("span",{staticClass:"hljs-string"},[s._v("'files[]'")]),s._v(", file);\n });\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".uploading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n\n "),a("span",{staticClass:"hljs-comment"},[s._v("// You can use any AJAX library you like")]),s._v("\n reqwest({\n "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://www.mocky.io/v2/5cc8019d300000980a055e76'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("method")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'post'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("processData")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": formData,\n "),a("span",{staticClass:"hljs-attr"},[s._v("success")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fileList = [];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".uploading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.success("),a("span",{staticClass:"hljs-string"},[s._v("'upload successfully.'")]),s._v(");\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("error")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".uploading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'upload failed.'")]),s._v(");\n },\n });\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};I._withStripped=!0;var q=a(1195),S=a.n(q),D={data:function(){return{fileList:[],uploading:!1}},methods:{handleRemove:function(s){var t=this.fileList.indexOf(s),a=this.fileList.slice();a.splice(t,1),this.fileList=a},beforeUpload:function(s){return this.fileList=[].concat(y()(this.fileList),[s]),!1},handleUpload:function(){var s=this,t=this.fileList,a=new FormData;t.forEach((function(s){a.append("files[]",s)})),this.uploading=!0,S()({url:"https://www.mocky.io/v2/5cc8019d300000980a055e76",method:"post",processData:!1,data:a,success:function(){s.fileList=[],s.uploading=!1,s.$message.success("upload successfully.")},error:function(){s.uploading=!1,s.$message.error("upload failed.")}})}}},T=Object(l.a)(D,I,[],!1,null,null,null);T.options.__file="components/upload/demo/upload-manually.md";var V=T.exports,$=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory="">\n <a-button> <a-icon type="upload"/> Upload Directory </a-button>\n </a-upload>\n',script:null,style:null,us:"\n#### Upload directory\nYou can select and upload a whole directory.\n",cn:"\n#### 文件夹上传\n支持上传一个文件夹里的所有文件。\n",sourceCode:'<template>\n <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>\n <a-button> <a-icon type="upload" /> Upload Directory </a-button>\n </a-upload>\n</template>\n'}}},[a("template",{slot:"component"},[a("a-upload",{attrs:{action:"https://www.mocky.io/v2/5cc8019d300000980a055e76",directory:""}},[a("a-button",[a("a-icon",{attrs:{type:"upload"}}),s._v(" Upload Directory ")],1)],1)],1),s._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"文件夹上传"}},[s._v("文件夹上传 "),a("a",{staticClass:"anchor",attrs:{href:"#文件夹上传"}},[s._v("#")])]),s._v(" "),a("p",[s._v("支持上传一个文件夹里的所有文件。")])]),s._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Upload-directory"}},[s._v("Upload directory "),a("a",{staticClass:"anchor",attrs:{href:"#Upload-directory"}},[s._v("#")])]),s._v(" "),a("p",[s._v("You can select and upload a whole directory.")])]),s._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-upload")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.mocky.io/v2/5cc8019d300000980a055e76"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("directory")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v(" "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v(" />")]),s._v(" Upload Directory "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])],2)]],2)};$._withStripped=!0;var H=Object(l.a)({},$,[],!1,null,null,null);H.options.__file="components/upload/demo/directory.md";var W=H.exports,O=function(){var s=this.$createElement;this._self._c;return this._m(0)};O._withStripped=!0;var J=Object(l.a)({},O,[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[a("h2",{attrs:{id:"API"}},[s._v("API "),a("a",{staticClass:"anchor",attrs:{href:"#API"}},[s._v("#")])]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")]),s._v(" "),a("th",[s._v("默认值")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("accept")]),s._v(" "),a("td",[s._v("接受上传的文件类型, 详见 "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept"}},[s._v("input accept Attribute")])]),s._v(" "),a("td",[s._v("string")]),s._v(" "),a("td",[s._v("无")])]),s._v(" "),a("tr",[a("td",[s._v("action")]),s._v(" "),a("td",[s._v("上传的地址")]),s._v(" "),a("td",[s._v("string|(file) => "),a("code",{pre:!0},[s._v("Promise")])]),s._v(" "),a("td",[s._v("无")])]),s._v(" "),a("tr",[a("td",[s._v("directory")]),s._v(" "),a("td",[s._v("支持上传文件夹（"),a("a",{attrs:{href:"https://caniuse.com/#feat=input-file-directory"}},[s._v("caniuse")]),s._v("）")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("beforeUpload")]),s._v(" "),a("td",[s._v("上传文件之前的钩子，参数为上传的文件，若返回 "),a("code",{pre:!0},[s._v("false")]),s._v(" 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 "),a("code",{pre:!0},[s._v("File")]),s._v(" 或 "),a("code",{pre:!0},[s._v("Blob")]),s._v(" 对象则上传 resolve 传入对象）。"),a("strong",[s._v("注意：IE9 不支持该方法")]),s._v("。")]),s._v(" "),a("td",[s._v("(file, fileList) => "),a("code",{pre:!0},[s._v("boolean | Promise")])]),s._v(" "),a("td",[s._v("无")])]),s._v(" "),a("tr",[a("td",[s._v("customRequest")]),s._v(" "),a("td",[s._v("通过覆盖默认的上传行为，可以自定义自己的上传实现")]),s._v(" "),a("td",[s._v("Function")]),s._v(" "),a("td",[s._v("无")])]),s._v(" "),a("tr",[a("td",[s._v("data")]),s._v(" "),a("td",[s._v("上传所需参数或返回上传参数的方法")]),s._v(" "),a("td",[s._v("object|(file) => object")]),s._v(" "),a("td",[s._v("无")])]),s._v(" "),a("tr",[a("td",[s._v("defaultFileList")]),s._v(" "),a("td",[s._v("默认已经上传的文件列表")]),s._v(" "),a("td",[s._v("object[]")]),s._v(" "),a("td",[s._v("无")])]),s._v(" "),a("tr",[a("td",[s._v("disabled")]),s._v(" "),a("td",[s._v("是否禁用")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("fileList")]),s._v(" "),a("td",[s._v("已经上传的文件列表（受控）")]),s._v(" "),a("td",[s._v("object[]")]),s._v(" "),a("td",[s._v("无")])]),s._v(" "),a("tr",[a("td",[s._v("headers")]),s._v(" "),a("td",[s._v("设置上传的请求头部，IE10 以上有效")]),s._v(" "),a("td",[s._v("object")]),s._v(" "),a("td",[s._v("无")])]),s._v(" "),a("tr",[a("td",[s._v("listType")]),s._v(" "),a("td",[s._v("上传列表的内建样式，支持三种基本样式 "),a("code",{pre:!0},[s._v("text")]),s._v(", "),a("code",{pre:!0},[s._v("picture")]),s._v(" 和 "),a("code",{pre:!0},[s._v("picture-card")])]),s._v(" "),a("td",[s._v("string")]),s._v(" "),a("td",[s._v("'text'")])]),s._v(" "),a("tr",[a("td",[s._v("multiple")]),s._v(" "),a("td",[s._v("是否支持多选文件，"),a("code",{pre:!0},[s._v("ie10+")]),s._v(" 支持。开启后按住 ctrl 可选择多个文件。")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("name")]),s._v(" "),a("td",[s._v("发到后台的文件参数名")]),s._v(" "),a("td",[s._v("string")]),s._v(" "),a("td",[s._v("'file'")])]),s._v(" "),a("tr",[a("td",[s._v("showUploadList")]),s._v(" "),a("td",[s._v("是否展示 uploadList, 可设为一个对象，用于单独设定 showPreviewIcon 和 showRemoveIcon")]),s._v(" "),a("td",[s._v("Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean }")]),s._v(" "),a("td",[s._v("true")])]),s._v(" "),a("tr",[a("td",[s._v("supportServerRender")]),s._v(" "),a("td",[s._v("服务端渲染时需要打开这个")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("withCredentials")]),s._v(" "),a("td",[s._v("上传请求时是否携带 cookie")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("openFileDialogOnClick")]),s._v(" "),a("td",[s._v("点击打开文件对话框")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("true")])]),s._v(" "),a("tr",[a("td",[s._v("remove")]),s._v(" "),a("td",[s._v("点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除。")]),s._v(" "),a("td",[s._v("Function(file): "),a("code",{pre:!0},[s._v("boolean | Promise")])]),s._v(" "),a("td",[s._v("无")])])])]),s._v(" "),a("h3",{attrs:{id:"事件"}},[s._v("事件 "),a("a",{staticClass:"anchor",attrs:{href:"#事件"}},[s._v("#")])]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("事件名称")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("回调参数")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("change")]),s._v(" "),a("td",[s._v("上传文件改变时的状态，详见 "),a("a",{attrs:{href:"#change"}},[s._v("change")])]),s._v(" "),a("td",[s._v("Function")])]),s._v(" "),a("tr",[a("td",[s._v("preview")]),s._v(" "),a("td",[s._v("点击文件链接或预览图标时的回调")]),s._v(" "),a("td",[s._v("Function(file)")])]),s._v(" "),a("tr",[a("td",[s._v("reject")]),s._v(" "),a("td",[s._v("拖拽文件不符合 accept 类型时的回调")]),s._v(" "),a("td",[s._v("Function(fileList)")])])])]),s._v(" "),a("h3",{attrs:{id:"change"}},[s._v("change "),a("a",{staticClass:"anchor",attrs:{href:"#change"}},[s._v("#")])]),s._v(" "),a("blockquote",[a("p",[s._v("上传中、完成、失败都会调用这个函数。")])]),s._v(" "),a("p",[s._v("文件状态改变的回调，返回为：")]),s._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-js"}},[s._v("{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("file")]),s._v(": { "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* ... */")]),s._v(" },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fileList")]),s._v(": [ "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* ... */")]),s._v(" ],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("event")]),s._v(": { "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* ... */")]),s._v(" },\n}\n")])]),s._v(" "),a("ol",[a("li",[a("p",[a("code",{pre:!0},[s._v("file")]),s._v(" 当前操作的文件对象。")]),s._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-js"}},[s._v("{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("uid")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'uid'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突")]),s._v("\n name: "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'xx.png'")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// 文件名")]),s._v("\n status: "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'done'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// 状态有：uploading done error removed")]),s._v("\n response: "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('\'{"status": "success"}\'')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// 服务端响应内容")]),s._v("\n linkProps: "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('\'{"download": "image"}\'')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// 下载链接额外的 HTML 属性")]),s._v("\n}\n")])])]),s._v(" "),a("li",[a("p",[a("code",{pre:!0},[s._v("fileList")]),s._v(" 当前的文件列表。")])]),s._v(" "),a("li",[a("p",[a("code",{pre:!0},[s._v("event")]),s._v(" 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。")])])])])}],!1,null,null,null);J.options.__file="components/upload/index.zh-CN.md";var Z=J.exports,M=function(){var s=this.$createElement;this._self._c;return this._m(0)};M._withStripped=!0;var B=Object(l.a)({},M,[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[a("h2",{attrs:{id:"API"}},[s._v("API "),a("a",{staticClass:"anchor",attrs:{href:"#API"}},[s._v("#")])]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("Property")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("accept")]),s._v(" "),a("td",[s._v("File types that can be accepted. See "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept"}},[s._v("input accept Attribute")])]),s._v(" "),a("td",[s._v("string")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("action")]),s._v(" "),a("td",[s._v("Uploading URL")]),s._v(" "),a("td",[s._v("string|(file) => "),a("code",{pre:!0},[s._v("Promise")])]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("directory")]),s._v(" "),a("td",[s._v("support upload whole directory ("),a("a",{attrs:{href:"https://caniuse.com/#feat=input-file-directory"}},[s._v("caniuse")]),s._v(")")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("beforeUpload")]),s._v(" "),a("td",[s._v("Hook function which will be executed before uploading. Uploading will be stopped with "),a("code",{pre:!0},[s._v("false")]),s._v(" or a rejected Promise returned. "),a("strong",[s._v("Warning：this function is not supported in IE9")]),s._v("。")]),s._v(" "),a("td",[s._v("(file, fileList) => "),a("code",{pre:!0},[s._v("boolean | Promise")])]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("customRequest")]),s._v(" "),a("td",[s._v("override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest")]),s._v(" "),a("td",[s._v("Function")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("data")]),s._v(" "),a("td",[s._v("Uploading params or function which can return uploading params.")]),s._v(" "),a("td",[s._v("object|function(file)")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("defaultFileList")]),s._v(" "),a("td",[s._v("Default list of files that have been uploaded.")]),s._v(" "),a("td",[s._v("object[]")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("disabled")]),s._v(" "),a("td",[s._v("disable upload button")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("fileList")]),s._v(" "),a("td",[s._v("List of files that have been uploaded (controlled). Here is a common issue "),a("a",{attrs:{href:"https://github.com/ant-design/ant-design/issues/2423"}},[s._v("#2423")]),s._v(" when using it")]),s._v(" "),a("td",[s._v("object[]")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("headers")]),s._v(" "),a("td",[s._v("Set request headers, valid above IE10.")]),s._v(" "),a("td",[s._v("object")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("listType")]),s._v(" "),a("td",[s._v("Built-in stylesheets, support for three types: "),a("code",{pre:!0},[s._v("text")]),s._v(", "),a("code",{pre:!0},[s._v("picture")]),s._v(" or "),a("code",{pre:!0},[s._v("picture-card")])]),s._v(" "),a("td",[s._v("string")]),s._v(" "),a("td",[s._v("'text'")])]),s._v(" "),a("tr",[a("td",[s._v("multiple")]),s._v(" "),a("td",[s._v("Whether to support selected multiple file. "),a("code",{pre:!0},[s._v("IE10+")]),s._v(" supported. You can select multiple files with CTRL holding down while multiple is set to be true")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("name")]),s._v(" "),a("td",[s._v("The name of uploading file")]),s._v(" "),a("td",[s._v("string")]),s._v(" "),a("td",[s._v("'file'")])]),s._v(" "),a("tr",[a("td",[s._v("showUploadList")]),s._v(" "),a("td",[s._v("Whether to show default upload list, could be an object to specify "),a("code",{pre:!0},[s._v("showPreviewIcon")]),s._v(" and "),a("code",{pre:!0},[s._v("showRemoveIcon")]),s._v(" individually")]),s._v(" "),a("td",[s._v("Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean }")]),s._v(" "),a("td",[s._v("true")])]),s._v(" "),a("tr",[a("td",[s._v("supportServerRender")]),s._v(" "),a("td",[s._v("Need to be turned on while the server side is rendering.")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("withCredentials")]),s._v(" "),a("td",[s._v("ajax upload with cookie sent")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("openFileDialogOnClick")]),s._v(" "),a("td",[s._v("click open file dialog")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("true")])]),s._v(" "),a("tr",[a("td",[s._v("remove")]),s._v(" "),a("td",[s._v("A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is "),a("code",{pre:!0},[s._v("false")]),s._v(" or a Promise which resolve(false) or reject.")]),s._v(" "),a("td",[s._v("Function(file): "),a("code",{pre:!0},[s._v("boolean | Promise")])]),s._v(" "),a("td",[s._v("-")])])])]),s._v(" "),a("h3",{attrs:{id:"events"}},[s._v("events "),a("a",{staticClass:"anchor",attrs:{href:"#events"}},[s._v("#")])]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("Events Name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Arguments")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("change")]),s._v(" "),a("td",[s._v("A callback function, can be executed when uploading state is changing. See "),a("a",{attrs:{href:"#change"}},[s._v("change")])]),s._v(" "),a("td",[s._v("Function")])]),s._v(" "),a("tr",[a("td",[s._v("preview")]),s._v(" "),a("td",[s._v("A callback function, will be executed when file link or preview icon is clicked.")]),s._v(" "),a("td",[s._v("Function(file)")])]),s._v(" "),a("tr",[a("td",[s._v("reject")]),s._v(" "),a("td",[s._v("A callback function, will be executed when drop files is not accept.")]),s._v(" "),a("td",[s._v("Function(fileList)")])])])]),s._v(" "),a("h3",{attrs:{id:"change"}},[s._v("change "),a("a",{staticClass:"anchor",attrs:{href:"#change"}},[s._v("#")])]),s._v(" "),a("blockquote",[a("p",[s._v("The function will be called when uploading is in progress, completed or failed")])]),s._v(" "),a("p",[s._v("When uploading state change, it returns:")]),s._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-js"}},[s._v("{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("file")]),s._v(": { "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* ... */")]),s._v(" },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("fileList")]),s._v(": [ "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* ... */")]),s._v(" ],\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("event")]),s._v(": { "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("/* ... */")]),s._v(" },\n}\n")])]),s._v(" "),a("ol",[a("li",[a("p",[a("code",{pre:!0},[s._v("file")]),s._v(" File object for the current operation.")]),s._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-js"}},[s._v("{\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("uid")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'uid'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// unique identifier, negative is recommend, to prevent interference with internal generated id")]),s._v("\n name: "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'xx.png'")]),s._v(" "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// file name")]),s._v("\n status: "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'done'")]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// options：uploading, done, error, removed")]),s._v("\n response: "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('\'{"status": "success"}\'')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// response from server")]),s._v("\n linkProps: "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('\'{"download": "image"}\'')]),s._v(", "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// additional html props of file link")]),s._v("\n}\n")])])]),s._v(" "),a("li",[a("p",[a("code",{pre:!0},[s._v("fileList")]),s._v(" current list of files")])]),s._v(" "),a("li",[a("p",[a("code",{pre:!0},[s._v("event")]),s._v(" response from server, including uploading progress, supported by advanced browsers.")])])])])}],!1,null,null,null);B.options.__file="components/upload/index.en-US.md";var X=B.exports,G="# 上传\n 上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。\n ## 何时使用\n - 当需要上传一个或一些文件时。\n - 当需要展现上传的进度时。\n - 当需要使用拖拽交互时。\n ## 代码演示",N="# Upload\n Upload file by selecting or dragging.\n\n\n## When To Use\n\n Uploading is the process of publishing information (web pages, text, pictures, video, etc.) to a remote server via a web page or upload tool.\n\n - When you need to upload one or more files.\n - When you need to show the process of uploading.\n - When you need to upload files by dragging and dropping.\n ## Examples\n ",Y={category:"Components",subtitle:"上传",type:"Data Entry",title:"Upload",render:function(){var s=arguments[0];return s("div",[s("md",{attrs:{cn:G,us:N}}),s(r),s(c),s(u),s(g),s(k),s(E),s(z),s(V),s(W),s("api",[s("template",{slot:"cn"},[s(Z)]),s(X)])])}},K=Object(l.a)(Y,void 0,void 0,!1,null,null,null);K.options.__file="components/upload/demo/index.vue";t.default=K.exports}}]); |