组件演示

[{"title":"基本用法","id":"components-uploader-demo-basic","tags":[],"filepath":"site/components/uploader/demo/basic.md","directory":"components/uploader/demo","filename":"basic","meta":{"title":"基本用法","description":"\n<p>基本用法。</p>\n","order":"0","filepath":"site/components/uploader/demo/basic.md","filename":"basic","directory":"components/uploader/demo","id":"components-uploader-demo-basic","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require(\"uxcore\");\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo1 = function (_React$Component) {\n _inherits(Demo1, _React$Component);\n\n function Demo1(props) {\n _classCallCheck(this, Demo1);\n\n var _this = _possibleConstructorReturn(this, (Demo1.__proto__ || Object.getPrototypeOf(Demo1)).call(this, props));\n\n _this.state = {\n fileList: []\n };\n return _this;\n }\n\n _createClass(Demo1, [{\n key: \"handleChange\",\n value: function handleChange(fileList) {\n this.setState({\n fileList: fileList\n });\n }\n }, {\n key: \"render\",\n value: function render() {\n return React.createElement(_uxcore.Uploader, {\n multiple: false,\n isOnlyImg: false,\n fileList: this.state.fileList,\n onChange: this.handleChange.bind(this),\n name: \"file\",\n url: \"http://eternalsky.me:8122/file/upload\",\n locale: \"en\"\n });\n }\n }]);\n\n return Demo1;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo1, null), document.getElementById('components-uploader-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Uploader } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo1</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n fileList: [],\n };\n }\n\n handleChange(fileList) {\n <span class=\"hljs-keyword\">this</span>.setState({\n fileList,\n });\n }\n render() {\n <span class=\"hljs-keyword\">return</span> (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Uploader</span>\n <span class=\"hljs-attribute\">multiple</span>=<span class=\"hljs-value\">{false}</span>\n <span class=\"hljs-attribute\">isOnlyImg</span>=<span class=\"hljs-value\">{false}</span>\n <span class=\"hljs-attribute\">fileList</span>=<span class=\"hljs-value\">{this.state.fileList}</span>\n <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{this.handleChange.bind(this)}</span>\n <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"file\"</span>\n <span class=\"hljs-attribute\">url</span>=<span class=\"hljs-value\">\"http://eternalsky.me:8122/file/upload\"</span>\n <span class=\"hljs-attribute\">locale</span>=<span class=\"hljs-value\">\"en\"</span>\n /&gt;</span>)</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo1</span> /&gt;</span>,\n document.getElementById('components-uploader-demo-basic')\n);</span></code></pre></div>"},"status":"public","toc":""},{"title":"附带提示文字","id":"components-uploader-demo-tips","tags":[],"filepath":"site/components/uploader/demo/tips.md","directory":"components/uploader/demo","filename":"tips","meta":{"title":"附带提示文字","description":"\n<p>附带提示文字。</p>\n","order":"1","filepath":"site/components/uploader/demo/tips.md","filename":"tips","directory":"components/uploader/demo","id":"components-uploader-demo-tips","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require(\"uxcore\");\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo1 = function (_React$Component) {\n _inherits(Demo1, _React$Component);\n\n function Demo1(props) {\n _classCallCheck(this, Demo1);\n\n var _this = _possibleConstructorReturn(this, (Demo1.__proto__ || Object.getPrototypeOf(Demo1)).call(this, props));\n\n _this.state = {\n fileList: []\n };\n return _this;\n }\n\n _createClass(Demo1, [{\n key: \"handleChange\",\n value: function handleChange(fileList) {\n this.setState({\n fileList: fileList\n });\n }\n }, {\n key: \"render\",\n value: function render() {\n var tips = React.createElement(\n \"span\",\n { className: \"tips\" },\n \"\\u9650\\u52360.5M\\u4EE5\\u5185\",\n React.createElement(\n \"em\",\n null,\n \"\\uFF08\\u652F\\u6301\\u683C\\u5F0F\\uFF1A.doc; .docx; .xls; .xlsx\\uFF09\"\n )\n );\n return React.createElement(_uxcore.Uploader, {\n multiple: false,\n isOnlyImg: false,\n tips: tips,\n fileList: this.state.fileList,\n onChange: this.handleChange.bind(this),\n name: \"file\",\n url: \"http://eternalsky.me:8122/file/upload\",\n locale: \"en\"\n });\n }\n }]);\n\n return Demo1;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo1, null), document.getElementById('components-uploader-demo-tips'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Uploader } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo1</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n fileList: [],\n };\n }\n\n handleChange(fileList) {\n <span class=\"hljs-keyword\">this</span>.setState({\n fileList,\n });\n }\n render() {\n <span class=\"hljs-keyword\">const</span> tips = <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">span</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"tips\"</span>&gt;</span>限制0.5M以内<span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">em</span>&gt;</span>(支持格式:.doc; .docx; .xls; .xlsx)<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">em</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">span</span>&gt;</span>;</span>\n <span class=\"hljs-keyword\">return</span> (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Uploader</span>\n <span class=\"hljs-attribute\">multiple</span>=<span class=\"hljs-value\">{false}</span>\n <span class=\"hljs-attribute\">isOnlyImg</span>=<span class=\"hljs-value\">{false}</span>\n <span class=\"hljs-attribute\">tips</span>=<span class=\"hljs-value\">{tips}</span>\n <span class=\"hljs-attribute\">fileList</span>=<span class=\"hljs-value\">{this.state.fileList}</span>\n <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{this.handleChange.bind(this)}</span>\n <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"file\"</span>\n <span class=\"hljs-attribute\">url</span>=<span class=\"hljs-value\">\"http://eternalsky.me:8122/file/upload\"</span>\n <span class=\"hljs-attribute\">locale</span>=<span class=\"hljs-value\">\"en\"</span>\n /&gt;</span>)</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo1</span> /&gt;</span>,\n document.getElementById('components-uploader-demo-tips')\n);</span></code></pre></div>"},"status":"public","toc":""},{"title":"图片上传","id":"components-uploader-demo-image","tags":[],"filepath":"site/components/uploader/demo/image.md","directory":"components/uploader/demo","filename":"image","meta":{"title":"图片上传","description":"\n<p>通过修改 accept 可以指定可以上传的图片类型,accept 的使用方式<a href=\"https://github.com/uxcore/uploadcore/blob/master/README.md#options-配置\">见此</a><br>注意:<a href=\"http://stackoverflow.com/questions/39187857/inputfile-accept-image-open-dialog-so-slow-with-chrome\">配置过多的 accept 会导致 chrome 下打开文件对话框缓慢</a></p>\n","order":"2","filepath":"site/components/uploader/demo/image.md","filename":"image","directory":"components/uploader/demo","id":"components-uploader-demo-image","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo3 = function (_React$Component) {\n _inherits(Demo3, _React$Component);\n\n function Demo3(props) {\n _classCallCheck(this, Demo3);\n\n var _this = _possibleConstructorReturn(this, (Demo3.__proto__ || Object.getPrototypeOf(Demo3)).call(this, props));\n\n _this.fileList = [{\n name: 'image.jpg',\n response: {\n url: 'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg',\n canRemove: false\n }\n }, {\n name: 'image2.jpg',\n response: {\n url: 'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg'\n }\n }];\n _this.state = {\n fileList: _this.fileList\n };\n return _this;\n }\n\n _createClass(Demo3, [{\n key: 'handleChange',\n value: function handleChange(fileList) {\n var me = this;\n console.log(fileList);\n me.setState({\n fileList: fileList\n });\n }\n }, {\n key: 'reset',\n value: function reset() {\n var me = this;\n me.setState({\n fileList: me.fileList\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(_uxcore.Uploader, { fileList: this.state.fileList,\n multiple: true,\n isOnlyImg: true,\n accept: 'jpg,jpeg,png,gif,webp,bmp',\n name: 'file',\n url: 'http://eternalsky.me:8122/file/upload',\n onCancel: function onCancel(file) {\n console.log(file);\n },\n onChange: this.handleChange.bind(this)\n }),\n React.createElement(\n _uxcore.Button,\n { type: 'outline', onClick: this.reset.bind(this) },\n '\\u91CD\\u7F6EfileList'\n )\n );\n }\n }]);\n\n return Demo3;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo3, null), document.getElementById('components-uploader-demo-image'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Uploader } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo3</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.fileList = [\n {\n name: <span class=\"hljs-string\">'image.jpg'</span>,\n response: {\n url: <span class=\"hljs-string\">'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg'</span>,\n canRemove: <span class=\"hljs-literal\">false</span>,\n },\n },\n {\n name: <span class=\"hljs-string\">'image2.jpg'</span>,\n response: {\n url: <span class=\"hljs-string\">'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg'</span>,\n },\n },\n ];\n <span class=\"hljs-keyword\">this</span>.state = {\n fileList: <span class=\"hljs-keyword\">this</span>.fileList,\n };\n }\n handleChange(fileList) {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n <span class=\"hljs-built_in\">console</span>.log(fileList);\n me.setState({\n fileList,\n });\n }\n\n reset() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n me.setState({\n fileList: me.fileList,\n });\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Uploader</span> <span class=\"hljs-attribute\">fileList</span>=<span class=\"hljs-value\">{this.state.fileList}</span>\n <span class=\"hljs-attribute\">multiple</span>\n <span class=\"hljs-attribute\">isOnlyImg</span>\n <span class=\"hljs-attribute\">accept</span>=<span class=\"hljs-value\">\"jpg,jpeg,png,gif,webp,bmp\"</span>\n <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"file\"</span>\n <span class=\"hljs-attribute\">url</span>=<span class=\"hljs-value\">\"http://eternalsky.me:8122/file/upload\"</span>\n <span class=\"hljs-attribute\">onCancel</span>=<span class=\"hljs-value\">{function</span> (<span class=\"hljs-attribute\">file</span>) { <span class=\"hljs-attribute\">console.log</span>(<span class=\"hljs-attribute\">file</span>); }}\n <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{this.handleChange.bind(this)}</span>\n /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{this.reset.bind(this)}</span>&gt;</span>重置fileList<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>)</span>;\n }\n}\n\n\nReactDOM.render((\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo3</span> /&gt;</span>\n)</span>, <span class=\"hljs-built_in\">document</span>.getElementById(<span class=\"hljs-string\">'components-uploader-demo-image'</span>));</code></pre></div>"},"status":"public","toc":""},{"title":"图片可视化上传","id":"components-uploader-demo-image-visual","tags":[],"filepath":"site/components/uploader/demo/image-visual.md","directory":"components/uploader/demo","filename":"image-visual","meta":{"title":"图片可视化上传","description":"\n<p>通过 isVisual 参数控制展示方式<br>通过修改 accept 可以指定可以上传的图片类型,accept 的使用方式<a href=\"https://github.com/uxcore/uploadcore/blob/master/README.md#options-配置\">见此</a><br>注意:<a href=\"http://stackoverflow.com/questions/39187857/inputfile-accept-image-open-dialog-so-slow-with-chrome\">配置过多的 accept 会导致 chrome 下打开文件对话框缓慢</a></p>\n","order":"3","filepath":"site/components/uploader/demo/image-visual.md","filename":"image-visual","directory":"components/uploader/demo","id":"components-uploader-demo-image-visual","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo3 = function (_React$Component) {\n _inherits(Demo3, _React$Component);\n\n function Demo3(props) {\n _classCallCheck(this, Demo3);\n\n var _this = _possibleConstructorReturn(this, (Demo3.__proto__ || Object.getPrototypeOf(Demo3)).call(this, props));\n\n _this.fileList = [{\n response: {\n url: 'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg',\n name: '测试用'\n }\n }, {\n response: {\n url: 'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg',\n name: '测试用'\n }\n }];\n _this.state = {\n fileList: _this.fileList\n };\n return _this;\n }\n\n _createClass(Demo3, [{\n key: 'handleChange',\n value: function handleChange(fileList) {\n var me = this;\n console.log(fileList);\n me.setState({\n fileList: fileList\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(_uxcore.Uploader, { fileList: this.state.fileList,\n multiple: true,\n isOnlyImg: true,\n isVisual: true,\n accept: 'jpg,jpeg,png,gif,webp,bmp',\n name: 'file',\n url: 'http://eternalsky.me:8122/file/upload',\n onCancel: function onCancel(file) {\n console.log(file);\n },\n onChange: this.handleChange.bind(this)\n })\n );\n }\n }]);\n\n return Demo3;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo3, null), document.getElementById('components-uploader-demo-image-visual'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Uploader } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo3</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.fileList = [\n {\n response: {\n url: <span class=\"hljs-string\">'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg'</span>,\n name: <span class=\"hljs-string\">'测试用'</span>,\n },\n },\n {\n response: {\n url: <span class=\"hljs-string\">'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg'</span>,\n name: <span class=\"hljs-string\">'测试用'</span>,\n },\n },\n ];\n <span class=\"hljs-keyword\">this</span>.state = {\n fileList: <span class=\"hljs-keyword\">this</span>.fileList,\n };\n }\n handleChange(fileList) {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n <span class=\"hljs-built_in\">console</span>.log(fileList);\n me.setState({\n fileList,\n });\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Uploader</span> <span class=\"hljs-attribute\">fileList</span>=<span class=\"hljs-value\">{this.state.fileList}</span>\n <span class=\"hljs-attribute\">multiple</span>\n <span class=\"hljs-attribute\">isOnlyImg</span>\n <span class=\"hljs-attribute\">isVisual</span>\n <span class=\"hljs-attribute\">accept</span>=<span class=\"hljs-value\">\"jpg,jpeg,png,gif,webp,bmp\"</span>\n <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"file\"</span>\n <span class=\"hljs-attribute\">url</span>=<span class=\"hljs-value\">\"http://eternalsky.me:8122/file/upload\"</span>\n <span class=\"hljs-attribute\">onCancel</span>=<span class=\"hljs-value\">{function</span> (<span class=\"hljs-attribute\">file</span>) { <span class=\"hljs-attribute\">console.log</span>(<span class=\"hljs-attribute\">file</span>); }}\n <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{this.handleChange.bind(this)}</span>\n /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>)</span>;\n }\n}\n\n\nReactDOM.render((\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo3</span> /&gt;</span>\n)</span>, <span class=\"hljs-built_in\">document</span>.getElementById(<span class=\"hljs-string\">'components-uploader-demo-image-visual'</span>));</code></pre></div>"},"status":"public","toc":""},{"title":"查看态","id":"components-uploader-demo-readonly","tags":[],"filepath":"site/components/uploader/demo/readonly.md","directory":"components/uploader/demo","filename":"readonly","meta":{"title":"查看态","description":"\n","order":"4","filepath":"site/components/uploader/demo/readonly.md","filename":"readonly","directory":"components/uploader/demo","id":"components-uploader-demo-readonly","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo3 = function (_React$Component) {\n _inherits(Demo3, _React$Component);\n\n function Demo3(props) {\n _classCallCheck(this, Demo3);\n\n var _this = _possibleConstructorReturn(this, (Demo3.__proto__ || Object.getPrototypeOf(Demo3)).call(this, props));\n\n _this.fileList = [{\n name: 'image.jpg',\n response: {\n url: 'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg',\n canRemove: false\n }\n }, {\n name: 'image2.jpg',\n response: {\n url: 'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg'\n }\n }];\n _this.state = {\n fileList: _this.fileList\n };\n return _this;\n }\n\n _createClass(Demo3, [{\n key: 'handleChange',\n value: function handleChange(fileList) {\n var me = this;\n console.log(fileList);\n me.setState({\n fileList: fileList\n });\n }\n }, {\n key: 'reset',\n value: function reset() {\n var me = this;\n me.setState({\n fileList: me.fileList\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'h2',\n null,\n '\\u9644\\u4EF6\\u578B'\n ),\n React.createElement(_uxcore.Uploader, {\n fileList: this.state.fileList,\n readOnly: true,\n name: 'file',\n url: 'http://eternalsky.me:8122/file/upload',\n onCancel: function onCancel(file) {\n console.log(file);\n },\n onChange: this.handleChange.bind(this)\n }),\n React.createElement(\n 'h2',\n null,\n '\\u56FE\\u7247\\u578B'\n ),\n React.createElement(_uxcore.Uploader, {\n fileList: this.state.fileList,\n isOnlyImg: true,\n readOnly: true,\n accept: 'jpg,jpeg,png,gif,webp,bmp',\n name: 'file',\n url: 'http://eternalsky.me:8122/file/upload',\n onCancel: function onCancel(file) {\n console.log(file);\n },\n onChange: this.handleChange.bind(this)\n })\n );\n }\n }]);\n\n return Demo3;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo3, null), document.getElementById('components-uploader-demo-readonly'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Uploader } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo3</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.fileList = [\n {\n name: <span class=\"hljs-string\">'image.jpg'</span>,\n response: {\n url: <span class=\"hljs-string\">'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg'</span>,\n canRemove: <span class=\"hljs-literal\">false</span>,\n },\n },\n {\n name: <span class=\"hljs-string\">'image2.jpg'</span>,\n response: {\n url: <span class=\"hljs-string\">'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg'</span>,\n },\n },\n ];\n <span class=\"hljs-keyword\">this</span>.state = {\n fileList: <span class=\"hljs-keyword\">this</span>.fileList,\n };\n }\n handleChange(fileList) {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n <span class=\"hljs-built_in\">console</span>.log(fileList);\n me.setState({\n fileList,\n });\n }\n\n reset() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n me.setState({\n fileList: me.fileList,\n });\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">h2</span>&gt;</span>附件型<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">h2</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Uploader</span>\n <span class=\"hljs-attribute\">fileList</span>=<span class=\"hljs-value\">{this.state.fileList}</span>\n <span class=\"hljs-attribute\">readOnly</span>\n <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"file\"</span>\n <span class=\"hljs-attribute\">url</span>=<span class=\"hljs-value\">\"http://eternalsky.me:8122/file/upload\"</span>\n <span class=\"hljs-attribute\">onCancel</span>=<span class=\"hljs-value\">{function</span> (<span class=\"hljs-attribute\">file</span>) { <span class=\"hljs-attribute\">console.log</span>(<span class=\"hljs-attribute\">file</span>); }}\n <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{this.handleChange.bind(this)}</span>\n /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">h2</span>&gt;</span>图片型<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">h2</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Uploader</span>\n <span class=\"hljs-attribute\">fileList</span>=<span class=\"hljs-value\">{this.state.fileList}</span>\n <span class=\"hljs-attribute\">isOnlyImg</span>\n <span class=\"hljs-attribute\">readOnly</span>\n <span class=\"hljs-attribute\">accept</span>=<span class=\"hljs-value\">\"jpg,jpeg,png,gif,webp,bmp\"</span>\n <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"file\"</span>\n <span class=\"hljs-attribute\">url</span>=<span class=\"hljs-value\">\"http://eternalsky.me:8122/file/upload\"</span>\n <span class=\"hljs-attribute\">onCancel</span>=<span class=\"hljs-value\">{function</span> (<span class=\"hljs-attribute\">file</span>) { <span class=\"hljs-attribute\">console.log</span>(<span class=\"hljs-attribute\">file</span>); }}\n <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{this.handleChange.bind(this)}</span>\n /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo3</span> /&gt;</span>,\n document.getElementById('components-uploader-demo-readonly')\n);</span></code></pre></div>"},"status":"public","toc":""},{"title":"多文件","id":"components-uploader-demo-multi","tags":[],"filepath":"site/components/uploader/demo/multi.md","directory":"components/uploader/demo","filename":"multi","meta":{"title":"多文件","description":"\n<p>多文件。</p>\n","order":"5","filepath":"site/components/uploader/demo/multi.md","filename":"multi","directory":"components/uploader/demo","id":"components-uploader-demo-multi","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _uxcore = require(\"uxcore\");\n\nReactDOM.render(React.createElement(_uxcore.Uploader, { multiple: true, name: \"file\", url: \"http://test.yanbingbing.com/upload.php\" }), document.getElementById('components-uploader-demo-multi'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Uploader } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\nReactDOM.render((\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Uploader</span> <span class=\"hljs-attribute\">multiple</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"file\"</span> <span class=\"hljs-attribute\">url</span>=<span class=\"hljs-value\">\"http://test.yanbingbing.com/upload.php\"</span> /&gt;</span>\n)</span>, <span class=\"hljs-built_in\">document</span>.getElementById(<span class=\"hljs-string\">'components-uploader-demo-multi'</span>));</code></pre></div>"},"status":"public","toc":""},{"title":"自定义上传区域","id":"components-uploader-demo-wrap1","tags":[],"filepath":"site/components/uploader/demo/wrap1.md","directory":"components/uploader/demo","filename":"wrap1","meta":{"title":"自定义上传区域","description":"\n<p>自定义上传区域。</p>\n","order":"6","filepath":"site/components/uploader/demo/wrap1.md","filename":"wrap1","directory":"components/uploader/demo","id":"components-uploader-demo-wrap1","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo1 = function (_React$Component) {\n _inherits(Demo1, _React$Component);\n\n function Demo1(props) {\n _classCallCheck(this, Demo1);\n\n var _this = _possibleConstructorReturn(this, (Demo1.__proto__ || Object.getPrototypeOf(Demo1)).call(this, props));\n\n _this.state = {\n fileList: []\n };\n return _this;\n }\n\n _createClass(Demo1, [{\n key: 'handleChange',\n value: function handleChange(fileList) {\n this.setState({\n fileList: fileList\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n _uxcore.Uploader,\n {\n multiple: false,\n isOnlyImg: false,\n fileList: this.state.fileList,\n onChange: this.handleChange.bind(this),\n name: 'file',\n url: 'http://eternalsky.me:8122/file/upload',\n locale: 'en'\n },\n React.createElement(\n 'a',\n null,\n '\\u81EA\\u5B9A\\u4E49\\u6587\\u5B57\\u4E0A\\u4F20'\n )\n );\n }\n }]);\n\n return Demo1;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo1, null), document.getElementById('components-uploader-demo-wrap1'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Uploader } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo1</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n fileList: [],\n };\n }\n\n handleChange(fileList) {\n <span class=\"hljs-keyword\">this</span>.setState({\n fileList,\n });\n }\n render() {\n <span class=\"hljs-keyword\">return</span> (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Uploader</span>\n <span class=\"hljs-attribute\">multiple</span>=<span class=\"hljs-value\">{false}</span>\n <span class=\"hljs-attribute\">isOnlyImg</span>=<span class=\"hljs-value\">{false}</span>\n <span class=\"hljs-attribute\">fileList</span>=<span class=\"hljs-value\">{this.state.fileList}</span>\n <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{this.handleChange.bind(this)}</span>\n <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"file\"</span>\n <span class=\"hljs-attribute\">url</span>=<span class=\"hljs-value\">\"http://eternalsky.me:8122/file/upload\"</span>\n <span class=\"hljs-attribute\">locale</span>=<span class=\"hljs-value\">\"en\"</span>\n &gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span>&gt;</span>自定义文字上传<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Uploader</span>&gt;</span>)</span>;\n }\n}\n\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo1</span> /&gt;</span>, document.getElementById('components-uploader-demo-wrap1'));</span></code></pre></div>"},"status":"public","toc":""}]

