uxcore.js - React UI Component Set

组件演示

[{"title":"基本用法","id":"components-uploader-demo-basic","tags":[],"filepath":"site/components/uploader/demo/basic.md","directory":"components/uploader/demo","filename":"basic","meta":{"title":"基本用法","description":"\n基本用法。\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\">import { Uploader } from 'uxcore';\n\nclass Demo1 extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n fileList: [],\n };\n }\n\n handleChange(fileList) {\n this.setState({\n fileList,\n });\n }\n render() {\n return (<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\nReactDOM.render(\n <Demo1 />,\n document.getElementById('components-uploader-demo-basic')\n);</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附带提示文字。\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\">import { Uploader } from 'uxcore';\n\nclass Demo1 extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n fileList: [],\n };\n }\n\n handleChange(fileList) {\n this.setState({\n fileList,\n });\n }\n render() {\n const tips = <span className=\"tips\">限制0.5M以内<em>（支持格式：.doc; .docx; .xls; .xlsx）</em></span>;\n return (<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\nReactDOM.render(\n <Demo1 />,\n document.getElementById('components-uploader-demo-tips')\n);</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通过修改 accept 可以指定可以上传的图片类型，accept 的使用方式<a href=\"https://github.com/uxcore/uploadcore/blob/master/README.md#options-配置\">见此</a> 注意：<a href=\"http://stackoverflow.com/questions/39187857/inputfile-accept-image-open-dialog-so-slow-with-chrome\">配置过多的 accept 会导致 chrome 下打开文件对话框缓慢</a>\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\">import { Uploader } from 'uxcore';\nimport { Button } from 'uxcore';\n\nclass Demo3 extends React.Component {\n constructor(props) {\n super(props);\n this.fileList = [\n {\n name: 'image.jpg',\n response: {\n url: 'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg',\n canRemove: false,\n },\n },\n {\n name: 'image2.jpg',\n response: {\n url: 'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg',\n },\n },\n ];\n this.state = {\n fileList: this.fileList,\n };\n }\n handleChange(fileList) {\n const me = this;\n console.log(fileList);\n me.setState({\n fileList,\n });\n }\n\n reset() {\n const me = this;\n me.setState({\n fileList: me.fileList,\n });\n }\n\n render() {\n return (<div>\n <Uploader fileList={this.state.fileList}\n multiple\n isOnlyImg\n accept=\"jpg,jpeg,png,gif,webp,bmp\"\n name=\"file\"\n url=\"http://eternalsky.me:8122/file/upload\"\n onCancel={function (file) { console.log(file); }}\n onChange={this.handleChange.bind(this)}\n />\n <Button type=\"outline\" onClick={this.reset.bind(this)}>重置fileList</Button>\n </div>);\n }\n}\n\n\nReactDOM.render((\n <Demo3 />\n), document.getElementById('components-uploader-demo-image'));</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通过 isVisual 参数控制展示方式 通过修改 accept 可以指定可以上传的图片类型，accept 的使用方式<a href=\"https://github.com/uxcore/uploadcore/blob/master/README.md#options-配置\">见此</a> 注意：<a href=\"http://stackoverflow.com/questions/39187857/inputfile-accept-image-open-dialog-so-slow-with-chrome\">配置过多的 accept 会导致 chrome 下打开文件对话框缓慢</a>\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\">import { Uploader } from 'uxcore';\nimport { Button } from 'uxcore';\n\nclass Demo3 extends React.Component {\n constructor(props) {\n super(props);\n this.fileList = [\n {\n response: {\n url: 'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg',\n name: '测试用',\n },\n },\n {\n response: {\n url: 'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg',\n name: '测试用',\n },\n },\n ];\n this.state = {\n fileList: this.fileList,\n };\n }\n handleChange(fileList) {\n const me = this;\n console.log(fileList);\n me.setState({\n fileList,\n });\n }\n\n render() {\n return (<div>\n <Uploader fileList={this.state.fileList}\n multiple\n isOnlyImg\n isVisual\n accept=\"jpg,jpeg,png,gif,webp,bmp\"\n name=\"file\"\n url=\"http://eternalsky.me:8122/file/upload\"\n onCancel={function (file) { console.log(file); }}\n onChange={this.handleChange.bind(this)}\n />\n </div>);\n }\n}\n\n\nReactDOM.render((\n <Demo3 />\n), document.getElementById('components-uploader-demo-image-visual'));</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\">import { Uploader } from 'uxcore';\nimport { Button } from 'uxcore';\n\nclass Demo3 extends React.Component {\n constructor(props) {\n super(props);\n this.fileList = [\n {\n name: 'image.jpg',\n response: {\n url: 'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg',\n canRemove: false,\n },\n },\n {\n name: 'image2.jpg',\n response: {\n url: 'http://gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg',\n },\n },\n ];\n this.state = {\n fileList: this.fileList,\n };\n }\n handleChange(fileList) {\n const me = this;\n console.log(fileList);\n me.setState({\n fileList,\n });\n }\n\n reset() {\n const me = this;\n me.setState({\n fileList: me.fileList,\n });\n }\n\n render() {\n return (\n <div>\n <h2>附件型</h2>\n <Uploader\n fileList={this.state.fileList}\n readOnly\n name=\"file\"\n url=\"http://eternalsky.me:8122/file/upload\"\n onCancel={function (file) { console.log(file); }}\n onChange={this.handleChange.bind(this)}\n />\n <h2>图片型</h2>\n <Uploader\n fileList={this.state.fileList}\n isOnlyImg\n readOnly\n accept=\"jpg,jpeg,png,gif,webp,bmp\"\n name=\"file\"\n url=\"http://eternalsky.me:8122/file/upload\"\n onCancel={function (file) { console.log(file); }}\n onChange={this.handleChange.bind(this)}\n />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo3 />,\n document.getElementById('components-uploader-demo-readonly')\n);</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多文件。\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\">import { Uploader } from 'uxcore';\n\nReactDOM.render((\n <Uploader multiple name=\"file\" url=\"http://test.yanbingbing.com/upload.php\" />\n), document.getElementById('components-uploader-demo-multi'));</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自定义上传区域。\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\">import { Uploader } from 'uxcore';\nimport { Button } from 'uxcore';\n\nclass Demo1 extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n fileList: [],\n };\n }\n\n handleChange(fileList) {\n this.setState({\n fileList,\n });\n }\n render() {\n return (<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 <a>自定义文字上传</a>\n </Uploader>);\n }\n}\n\n\nReactDOM.render(<Demo1 />, document.getElementById('components-uploader-demo-wrap1'));</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-us` 和 `pl-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`	文件上传失败
onDownloadFile	file	下载时回调
onShowFile	file	预览时回调

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.