index.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. import React,{Component} from 'react';
  2. import {Icon, Spin, Upload,message} 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 url1 = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601012352754&di=d33308119328f5ed987bd90031f98cfa&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F27%2F81%2F01200000194677136358818023076.jpg';
  8. // const url2 = 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1601001245&di=60b5e1a42beb791524b46d7e3677f1f4&src=http://a2.att.hudong.com/13/86/01300001285722131043860050752.jpg';
  9. const uploadButton = (
  10. <div>
  11. <Icon type="plus" />
  12. <div className="ant-upload-text">点击上传</div>
  13. </div>
  14. );
  15. class ImgList extends Component{
  16. constructor(props) {
  17. super(props);
  18. this.state={
  19. seeMore: false,
  20. gallery: null,
  21. loading: true,
  22. imgLoadNum: 0,
  23. // fileListSize: 0,
  24. // doneFileSize: 0,
  25. }
  26. this.imgLoading = this.imgLoading.bind(this);
  27. this.setTimeOutObj = null;
  28. }
  29. componentDidMount() {
  30. this.setTimeOutObj = setTimeout(()=>{
  31. this.setState({
  32. gallery: new Viewer(document.getElementById(this.props.domId))
  33. },()=>{
  34. this.setState({
  35. loading: false
  36. })
  37. })
  38. },10000)
  39. }
  40. imgLoading(){
  41. if(Object.keys(this.props.uploadConfig).length !== 0){
  42. this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
  43. }else{
  44. let num = this.state.imgLoadNum + 1;
  45. if(num >= this.props.fileList.length){
  46. this.state.gallery && this.state.gallery.destroy();
  47. this.setState({
  48. gallery: new Viewer(document.getElementById(this.props.domId))
  49. },()=>{
  50. this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
  51. this.setState({
  52. loading: false
  53. })
  54. })
  55. }
  56. this.setState({
  57. imgLoadNum: num
  58. })
  59. }
  60. }
  61. componentWillUnmount() {
  62. this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
  63. }
  64. beforeUpload(file) {
  65. const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
  66. if (!isJPG) {
  67. message.error('只能上传图片文件!');
  68. return isJPG;
  69. }
  70. const isLt2M = file.size / 1024 / 1024 < 10;
  71. if (!isLt2M) {
  72. message.error('图片大小不能超过 10MB!');
  73. return isLt2M;
  74. }
  75. return isJPG && isLt2M;
  76. }
  77. render() {
  78. const {fileList} = this.props;
  79. if(!fileList || !Array.isArray(fileList)){
  80. return null;
  81. }
  82. return (
  83. <div className='ImgListComponent'>
  84. <div className='ImgList'>
  85. <Spin spinning={Object.keys(this.props.uploadConfig).length !== 0 ? false : (fileList.length === 0 ? false : this.state.loading)} tip="图片加载中...">
  86. <Upload
  87. {...this.props.uploadConfig}
  88. className={Object.keys(this.props.uploadConfig).length !== 0 ? "" : "demandDetailShow-upload" }
  89. listType="picture-card"
  90. fileList={
  91. Object.keys(this.props.uploadConfig).length !== 0 ?
  92. (
  93. fileList.map((v,i)=>{
  94. v.index = i;
  95. // v.url = i%2 ? url1 : url2;
  96. return v
  97. })
  98. ) : (
  99. this.state.seeMore?
  100. fileList.map((v,i)=>{
  101. v.index = i;
  102. // v.url = i%2 ? url1 : url2;
  103. return v
  104. }) :
  105. fileList.map((v,i)=>{
  106. v.index = i;
  107. // v.url = i%2 ? url1 : url2;
  108. return v
  109. }).slice(0,10)
  110. )
  111. }
  112. beforeUpload={this.beforeUpload}
  113. onPreview={(file) => {
  114. if(Object.keys(this.props.uploadConfig).length !== 0){
  115. //TODO 上传组件,查看图片临时解决方法,无法查看下一张
  116. let image = new Image();
  117. image.src = file.url || file.thumbUrl;
  118. let viewer = new Viewer(image, {
  119. hidden: function () {
  120. viewer.destroy();
  121. },
  122. });
  123. viewer.show();
  124. }else{
  125. this.state.gallery.view(file.index).show();
  126. }
  127. }}
  128. onChange={(infor)=>{
  129. if(infor.file.status){
  130. this.state.gallery && this.state.gallery.destroy();
  131. this.props.onChange(infor)
  132. }
  133. if(infor.file && infor.file.status === 'error'){
  134. message.error('图片上传失败,请重新上传!');
  135. }
  136. // this.setState({
  137. // fileListSize: infor.fileList.length
  138. // })
  139. // if(infor.file && infor.file.status === 'done'){
  140. // let num = this.state.doneFileSize + 1;
  141. // if(num >= infor.fileList.length){
  142. // console.log('所有都上传成功')
  143. // }
  144. // this.setState({
  145. // doneFileSize: num
  146. // })
  147. // }
  148. // console.log(infor.event)
  149. }}
  150. >
  151. {Object.keys(this.props.uploadConfig).length === 0 ? "" : uploadButton}
  152. </Upload>
  153. </Spin>
  154. </div>
  155. {fileList.length > 10 && Object.keys(this.props.uploadConfig).length === 0 ? <div className='seeMore' onClick={()=>{this.setState({seeMore:!this.state.seeMore})}}>
  156. {this.state.seeMore ? '收起' : '查看更多'}
  157. </div> : <div/>}
  158. <ul id={this.props.domId} style={{display:'none',zIndex:-1,}}>
  159. {
  160. fileList.map((value,index)=>(
  161. <li key={index}>
  162. <img src={value.url || value.thumbUrl} onLoad={()=>{
  163. this.imgLoading();
  164. }}/>
  165. </li>
  166. ))
  167. }
  168. </ul>
  169. </div>
  170. )
  171. }
  172. }
  173. ImgList.propTypes = {
  174. domId : PropTypes.string, //如果一个界面有多个该组件,需要传入自定义id名称,用于图片列表显示
  175. fileList: PropTypes.array.isRequired, //图片文件列表
  176. uploadConfig: PropTypes.object, //上传图片配置参数(需要上传图片时需要,存在与否,用于区分是否为上传或者为查看)
  177. onChange: PropTypes.func, //选择图片
  178. }
  179. ImgList.defaultProps = {
  180. domId: 'images',
  181. fileList: [],
  182. uploadConfig: {},
  183. onChange:()=>{}
  184. }
  185. export default ImgList;