基本用法。

import { Uploader } from 'uxcore';

class Demo1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: [],
    };
  }

  handleChange(fileList) {
    this.setState({
      fileList,
    });
  }
  render() {
    return (<Uploader
      multiple={false}
      isOnlyImg={false}
      fileList={this.state.fileList}
      onChange={this.handleChange.bind(this)}
      name="file"
      url="http://eternalsky.me:8122/file/upload"
      locale="en"
    />);
  }
}

ReactDOM.render(
  <Demo1 />,
    document.getElementById('components-uploader-demo-basic')
);

附带提示文字。

import { Uploader } from 'uxcore';

class Demo1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: [],
    };
  }

  handleChange(fileList) {
    this.setState({
      fileList,
    });
  }
  render() {
    const tips = <span className="tips">限制0.5M以内<em>(支持格式:.doc; .docx; .xls; .xlsx)</em></span>;
    return (<Uploader
      multiple={false}
      isOnlyImg={false}
      tips={tips}
      fileList={this.state.fileList}
      onChange={this.handleChange.bind(this)}
      name="file"
      url="http://eternalsky.me:8122/file/upload"
      locale="en"
    />);
  }
}

ReactDOM.render(
  <Demo1 />,
  document.getElementById('components-uploader-demo-tips')
);

通过修改 accept 可以指定可以上传的图片类型,accept 的使用方式见此
注意:配置过多的 accept 会导致 chrome 下打开文件对话框缓慢

