index.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. import React,{Component} from 'react';
  2. import {Icon, message, Spin, Upload,Progress} from 'antd';
  3. import './index.less';
  4. import Viewer from 'viewerjs';
  5. import 'viewerjs/dist/viewer.css';
  6. import PropTypes from 'prop-types';
  7. const uploadButton = (
  8. <div>
  9. <Icon type="plus" />
  10. <div className="ant-upload-text">点击上传</div>
  11. </div>
  12. );
  13. class ImgList extends Component{
  14. constructor(props) {
  15. super(props);
  16. this.state={
  17. seeMore: false,
  18. gallery: null,
  19. loading: true,
  20. imgLoadNum: 0,
  21. uploadLoading: false,
  22. percent: 0,
  23. newUploadArr: [],
  24. newUploadInforArr: {},
  25. }
  26. this.imgLoading = this.imgLoading.bind(this);
  27. this.beforeUpload = this.beforeUpload.bind(this);
  28. this.setTimeOutObj = null;
  29. }
  30. componentDidMount() {
  31. this.setTimeOutObj = setTimeout(()=>{
  32. this.setState({
  33. gallery: new Viewer(document.getElementById(this.props.domId))
  34. },()=>{
  35. this.setState({
  36. loading: false
  37. })
  38. })
  39. },10000)
  40. }
  41. imgLoading(){
  42. if(Object.keys(this.props.uploadConfig).length !== 0){
  43. this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
  44. }else{
  45. let num = this.state.imgLoadNum + 1;
  46. if(num >= this.props.fileList.length){
  47. this.state.gallery && this.state.gallery.destroy();
  48. this.setState({
  49. gallery: new Viewer(document.getElementById(this.props.domId))
  50. },()=>{
  51. this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
  52. this.setState({
  53. loading: false
  54. })
  55. })
  56. }
  57. this.setState({
  58. imgLoadNum: num
  59. })
  60. }
  61. }
  62. beforeUpload(file) {
  63. const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
  64. if (!isJPG) {
  65. message.error('只能上传图片文件!');
  66. }
  67. const isLt2M = file.size / 1024 / 1024 < 10;
  68. if (!isLt2M) {
  69. message.error('图片大小不能超过 10MB!');
  70. }
  71. if(isJPG && isLt2M){
  72. //用于计算当次选择的图片数量
  73. this.state.newUploadArr.push(file)
  74. this.setState({
  75. newUploadArr:this.state.newUploadArr
  76. })
  77. }
  78. return isJPG && isLt2M;
  79. }
  80. componentWillUnmount() {
  81. this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
  82. }
  83. render() {
  84. const {fileList} = this.props;
  85. if(!fileList || !Array.isArray(fileList)){
  86. return null;
  87. }
  88. return (
  89. <div className='ImgListComponent'>
  90. <div className='ImgList'>
  91. <Spin spinning={Object.keys(this.props.uploadConfig).length !== 0 ? false : (fileList.length === 0 ? false : this.state.loading)} tip="图片加载中...">
  92. <Upload
  93. {...this.props.uploadConfig}
  94. className={Object.keys(this.props.uploadConfig).length !== 0 ? "" : "demandDetailShow-upload" }
  95. listType="picture-card"
  96. fileList={
  97. Object.keys(this.props.uploadConfig).length !== 0 ?
  98. (
  99. fileList.map((v,i)=>{
  100. v.index = i;
  101. return v
  102. })
  103. ) : (
  104. this.state.seeMore?
  105. fileList.map((v,i)=>{
  106. v.index = i;
  107. return v
  108. }) :
  109. fileList.map((v,i)=>{
  110. v.index = i;
  111. return v
  112. }).slice(0,10)
  113. )
  114. }
  115. onPreview={(file) => {
  116. if(Object.keys(this.props.uploadConfig).length !== 0){
  117. //TODO 上传组件,查看图片临时解决方法,无法查看下一张
  118. let image = new Image();
  119. image.src = file.url || file.thumbUrl;
  120. let viewer = new Viewer(image, {
  121. hidden: function () {
  122. viewer.destroy();
  123. },
  124. });
  125. viewer.show();
  126. }else{
  127. this.state.gallery.view(file.index).show();
  128. }
  129. }}
  130. beforeUpload={this.beforeUpload}
  131. onChange={(infor)=>{
  132. if(infor.file.status){
  133. let newUploadNum = this.state.newUploadArr.length
  134. this.state.gallery && this.state.gallery.destroy();
  135. this.props.onChange(infor);
  136. if(infor.file && infor.file.status === 'error'){
  137. message.error('图片上传失败,请重新上传!');
  138. }
  139. //用于控制进度条
  140. if(infor.file && infor.file.status !== 'removed' && infor.event){
  141. let percent = 0;
  142. this.state.newUploadInforArr[infor.file.uid] = infor.event.percent;
  143. this.setState({
  144. newUploadInforArr:this.state.newUploadInforArr
  145. })
  146. for(let i of Object.values(this.state.newUploadInforArr)){
  147. percent+= i
  148. }
  149. let percentNum = percent/newUploadNum/100;
  150. this.setState({
  151. percent:percentNum
  152. })
  153. if(percentNum <= 1) {
  154. this.setState({
  155. uploadLoading: true,
  156. })
  157. }
  158. if(percentNum >= 1){
  159. this.setState({
  160. percent: 1,
  161. },()=>{
  162. setTimeout(()=>{
  163. this.setState({
  164. uploadLoading: false,
  165. },()=>{
  166. this.setState({
  167. percent: 0,
  168. newUploadArr: [],
  169. newUploadInforArr: {}
  170. })
  171. })
  172. },1500)
  173. })
  174. }
  175. }else if(infor.file && infor.file.status === 'removed'){
  176. this.setState({
  177. percent: 0,
  178. newUploadArr: [],
  179. newUploadInforArr: {}
  180. })
  181. }
  182. }
  183. }}
  184. >
  185. {Object.keys(this.props.uploadConfig).length === 0 ? "" : uploadButton}
  186. </Upload>
  187. </Spin>
  188. </div>
  189. {fileList.length > 10 && Object.keys(this.props.uploadConfig).length === 0 ? <div className='seeMore' onClick={()=>{this.setState({seeMore:!this.state.seeMore})}}>
  190. {this.state.seeMore ? '收起' : '查看更多'}
  191. </div> : <div/>}
  192. <ul id={this.props.domId} style={{display:'none',zIndex:-1,}}>
  193. {
  194. fileList.map((value,index)=>(
  195. <li key={index}>
  196. <img src={value.url || value.thumbUrl} onLoad={()=>{
  197. this.imgLoading();
  198. }}/>
  199. </li>
  200. ))
  201. }
  202. </ul>
  203. {this.state.uploadLoading ? <div className='mask'>
  204. <Progress
  205. className='progress'
  206. type="circle"
  207. status="active"
  208. percent={parseFloat(this.state.percent * 100).toFixed(0)}
  209. />
  210. <div className='promptText'>图片上传中...</div>
  211. </div> : <div/>}
  212. </div>
  213. )
  214. }
  215. }
  216. ImgList.propTypes = {
  217. domId : PropTypes.string, //如果一个界面有多个该组件,需要传入自定义id名称,用于图片列表显示
  218. fileList: PropTypes.array.isRequired, //图片文件列表
  219. uploadConfig: PropTypes.object, //上传图片配置参数(需要上传图片时需要,存在与否,用于区分是否为上传或者为查看)
  220. onChange: PropTypes.func, //选择图片
  221. }
  222. ImgList.defaultProps = {
  223. domId: 'images',
  224. fileList: [],
  225. uploadConfig: {},
  226. onChange:()=>{}
  227. }
  228. export default ImgList;