-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
146 lines (139 loc) · 5.4 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
import {ImgUpload} from '../../src/index.js';
import {Overlay} from 'eg-overlay';
import React, { Component ,PropTypes} from 'react';
import ReactDom from 'react/lib/ReactDOM';
class Demo extends Component{
constructor(props,context){
super(props,context);
this.state={
imgSrc:'',
imgList:[]
}
}
filter(files, maxSize) {
var arrFiles = [];
for (var i = 0, file; file = files[i]; i++) {
if (file.type.indexOf("image") == 0 || file.type.indexOf("pdf") >= 0 || file.type.indexOf("msword") >= 0
|| file.type.indexOf("vnd.openxmlformats-officedocument.wordprocessingml.document") >= 0
|| file.type.indexOf("csv") >= 0 || file.type.indexOf("vnd.ms-excel") >= 0
|| file.type.indexOf("vnd.openxmlformats-officedocument.spreadsheetml.sheet") >= 0
|| file.type.indexOf("vnd.openxmlformats-officedocument.presentationml.presentation") >= 0
|| file.type.indexOf("vnd.ms-powerpoint") >= 0) {
arrFiles.push(file);
}else {
alert('只能上传图片、doc、docx、xls、xlsx、pdf文件,上传文件"' + file.name + '"错误。');
}
}
return arrFiles;
}
successCallback(file,response){
//此处应该设置为response的图片路径
this.setState({
imgSrc:'./img/1.jpg'
})
console.log('success',file,response);
}
failCallback(file,response){
this.setState({
imgSrc:'./img/1.jpg'
})
console.log('fail',file,response);
}
completeCallback(uploadInfo,successNum){
console.log('complete',uploadInfo,successNum)
}
delete(){
this.setState({
imgSrc:''
})
}
simulateSuccess(){
let fileName=Math.floor(Math.random()*10+1)+'.jpg';
console.log(fileName);
let imgList=this.state.imgList;
imgList.push(fileName);
this.setState({
imgList:imgList
});
}
remove(index){
let {imgList}=this.state;
imgList.splice(index,1);
this.setState({
imgList
});
}
edit(index){
this.refs.imgUploader.chooseFile();
}
render(){
let _this=this;
return (
<div>
<h2>场景1</h2>
<div>
只传1张图片,上传成功的图片会替换上传按钮背景图
(成功回调successCallback需要对接后端上传接口,因此用failCallback来模拟上传成功)
</div>
<Overlay
show='hover'
overlayContent={
<div style={{color:'#fff',fontSize:'11px'}}>
<span onClick={::this.delete}>删除</span>
</div>
}
>
<ImgUpload
multiple
className='my-class'
filter={::this.filter}
successCallback={::this.successCallback}
failCallback={::this.failCallback}
completeCallback={::this.completeCallback}
uploadUrl="http://beta.ask.sankuai.com/attachment/upload" >
{this.state.imgSrc?<img style={{width:'200px',height:'120px'}} src={this.state.imgSrc} />:
<img style={{width:'200px',height:'120px'}} src='./img/upload.png' />
}
</ImgUpload>
</Overlay>
<h2>场景2</h2>
<div>
上传多张图片
</div>
<div className='img-list'>
<ImgUpload ref='imgUploader'
multiple
className='my-class'
filter={::this.filter}
successCallback={::this.successCallback}
failCallback={::this.simulateSuccess}
completeCallback={::this.completeCallback}
uploadUrl="http://beta.ask.sankuai.com/attachment/upload" >
</ImgUpload>
{this.state.imgList.map(function(str,index){
return <div className='img-wrapper'>
<Overlay
position='bottom'
overlayContent={
<div style={{color:'#fff',fontSize:'11px'}}>
<span onClick={function(){
_this.edit(index);
}}>编辑</span>
<span onClick={function(){
_this.remove(index)
}} style={{marginLeft:'5px'}}>删除</span>
</div>
}>
<img src={'./img/'+str} />
</Overlay>
</div>
})}
</div>
</div>
)
}
}
ReactDom.render(
<Demo></Demo>,
document.getElementById('root')
);