import { Uploader } from 'uxcore';
import { Button } from 'uxcore';

class Demo3 extends React.Component {
  constructor(props) {
    super(props);
    this.fileList = [
      {
        name: 'image.jpg',
        response: {
          url: 'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg',
          canRemove: false,
        },
      },
      {
        name: 'image2.jpg',
        response: {
          url: 'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg',
        },
      },
    ];
    this.state = {
      fileList: this.fileList,
    };
  }
  handleChange(fileList) {
    const me = this;
    console.log(fileList);
    me.setState({
      fileList,
    });
  }

  reset() {
    const me = this;
    me.setState({
      fileList: me.fileList,
    });
  }

  render() {
    return (<div>
      <Uploader fileList={this.state.fileList}
        multiple
        isOnlyImg
        accept="jpg,jpeg,png,gif,webp,bmp"
        name="file"
        url="http://eternalsky.me:8122/file/upload"
        onCancel={function (file) { console.log(file); }}
        onChange={this.handleChange.bind(this)}
      />
      <Button type="outline" onClick={this.reset.bind(this)}>重置fileList</Button>
    </div>);
  }
}


ReactDOM.render((
  <Demo3 />
), document.getElementById('components-uploader-demo-image'));

通过 isVisual 参数控制展示方式
通过修改 accept 可以指定可以上传的图片类型,accept 的使用方式见此
注意:配置过多的 accept 会导致 chrome 下打开文件对话框缓慢

