Skip to content

Commit c3c21df

Browse files
JackPuJackPu
committed
add new files
1 parent 29ade2a commit c3c21df

34 files changed

+1842
-92
lines changed

‎.eslintrc.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
"browser": 1
99
},
1010
"rules": {
11-
"prefer-template": 0
11+
"prefer-template": 0,
12+
"no-console": 0
1213
},
1314
"parserOptions": {
1415
"ecmaVersion": 6,

‎__sites_/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@
1414
"author": "JackPu <kakashjack@gmail.com>",
1515
"license": "MIT",
1616
"dependencies": {
17+
"core-image-xhr": "^1.0.1",
1718
"less-loader": "^2.2.3",
19+
"prop-types": "^15.5.10",
1820
"react": "^15.5.4",
1921
"react-dom": "^15.5.4",
2022
"react-highlight": "^0.10.0",

‎__sites_/src/app.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,25 @@ import EnHome from './components/doc/en/home';
99
import CnHome from './components/doc/cn/home';
1010
import CngetStarted from './components/doc/cn/get-started';
1111
import EngetStarted from './components/doc/en/get-started';
12+
import CnProps from './components/doc/cn/props';
13+
import EnProps from './components/doc/en/props';
14+
import CnEvents from './components/doc/cn/events';
15+
import EnEvents from './components/doc/en/events';
16+
import CnCustomComponent from './components/doc/cn/custom-component';
17+
import EnCustomComponent from './components/doc/en/custom-component';
18+
import CnCropImage from './components/doc/cn/crop-image';
19+
import EnCropImage from './components/doc/en/crop-image';
1220
import CnResizeImage from './components/doc/cn/resize-image';
21+
import EnResizeImage from './components/doc/en/resize-image';
1322
import CnCompressImage from './components/doc/cn/compress-image';
23+
import EnCompressImage from './components/doc/en/compress-image';
1424
import CnMultipleFile from './components/doc/cn/multiple-file';
25+
import EnMultipleFile from './components/doc/en/multiple-file';
1526
import CnPostData from './components/doc/cn/post-data';
27+
import EnPostData from './components/doc/en/post-data';
28+
import CnOthers from './components/doc/cn/others';
29+
import EnOthers from './components/doc/en/others';
30+
1631

1732
class App extends Component {
1833
render() {
@@ -28,10 +43,23 @@ class App extends Component {
2843
<Route path="/cn/home" component={CnHome} />
2944
<Route path="/en/get-started" component={EngetStarted} />
3045
<Route path="/cn/get-started" component={CngetStarted} />
46+
<Route path="/cn/props" component={CnProps} />
47+
<Route path="/cn/events" component={CnEvents} />
48+
<Route path="/en/events" component={EnEvents} />
49+
<Route path="/cn/custom-component" component={CnCustomComponent} />
50+
<Route path="/en/custom-component" component={EnCustomComponent} />
51+
<Route path="/en/props" component={EnProps} />
52+
<Route path="/cn/crop-image" component={CnCropImage} />
53+
<Route path="/en/crop-image" component={EnCropImage} />
3154
<Route path="/cn/resize-image" component={CnResizeImage} />
55+
<Route path="/en/resize-image" component={EnResizeImage} />
3256
<Route path="/cn/compress-image" component={CnCompressImage} />
57+
<Route path="/en/compress-image" component={EnCompressImage} />
3358
<Route path="/cn/multiple-file" component={CnMultipleFile} />
3459
<Route path="/cn/post-data" component={CnPostData} />
60+
<Route path="/en/post-data" component={EnPostData} />
61+
<Route path="/cn/others" component={CnOthers} />
62+
<Route path="/en/others" component={EnOthers} />
3563
</Router>
3664
</div>
3765
</div>

‎__sites_/src/components/doc/cn/compress-image.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,11 @@ export default class CnMultipleFile extends React.Component {
77
constructor(props) {
88
super(props);
99
this.state = {
10-
src: '',
10+
src: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
1111
};
1212
this.imageUploded = this.imageUploded.bind(this);
1313
}
14-
1514
render() {
16-
1715
return (
1816
<div className="components">
1917
<h3>压缩图片</h3>
@@ -25,16 +23,17 @@ export default class CnMultipleFile extends React.Component {
2523
className="btn btn-primary"
2624
inputOfFile="files"
2725
compress={50}
26+
data={{name: '你的名字'}}
2827
url="http://101.198.151.190/api/upload.php"
29-
imageUploaded={this.imageuploaded}>
28+
imageUploaded={this.imageUploded}>
3029
</ReactCoreImageUpload>
3130
</div>
3231
<h4>代码示例</h4>
3332
<Highlight>{`<ReactCoreImageUpload
3433
text="Upload Your Image"
3534
className="btn btn-primary"
3635
inputOfFile="files"
37-
compress="50"
36+
compress={50}
3837
data={{name: '你的名字'}}
3938
url="http://101.198.151.190/api/upload.php"
4039
imageUploaded={this.imageuploaded}>

‎__sites_/src/components/doc/cn/crop-image.js‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import React from 'react';
2+
import vendor from '../../../lib/vendor';
3+
import ReactCoreImageUpload from '../../../src/index';
4+
import Highlight from 'react-highlight.js';
5+
6+
export default class CnCropImage extends React.Component {
7+
constructor(props) {
8+
super(props);
9+
this.state = {
10+
src: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
11+
cropSrc: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
12+
cropArgs: {
13+
toCropImgH: '?',
14+
toCropImgW: '?',
15+
toCropImgX: '?',
16+
toCropImgY: '?',
17+
},
18+
};
19+
this.cropLocalImageUploaded = this.cropLocalImageUploaded.bind(this);
20+
this.crpoServerImageUploaded = this.crpoServerImageUploaded.bind(this);
21+
}
22+
23+
render() {
24+
return (
25+
<div className="components">
26+
<h3>裁剪图片</h3>
27+
<p>你可以通过设置 <code>crop</code>，来实现图片的裁剪。你可以指定图片裁剪的宽高，以及它的最大宽度和高度这些参数。</p>
28+
<p>设置 <code>cropRatio</code>来限制裁剪图片的形状，需要字符串的格式(1:1 或者2:3这种比例形式)，当然你可以设置为 auto 则不限制裁剪框的形状。</p>
29+
<p className="warnning"> 设置图片裁剪后，批量上传将不再生效。</p>
30+
<p>图片裁剪完有两种选择，选择<strong>本地裁剪<code>local</code></strong>或者<strong>服务端裁剪 <code>server</code></strong>。</p>
31+
<h4>本地裁剪</h4>
32+
<p>你可以将 crop 设置为 local 来实现本地裁剪。本地裁剪完成后发送给服务端接口的图片便是已经裁剪好的图片。</p>
33+
<div className="center">
34+
<div className="user">
35+
<img className="avatar" src={this.state.src}/>
36+
</div>
37+
<ReactCoreImageUpload
38+
className="btn btn-primary"
39+
imageUploaded={this.imageUploded}
40+
maxFileSize={5242880}
41+
crop="local"
42+
compress={50}
43+
url="http://101.198.151.190/api/upload.php" >
44+
</ReactCoreImageUpload>
45+
</div>
46+
<h4>服务端裁剪</h4>
47+
<p>服务端裁剪是指将原图片和裁剪的参数一起发给后端，方便服务端保存原图，以及对原图的其他操作，而服务端能够接收到post的参数如下:</p>
48+
<img src="http://img1.vued.vanthink.cn/vueda26e41f79edd6208ec92f6ce915e558a.png" />
49+
<p>每个字段具体说明如下:</p>
50+
<ul>
51+
<li><code>toCropImgX</code>: 裁剪的区域距离图片的左边缘的距离</li>
52+
<li><code>toCropImgY</code>: 裁剪的区域距离图片的上边缘的距离</li>
53+
<li><code>toCropImgW</code>: 裁剪的区域的宽度</li>
54+
<li><code>toCropImgH</code>: 裁剪的区域的高度</li>
55+
<li><code>maxWidth</code>: 你期望裁剪的图片的最大宽度</li>
56+
<li><code>maxHeight</code>: 你期望裁剪的图片的最大高度</li>
57+
</ul>
58+
<p>裁剪区域的样式，你可以自行复写样式进行覆盖</p>
59+
<h4>服务端裁剪DEMO</h4>
60+
<p>上传图片后可以看到裁剪的参数</p>
61+
<div className="center">
62+
<div className="user">
63+
<img className="avatar" src={this.state.cropSrc}/>
64+
</div>
65+
<ReactCoreImageUpload
66+
className="btn btn-primary"
67+
imageUploaded={this.crpoServerImageUploaded}
68+
maxFileSize={5242880}
69+
crop="server"
70+
url="http://101.198.151.190/api/crop.php" >
71+
</ReactCoreImageUpload>
72+
</div>
73+
<table className="m-table bordered" style={{ width: '100%' }}>
74+
<thead>
75+
<tr>
76+
<th>H</th>
77+
<th>W</th>
78+
<th>X</th>
79+
<th>Y</th>
80+
</tr>
81+
</thead>
82+
<tbody>
83+
<tr>
84+
<td>{this.state.cropArgs.toCropImgH}</td>
85+
<td>{this.state.cropArgs.toCropImgW}</td>
86+
<td>{this.state.cropArgs.toCropImgX}</td>
87+
<td>{this.state.cropArgs.toCropImgY}</td>
88+
</tr>
89+
</tbody>
90+
</table>
91+
<p>Code Example</p>
92+
93+
<p>设置<code>resize="server"</code>同理，会上传原图片，只是会在服务端的参数自动添加裁剪的比例 <code>imgChangeRatio</code>。</p>
94+
<a href="https://github.com/Vanthink-UED/vue-core-image-upload/blob/master/site/client/components/doc/cn/ResizeImage.vue">View Code Source</a>
95+
</div>
96+
);
97+
}
98+
99+
cropLocalImageUploaded(res) {
100+
this.src = res.data.src;
101+
}
102+
103+
crpoServerImageUploaded(res) {
104+
if (res.errcode === 0) {
105+
this.setState({
106+
cropArgs: {
107+
toCropImgH: parseInt(res.data.post.toCropImgH),
108+
toCropImgW: parseInt(res.data.post.toCropImgW),
109+
toCropImgX: parseInt(res.data.post.toCropImgX),
110+
toCropImgY: parseInt(res.data.post.toCropImgY)
111+
},
112+
cropSrc: 'http://img1.vued.vanthink.cn/vued41b900045d6d44f3b32e06049621b415.png',
113+
});
114+
115+
}
116+
}
117+
118+
};

‎__sites_/src/components/doc/cn/custom-component.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from 'react';
2+
import vendor from '../../../lib/vendor';
3+
import ReactCoreImageUpload from '../../../src/index';
4+
import Highlight from 'react-highlight.js';
5+
6+
export default class CustomComponent extends React.Component {
7+
constructor(props) {
8+
super(props);
9+
this.state = {
10+
src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
11+
};
12+
this.imageUploded = this.imageUploded.bind(this);
13+
}
14+
15+
render() {
16+
return (
17+
<div className="components">
18+
<h3>自定义组件样式</h3>
19+
<p>你可以设置组件的<code>class</code> 以及自己编写子组件的形式来控制组件的显示的样子。</p>
20+
<h4>Demo</h4>
21+
<p>下面是一个图片按钮。</p>
22+
<p className="user center">
23+
<img alt="avatar" className="avatar" src={this.state.src} />
24+
</p>
25+
<div className="center">
26+
<ReactCoreImageUpload
27+
className="btn"
28+
imageUploaded={this.imageUploded}
29+
maxFileSize={5242880}
30+
multiple={true}
31+
multipleSize={4}
32+
url="http://101.198.151.190/api/upload2.php" >
33+
<img alt="" width="150" src="http://img1.vued.vanthink.cn/vuededa653aa59d1a1287d9a6e18890a7e51.png" />
34+
</ReactCoreImageUpload>
35+
</div>
36+
<p>Code Example</p>
37+
<Highlight language="js">
38+
{`<ReactCoreImageUpload
39+
className="btn"
40+
imageUploaded={this.imageUploded}
41+
maxFileSize={5242880}
42+
multiple={true}
43+
multipleSize={4}
44+
url="http://101.198.151.190/api/upload2.php" >
45+
<img alt="" width="150" src="http://img1.vued.vanthink.cn/vuededa653aa59d1a1287d9a6e18890a7e51.png" />
46+
</ReactCoreImageUpload>`}
47+
</Highlight>
48+
</div>
49+
);
50+
}
51+
52+
imageUploded(res) {
53+
if (res.errcode === 0) {
54+
this.setState({
55+
fileList: res.data,
56+
});
57+
}
58+
}
59+
60+
};

‎__sites_/src/components/doc/cn/events.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import React from 'react';
2+
import ReactCoreImageUpload from '../../../src/index';
3+
import Highlight from 'react-highlight';
4+
5+
export default class Events extends React.Component {
6+
constructor(props) {
7+
super(props);
8+
this.state = {
9+
src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
10+
step: 0,
11+
};
12+
this.imagechanged = this.imagechanged.bind(this);
13+
this.imageuploading = this.imageuploading.bind(this);
14+
this.imageuploaded = this.imageuploaded.bind(this);
15+
}
16+
17+
render() {
18+
return (
19+
<div className="components">
20+
<h3>响应事件</h3>
21+
<p>我们在上传的不同阶段指定了不同的派发事件，你可以绑定每个事件的响应方法，实现对于流程的控制。</p>
22+
<h5>imageuploaded</h5>
23+
<p>当图片上传完，会调用该事件绑定的函数，并且用户可以获取到服务端返回的数据。</p>
24+
<h5>imagechanged</h5>
25+
<p>当input框改变选择图片时候触发，会返回input的获取的图片数据</p>
26+
<h5>imageuploading</h5>
27+
<p>当图片上传过程中触发，你可以自定义你需要处理的内容比如显示加载动画等。</p>
28+
<h5>errorhandle</h5>
29+
<p>当图片上传发生错误的时候触发，会返回错误状态信息</p>
30+
<h5>Code Example</h5>
31+
<div className="center">
32+
<img className="avatar" src={this.state.src} />
33+
</div>
34+
<div className="center">
35+
<ReactCoreImageUpload
36+
text="Upload Your Image"
37+
className="btn btn-primary"
38+
inputOfFile="files"
39+
url="http://101.198.151.190/api/upload.php"
40+
imageUploaded={this.imageuploaded}
41+
imageChanged={this.imagechanged}
42+
imageUploading={this.imageuploading}
43+
>
44+
</ReactCoreImageUpload>
45+
</div>
46+
<div>
47+
<table className="m-table bordered">
48+
<thead>
49+
<tr>
50+
<th>图片选中</th>
51+
<th>图片上传</th>
52+
<th>图片完成</th>
53+
</tr>
54+
</thead>
55+
<tbody>
56+
<tr>
57+
<td>
58+
<span className={this.state.step > 0 ? 'circle-bar active': 'circle-bar'}></span>
59+
</td>
60+
<td><span className={this.state.step > 1 ? 'circle-bar active': 'circle-bar'}></span></td>
61+
<td><span className={this.state.step > 2 ? 'circle-bar active': 'circle-bar'}></span></td>
62+
</tr>
63+
</tbody>
64+
</table>
65+
</div>
66+
<p>上面的演示，表示了上传自定义事件的执行状况，参考代码如下：</p>
67+
<Highlight language="js">
68+
{`<ReactCoreImageUpload
69+
text="Upload Your Image"
70+
className="btn btn-primary"
71+
inputOfFile="files"
72+
url="http://101.198.151.190/api/upload.php"
73+
imageUploaded={this.imageuploaded}
74+
imageChanged={this.imagechanged}
75+
imageUploading={this.imageuploading} />`}
76+
</Highlight>
77+
<a href="https://github.com/Vanthink-UED/vue-core-image-upload/blob/master/site/client/components/doc/cn/Events.vue">完整代码</a>
78+
</div>
79+
);
80+
}
81+
82+
imagechanged() {
83+
this.plus();
84+
}
85+
86+
imageuploading() {
87+
this.plus();
88+
}
89+
90+
imageuploaded() {
91+
this.plus();
92+
}
93+
94+
plus() {
95+
this.setState({
96+
step: this.state.step += 1,
97+
});
98+
}
99+
100+
}

‎__sites_/src/components/doc/cn/get-started.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default class GetStarted extends React.Component {
2020
<p>安装完成后，编辑源码</p>
2121
<Highlight className="javascript">
2222
{`import React from 'react';
23-
import ReactCoreImageUpload from '../../../src/react-core-image-upload';
23+
import ReactCoreImageUpload from 'react-core-image-upload';
2424
2525
export default class GetStarted extends React.Component {
2626
constructor(props) {

0 commit comments

Comments
 (0)