index.js 12 KB

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