import { Uploader } from 'uxcore';
import { Button } from 'uxcore';

class Demo3 extends React.Component {
  constructor(props) {
    super(props);
    this.fileList = [
      {
        response: {
          url: 'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg',
          name: '测试用',
        },
      },
      {
        response: {
          url: 'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg',
          name: '测试用',
        },
      },
    ];
    this.state = {
      fileList: this.fileList,
    };
  }
  handleChange(fileList) {
    const me = this;
    console.log(fileList);
    me.setState({
      fileList,
    });
  }

  render() {
    return (<div>
      <Uploader fileList={this.state.fileList}
        multiple
        isOnlyImg
        isVisual
        accept="jpg,jpeg,png,gif,webp,bmp"
        name="file"
        url="http://eternalsky.me:8122/file/upload"
        onCancel={function (file) { console.log(file); }}
        onChange={this.handleChange.bind(this)}
      />
    </div>);
  }
}


ReactDOM.render((
  <Demo3 />
), document.getElementById('components-uploader-demo-image-visual'));
import { Uploader } from 'uxcore';
import { Button } from 'uxcore';

class Demo3 extends React.Component {
  constructor(props) {
    super(props);
    this.fileList = [
      {
        name: 'image.jpg',
        response: {
          url: 'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg',
          canRemove: false,
        },
      },
      {
        name: 'image2.jpg',
        response: {
          url: 'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg',
        },
      },
    ];
    this.state = {
      fileList: this.fileList,
    };
  }
  handleChange(fileList) {
    const me = this;
    console.log(fileList);
    me.setState({
      fileList,
    });
  }

