40.2a82e8a0329b570fc7ae.js 27.0 KB
Newer Older
A
AmyFoxFN 已提交
1
webpackJsonp([40],{S5Uo:function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"Upload"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Upload-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Upload")]),s._v(" "),s._m(0),s._v(" "),s._m(1),s._v(" "),s._m(2),s._v(" "),s._m(3),s._v(" "),a("h3",{attrs:{id:"Example"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Example-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Example")]),s._v(" "),s._m(4),s._v(" "),a("h3",{attrs:{id:"Propsconfiguration"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Propsconfiguration-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Props configuration")]),s._v(" "),s._m(5),s._v(" "),s._m(6),s._v(" "),s._m(7),s._v(" "),s._m(8),s._v(" "),s._m(9),s._v(" "),s._m(10),s._v(" "),a("h3",{attrs:{id:"Events"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Events-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Events")]),s._v(" "),s._m(11),s._v(" "),a("h3",{attrs:{id:"Instancemethods"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Instancemethods-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Instance methods")]),s._v(" "),s._m(12)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("blockquote",[a("p",[s._v("New in 1.3.0+")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("Upload")]),s._v(" component.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("strong",[s._v("Notice:")]),s._v(" In this document, all the original File will be called "),a("strong",[s._v("original file")]),s._v(", since the wrapped file object will be called "),a("strong",[s._v("file object")]),s._v(". The structure of "),a("strong",[s._v("file object")]),s._v(" show as following:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("name")]),s._v(" "),a("td",[s._v("file name")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("size")]),s._v(" "),a("td",[s._v("file size")]),s._v(" "),a("td",[s._v("Number")])]),s._v(" "),a("tr",[a("td",[s._v("url")]),s._v(" "),a("td",[s._v("file url, created by URL.createObjectURL, for preview")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("base64")]),s._v(" "),a("td",[s._v("file base64 value, the value is equaled to the original file's base64 value. It is "),a("code",{pre:!0},[s._v("''")]),s._v(" by default, but you can have some plugins to added this "),a("code",{pre:!0},[s._v("base64")]),s._v(" value, like the compress plugin below")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("status")]),s._v(" "),a("td",[s._v("file status, one of: ready, uploading, success, error")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("progress")]),s._v(" "),a("td",[s._v("file progress, number 0~1")]),s._v(" "),a("td",[s._v("Number")])]),s._v(" "),a("tr",[a("td",[s._v("file")]),s._v(" "),a("td",[s._v("the original file")]),s._v(" "),a("td",[s._v("File")])]),s._v(" "),a("tr",[a("td",[s._v("response")]),s._v(" "),a("td",[s._v("response data(try to parse to JSON)")]),s._v(" "),a("td",[s._v("Object/Array/String")])]),s._v(" "),a("tr",[a("td",[s._v("responseHeaders")]),s._v(" "),a("td",[s._v("all response headers")]),s._v(" "),a("td",[s._v("String")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("Basic usage")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload")]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//jsonplaceholder.typicode.com/photos/"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":simultaneous-uploads")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@files-added")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"filesAdded"')]),s._v(" />")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    filesAdded(files) {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" maxSize = "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1024")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1024")]),s._v(" "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 1M")]),s._v("\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("for")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" k "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("in")]),s._v(" files) {\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" file = files[k]\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (file.size > maxSize) {\n          file.ignore = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n        }\n      }\n    }\n  }\n}\n")])]),s._v(" "),a("p",[s._v("Set "),a("code",{pre:!0},[s._v("action")]),s._v(" to configure the upload target URL for the multipart POST request.")]),s._v(" "),a("p",[s._v("Set "),a("code",{pre:!0},[s._v("simultaneous-uploads")]),s._v(" to configure the max number of files uploading simultaneously .")]),s._v(" "),a("p",[s._v("The "),a("code",{pre:!0},[s._v("files-added")]),s._v(" event is used for file validation, and you can filter file by setting "),a("code",{pre:!0},[s._v("file.ignore = true")]),s._v(".")])]),s._v(" "),a("li",[a("p",[s._v("Compress and uploaded through Base64")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload")]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"action"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":simultaneous-uploads")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":process-file")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"processFile"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@file-submitted")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fileSubmitted"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" compress "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'../../modules/image'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action2")]),s._v(": {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("target")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'//jsonplaceholder.typicode.com/photos/'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'base64Value'")]),s._v("\n      }\n    }\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    processFile(file, next) {\n      compress(file, {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("compress")]),s._v(": {\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1600")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1600")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("quality")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0.5")]),s._v("\n        }\n      }, next)\n    },\n    fileSubmitted(file) {\n      file.base64Value = file.file.base64\n    }\n  }\n}\n")])]),s._v(" "),a("p",[s._v("The "),a("code",{pre:!0},[s._v("action")]),s._v(" is an object which contains "),a("code",{pre:!0},[s._v("target")]),s._v(" and "),a("code",{pre:!0},[s._v("prop")]),s._v(". the "),a("code",{pre:!0},[s._v("prop")]),s._v(" could configure which property  in file object will be uploaded).")]),s._v(" "),a("p",[s._v("The "),a("code",{pre:!0},[s._v("process-file")]),s._v(" is a function which is used to process the original file, like compress, "),a("code",{pre:!0},[s._v("next")]),s._v(" must be called with the processed file.")]),s._v(" "),a("p",[s._v("The "),a("code",{pre:!0},[s._v("file-submitted")]),s._v(" event will be trigged after the file is processed and added to the "),a("code",{pre:!0},[s._v("upload.files")]),s._v(" with a parameter -- the file object.")])]),s._v(" "),a("li",[a("p",[s._v("Use slots")]),s._v(" "),a("p",[s._v("You can use slots to define your custom HTML structure.")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload")]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"files"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"action"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@files-added")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"addedHandler"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@file-error")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"errHandler"')]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"clear-fix"')]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload-file")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(file, i) in files"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":file")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"file"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"i"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload-file")]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload-btn")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":multiple")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n        "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v(""),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n        "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Please click to upload ID card"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload-btn")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-upload")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'//jsonplaceholder.typicode.com/photos/'")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("files")]),s._v(": []\n    }\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    addedHandler() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" file = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".files["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("]\n      file && "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.upload.removeFile(file)\n    },\n    errHandler(file) {\n      "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// const msg = file.response.message")]),s._v("\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createToast({\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warn'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("txt")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Upload fail'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("time")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v("\n      }).show()\n    }\n  }\n}\n")])]),s._v(" "),a("p",[s._v("Custom Style:")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-stylus"}},[a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload")]),s._v("\n  "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-file")]),s._v(", "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-btn")]),s._v("\n    "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n    "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v("\n  "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-file")]),s._v("\n    "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n    + "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-btn")]),s._v("\n      "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": -"),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v("\n      "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n  "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-file-def")]),s._v("\n    "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("100%")]),s._v("\n    "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("100%")]),s._v("\n    "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cubeic-wrong")]),s._v("\n      "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": none\n  "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-upload-btn")]),s._v("\n    "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": flex\n    "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("align-items")]),s._v(": center\n    "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("justify-content")]),s._v(": center\n    > "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("div")]),s._v("\n      "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center\n    "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("i")]),s._v("\n      "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": inline-flex\n      "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("align-items")]),s._v(": center\n      "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("justify-content")]),s._v(": center\n      "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("50px")]),s._v("\n      "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("50px")]),s._v("\n      "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v("\n      "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("32px")]),s._v("\n      "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n      "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-style")]),s._v(": normal\n      "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v("\n      "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#333")]),s._v("\n      "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("50%")]),s._v("\n")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Accepted Values")]),s._v(" "),a("th",[s._v("Demo")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("action")]),s._v(" "),a("td",[s._v("upload action config")]),s._v(" "),a("td",[s._v("String/Object")]),s._v(" "),a("td",[s._v("''")]),s._v(" "),a("td",[s._v("{ target: '/upload' }")])]),s._v(" "),a("tr",[a("td",[s._v("max")]),s._v(" "),a("td",[s._v("max upload files number")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("10")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("auto")]),s._v(" "),a("td",[s._v("whether auto start upload")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("simultaneousUploads")]),s._v(" "),a("td",[s._v("the number of simultaneous uploads")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("1")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("processFile")]),s._v(" "),a("td",[s._v("process the original file")]),s._v(" "),a("td",[s._v("Function")]),s._v(" "),a("td",[s._v("function (file, next) { next(file) }")]),s._v(" "),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("action")]),s._v(" sub configuration")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If "),a("code",{pre:!0},[s._v("action")]),s._v(" is a string, it will be transformed into "),a("code",{pre:!0},[s._v("{ target: action }")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),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("target")]),s._v(" "),a("td",[s._v("the upload target URL for the multipart POST request")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("fileName")]),s._v(" "),a("td",[s._v("the name of the multipart POST parameter")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("'file'")])]),s._v(" "),a("tr",[a("td",[s._v("prop")]),s._v(" "),a("td",[s._v("which property in file object will be uploaded")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("'file'")])]),s._v(" "),a("tr",[a("td",[s._v("headers")]),s._v(" "),a("td",[s._v("extra headers to include in the multipart POST")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("{}")])]),s._v(" "),a("tr",[a("td",[s._v("data")]),s._v(" "),a("td",[s._v("extra data to include in the multipart POST")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("{}")])]),s._v(" "),a("tr",[a("td",[s._v("withCredentials")]),s._v(" "),a("td",[s._v("Standard CORS requests would not send or set any cookies by default. In order to include cookies as part of the request, you need to set the withCredentials property to true")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("timeout")]),s._v(" "),a("td",[s._v("upload request timeout value")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("0")])]),s._v(" "),a("tr",[a("td",[s._v("progressInterval")]),s._v(" "),a("td",[s._v("The time interval between progress reports (Unit: ms)")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("100")])]),s._v(" "),a("tr",[a("td",[s._v("checkSuccess")]),s._v(" "),a("td",[s._v("Check the response should be successful, the parameter is "),a("code",{pre:!0},[s._v("response")]),s._v(" object. If return true then it will be treated as successful")]),s._v(" "),a("td",[s._v("Function")]),s._v(" "),a("td",[s._v("function (res) { return true }")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("processFile")]),s._v(" sub configuration")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("A function with two parameters: "),a("code",{pre:!0},[s._v("(file, next)")]),s._v(", the "),a("code",{pre:!0},[s._v("file")]),s._v(" is the original file and the "),a("code",{pre:!0},[s._v("next")]),s._v(" callback must be called with the processed file.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Event Name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Parameters")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("files-added")]),s._v(" "),a("td",[s._v("triggers when files are added, usually used for file validation")]),s._v(" "),a("td",[s._v("original files")])]),s._v(" "),a("tr",[a("td",[s._v("file-submitted")]),s._v(" "),a("td",[s._v("triggers when a file is added to the "),a("code",{pre:!0},[s._v("upload.files")])]),s._v(" "),a("td",[s._v("the file object")])]),s._v(" "),a("tr",[a("td",[s._v("file-removed")]),s._v(" "),a("td",[s._v("triggers when a file is removed")]),s._v(" "),a("td",[s._v("the file object")])]),s._v(" "),a("tr",[a("td",[s._v("file-success")]),s._v(" "),a("td",[s._v("triggers when a file is uploaded successfully")]),s._v(" "),a("td",[s._v("the file object")])]),s._v(" "),a("tr",[a("td",[s._v("file-error")]),s._v(" "),a("td",[s._v("triggers when a file is failed to upload")]),s._v(" "),a("td",[s._v("the file object")])]),s._v(" "),a("tr",[a("td",[s._v("file-click")]),s._v(" "),a("td",[s._v("triggers when a file is clicked")]),s._v(" "),a("td",[s._v("the file object")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Method name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Parameter")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("start")]),s._v(" "),a("td",[s._v("start uploading")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("pause")]),s._v(" "),a("td",[s._v("pause uploading")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("retry")]),s._v(" "),a("td",[s._v("retry uploading")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("removeFile")]),s._v(" "),a("td",[s._v("remove file")]),s._v(" "),a("td",[s._v("the file object")])])])])}]}},YJZO:function(s,t,a){s.exports=a("aeWw")},aeWw:function(s,t,a){var e=a("VU/8")(null,a("S5Uo"),null,null,null);s.exports=e.exports}});