图片上传控件。

ShadowEditor.UI/src/image/Image.jsx

@@ -8,23 +8,28 @@ import PropTypes from 'prop-types';
  */
 class Image extends React.Component {
     render() {
-        const { className, style, ...others } = this.props;
+        const { className, style, src, title } = this.props;
 
         return <img
             className={classNames('Image', className)}
             style={style}
-            {...others}></img>;
+            src={src}
+            title={title}></img>;
     }
 }
 
 Image.propTypes = {
     className: PropTypes.string,
     style: PropTypes.object,
+    src: PropTypes.string,
+    title: PropTypes.string,
 };
 
 Image.defaultProps = {
     className: null,
     style: null,
+    src: null,
+    title: null,
 };
 
 export default Image;

ShadowEditor.UI/src/image/ImageUploader.jsx

@@ -0,0 +1,81 @@
+import './css/ImageUploader.css';
+import classNames from 'classnames/bind';
+import PropTypes from 'prop-types';
+
+/**
+ * 图片上传控件
+ * @author tengge / https://github.com/tengge1
+ */
+class ImageUploader extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handleSelect = this.handleSelect.bind(this);
+        this.handleChange = this.handleChange.bind(this, props.onChange);
+    }
+
+    render() {
+        const { className, style, url, server, noImageText } = this.props;
+
+        if (url && url != 'null') {
+            return <img
+                className={classNames('ImageUploader', className)}
+                src={server + url}
+                onClick={this.handleSelect} />;
+        } else {
+            return <div
+                className={classNames('ImageUploader', 'empty', className)}
+                onClick={this.handleSelect}>
+                {noImageText}
+            </div>;
+        }
+    }
+
+    componentDidMount() {
+        var input = document.createElement('input');
+        input.type = 'file';
+        input.style.display = 'none';
+        input.addEventListener('change', this.handleChange);
+
+        document.body.appendChild(input);
+
+        this.input = input;
+    }
+
+    componentWillUnmount() {
+        var input = this.input;
+        input.removeEventListener('change', this.handleChange);
+
+        document.body.removeChild(input);
+
+        this.input = null;
+    }
+
+    handleSelect() {
+        this.input.click();
+    }
+
+    handleChange(onChange, event) {
+        onChange && onChange(event.target.files[0], event);
+    }
+}
+
+ImageUploader.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+    url: PropTypes.string,
+    server: PropTypes.string,
+    noImageText: PropTypes.string,
+    onChange: PropTypes.func,
+};
+
+ImageUploader.defaultProps = {
+    className: null,
+    style: null,
+    url: null,
+    server: '',
+    noImageText: 'No Image',
+    onChange: null,
+};
+
+export default ImageUploader;

ShadowEditor.UI/src/image/css/ImageUploader.css

@@ -0,0 +1,15 @@
+.ImageUploader {
+    max-width: 160px;
+    max-height: 120px;
+    border-radius: 2px;
+    cursor: pointer;
+}
+
+.ImageUploader.empty {
+    width: 160px;
+    height: 120px;
+    border: 1px solid #ccc;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}

ShadowEditor.UI/src/index.js

@@ -36,6 +36,7 @@ export { default as Icon } from './icon/Icon.jsx';
 // image
 export { default as Image } from './image/Image.jsx';
 export { default as ImageList } from './image/ImageList.jsx';
+export { default as ImageUploader } from './image/ImageUploader.jsx';
 
 // layout
 export { default as AbsoluteLayout } from './layout/AbsoluteLayout.jsx';

ShadowEditor.Web/src/editor2/assets/window/EditWindow.jsx

@@ -1,4 +1,4 @@
-import { classNames, PropTypes, Window, Content, Buttons, Form, FormControl, Label, Input, Select, Button } from '../../../third_party';
+import { classNames, PropTypes, Window, Content, Buttons, Form, FormControl, Label, Input, Select, ImageUploader, Button } from '../../../third_party';
 import Ajax from '../../../utils/Ajax';
 
 /**
@@ -13,12 +13,14 @@ class EditWindow extends React.Component {
             name: props.data.Name,
             categories: null,
             categoryID: props.data.CategoryID,
+            thumbnail: props.data.Thumbnail,
         };
 
         this.updateUI = this.updateUI.bind(this);
 
         this.handleNameChange = this.handleNameChange.bind(this);
         this.handleCategoryChange = this.handleCategoryChange.bind(this);
+        this.handleThumbnailChange = this.handleThumbnailChange.bind(this);
 
         this.handleSave = this.handleSave.bind(this, props.callback);
         this.handleClose = this.handleClose.bind(this);
@@ -26,11 +28,11 @@ class EditWindow extends React.Component {
 
     render() {
         const { typeName } = this.props;
-        const { name, categories, categoryID } = this.state;
+        const { name, categories, categoryID, thumbnail } = this.state;
 
         return <Window
             title={`编辑${typeName}`}
-            style={{ width: '320px', height: '280px', }}
+            style={{ width: '320px', height: '300px', }}
             mask={true}
             onClose={this.handleClose}>
             <Content>
@@ -43,6 +45,10 @@ class EditWindow extends React.Component {
                         <Label>{L_TYPE}</Label>
                         <Select name={'select'} options={categories} value={categoryID} onChange={this.handleCategoryChange}></Select>
                     </FormControl>
+                    <FormControl>
+                        <Label>{L_THUMBNAIL}</Label>
+                        <ImageUploader server={app.options.server} url={thumbnail} onChange={this.handleThumbnailChange}></ImageUploader>
+                    </FormControl>
                 </Form>
             </Content>
             <Buttons>
@@ -82,6 +88,10 @@ class EditWindow extends React.Component {
         });
     }
 
+    handleThumbnailChange(event) {
+
+    }
+
     handleSave() {
         const { data, saveUrl, callback } = this.props;
         const { name, categoryID } = this.state;