  reset() {
    const me = this;
    me.setState({
      fileList: me.fileList,
    });
  }

  render() {
    return (
      <div>
        <h2>附件型</h2>
        <Uploader
          fileList={this.state.fileList}
          readOnly
          name="file"
          url="http://eternalsky.me:8122/file/upload"
          onCancel={function (file) { console.log(file); }}
          onChange={this.handleChange.bind(this)}
        />
        <h2>图片型</h2>
        <Uploader
          fileList={this.state.fileList}
          isOnlyImg
          readOnly
          accept="jpg,jpeg,png,gif,webp,bmp"
          name="file"
          url="http://eternalsky.me:8122/file/upload"
          onCancel={function (file) { console.log(file); }}
          onChange={this.handleChange.bind(this)}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <Demo3 />,
    document.getElementById('components-uploader-demo-readonly')
);

多文件。

import { Uploader } from 'uxcore';

ReactDOM.render((
  <Uploader multiple name="file" url="http://test.yanbingbing.com/upload.php" />
), document.getElementById('components-uploader-demo-multi'));

自定义上传区域。

import { Uploader } from 'uxcore';
import { Button } from 'uxcore';

class Demo1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: [],
    };
  }

  handleChange(fileList) {
    this.setState({
      fileList,
    });
  }
  render() {
    return (<Uploader
      multiple={false}
      isOnlyImg={false}
      fileList={this.state.fileList}
      onChange={this.handleChange.bind(this)}
      name="file"
      url="http://eternalsky.me:8122/file/upload"
      locale="en"
    >
      <a>自定义文字上传</a>
    </Uploader>);
  }
}


ReactDOM.render(<Demo1 />, document.getElementById('components-uploader-demo-wrap1'));

上传组件, 封装UploadCore核心组件, 作为UI层.

API

reset()

重置文件队列

Props

name type default Since Ver. description
className
locale string zh-cn 1.1.10 国际化,目前支持 zh-cn, en-uspl-pl
fileList array [] 1.2.3 用于展示的文件列表
isOnlyImg boolean 是否以图片形式展示
core string/Core null 唯一标识或者UploadCore对象, 防止重复创建, 当传入UploadCore对象时,下列参数和事件设置均无效
name string 'file' 上传文件字段名称
url string '' 响应上传服务器地址
params object/array null 上传文件额外参数
headers array null 上传文件额外头
withCredentials bool false 上传文件是否自动附带cookie等信息
timeout int 0 上传超时限制 0表示不限制
chunkEnable bool false 是否允许分片上传
chunkSize size 0 文件分片大小, 默认单位b,0不分片
chunkRetries int 0 文件分片上传重试次数
chunkProcessThreads int 2 分片上传并发数
processThreads int 2 文件上传并发数
queueCapcity int 0 队列容量,0无限
autoPending bool true 是否选择后自动等待上传
multiple bool true 是否多选
accept string/array null 允许文件类型, chrome 下的已知问题
sizeLimit size 0 文件大小限制, 0表示不限制
preventDuplicate bool false 是否防止文件重复
actionOnQueueLimit string error 1.5.10 当队列超长时采取的策略:error, 抛错;cover, 覆盖

fileList 的最小格式 (格式稍显麻烦,是为了 onChange 的返回值可以传回给 fileList)

[
  {
    name: '', // 文件名称,列表形式必填
    ext: '', // 文件扩展名。例如 jpg。可选,不填时无法根据类型展示对应图标
    fileType: '', // 文件 mimetypes 类型。 例如 image/jpg。 可选,不填时无法根据类型展示对应图标
    response: {
      url: xxx,  // 文件链接,必填
      canRemove: true, // 是否可以删除,可选
      downloadUrl: 'xxxx', // 下载 URL,可选
    },
  },
];

Events

name arguments description
onChange fileList 在上传成功或文件移除后触发,返回文件队列,包括自己传入的fileList
onCancel file 文件移除后触发,上传的文件和默认列表的文件格式会有所不同,文件格式参见下面的 fileList 格式
onfileuploaderror File, Error 文件上传失败

onChange 的 fileList 的枚举格式有如下几种

[
    // 上传后的文件的格式, response 即服务器返回的值
  {
    type: 'upload',
    ext: file.ext,
    name: file.name,
    response: JSON.parse(file.response.rawResponse.rawResponse),
  },
    // 预览用文件的格式, `props.fileList` 相关, responce 即 `props.fileList` 里传入的格式。
  {
    type: 'list',
    response: file,
  },
    // 被删除的文件的格式
  {
    type: 'delete',
    subType: 'list/upload', // 与上面两种类型对应,用于解析 response
    response: file, // 与上面的 subType 相对应
  },
];

Other Events

name arguments description
onqueueuploadstart 队列上传开始
onqueueuploadend 队列上传结束
onqueuefileadded File 队列添加了一个文件
onqueuefilefiltered File, Error 队列过滤了一个文件
onqueueerror Error 队列错误
onstatchange Stat 文件统计发生变化
onfileuploadstart File 文件上传开始
onfileuploadpreparing FileRequest 文件上传准备时
onfileuploadprepared File, FileRequest 文件上传准备好了
onchunkuploadpreparing ChunkRequest 分块上传准备时
onchunkuploadcompleting ChunkResponse 分块上传结束时
onfileuploadprogress File, Progress 文件上传进度中
onfileuploadend File 文件上传结束
onfileuploadcompleting FileResponse 文件上传结束时
onfileuploadcompleted File, Status 文件上传完成了
onfilestatuschange File, Status 文件状态发生变化
onfilecancel File 文件退出

具体配置信息见https://github.com/uxcore/uxcore-uploadcore/blob/master/README.md.