index.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  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. // import PDFView from "../pdfupload";
  8. import pdfimg from '../../../../image/pdf_logo.png';
  9. const uploadButton = (
  10. <div>
  11. <Icon type="plus" />
  12. <div className="ant-upload-text" style={{ cursor: 'pointer' }}>点击上传</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. isPDF: false,
  28. file: {},
  29. }
  30. this.imgLoading = this.imgLoading.bind(this);
  31. this.beforeUpload = this.beforeUpload.bind(this);
  32. this.setTimeOutObj = null;
  33. }
  34. componentDidMount() {
  35. this.setTimeOutObj = setTimeout(() => {
  36. this.setState({
  37. gallery: new Viewer(document.getElementById(this.props.domId))
  38. }, () => {
  39. this.setState({
  40. loading: false
  41. })
  42. })
  43. }, 10000)
  44. }
  45. imgLoading() {
  46. if (Object.keys(this.props.uploadConfig).length !== 0) {
  47. this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
  48. } else {
  49. let num = this.state.imgLoadNum + 1;
  50. if (num >= this.props.fileList.length) {
  51. this.state.gallery && this.state.gallery.destroy();
  52. this.setState({
  53. gallery: new Viewer(document.getElementById(this.props.domId))
  54. }, () => {
  55. this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
  56. this.setState({
  57. loading: false
  58. })
  59. })
  60. }
  61. this.setState({
  62. imgLoadNum: num
  63. })
  64. }
  65. }
  66. beforeUpload(file) {
  67. const isLt2M = file.size / 1024 / 1024 < 10;
  68. if (!isLt2M) {
  69. message.error('文件大小不能超过 10MB!');
  70. return isLt2M;
  71. }
  72. if (this.props.accept) {
  73. if (isLt2M) {
  74. this.state.newUploadArr.push(file)
  75. this.setState({
  76. newUploadArr: this.state.newUploadArr
  77. })
  78. }
  79. return isLt2M;
  80. } else {
  81. const isJPG = file.type.split('/');
  82. // if (isJPG[0] !== 'image' && isJPG[0] !== "application") {
  83. // message.error('只能上传图片或pdf文件!');
  84. // return false;
  85. // }
  86. if (isJPG[0] !== 'image') {
  87. message.error('只能上传图片!');
  88. return false;
  89. }
  90. if (isJPG && isLt2M) {
  91. //用于计算当次选择的图片数量
  92. this.state.newUploadArr.push(file)
  93. this.setState({
  94. newUploadArr: this.state.newUploadArr
  95. })
  96. }
  97. return isJPG && isLt2M;
  98. }
  99. }
  100. componentWillUnmount() {
  101. this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
  102. }
  103. render() {
  104. const { fileList } = this.props;
  105. if (!fileList || !Array.isArray(fileList)) {
  106. return null;
  107. }
  108. return (
  109. <div className='ImgListComponent'>
  110. <div className='ImgList'>
  111. <Spin spinning={Object.keys(this.props.uploadConfig).length !== 0 ? false : (fileList.length === 0 ? false : this.state.loading)} tip="文件加载中...">
  112. <Upload
  113. {...this.props.uploadConfig}
  114. accept={this.props.accept || "image/*,application/pdf"}
  115. className={Object.keys(this.props.uploadConfig).length !== 0 ? "" : "demandDetailShow-upload"}
  116. listType={this.props.accept ? this.props.uploadConfig.listType : "picture-card"}
  117. fileList={
  118. Object.keys(this.props.uploadConfig).length !== 0 ?
  119. (
  120. fileList.map((v, i) => {
  121. v.index = i;
  122. v.url = v.url;
  123. v.thumbUrl = v.name.substr(v.name.lastIndexOf(".") + 1) == "pdf" ? pdfimg : v.url
  124. return v
  125. })
  126. ) : (
  127. this.state.seeMore ?
  128. fileList.map((v, i) => {
  129. v.index = i;
  130. v.url = v.url;
  131. v.thumbUrl = v.name.substr(v.name.lastIndexOf(".") + 1) == "pdf" ? pdfimg : v.url
  132. return v
  133. }) :
  134. fileList.map((v, i) => {
  135. v.index = i;
  136. v.url = v.url;
  137. v.thumbUrl = v.name.substr(v.name.lastIndexOf(".") + 1) == "pdf" ? pdfimg : v.url
  138. return v
  139. }).slice(0, 10)
  140. )
  141. }
  142. onPreview={(file) => {
  143. let types = file.name.substr(file.name.lastIndexOf(".") + 1)
  144. if (!!file.type && file.type.split('/')[0] == "application" || types == "pdf") {
  145. // let url = file.url || file.thumbUrl
  146. // this.setState({
  147. // isPDF: true,
  148. // file: url,
  149. // })
  150. let url = file.response.data.indexOf("/upload") == -1
  151. ? globalConfig.avatarHost + "/upload" + file.response.data
  152. : file.response.data
  153. window.open(url)
  154. } else {
  155. if (Object.keys(this.props.uploadConfig).length !== 0) {
  156. //TODO 上传组件,查看图片临时解决方法,无法查看下一张
  157. let image = new Image();
  158. image.src = file.url || file.thumbUrl;
  159. let viewer = new Viewer(image, {
  160. hidden: function () {
  161. viewer.destroy();
  162. },
  163. });
  164. viewer.show();
  165. } else {
  166. this.state.gallery.view(file.index).show();
  167. }
  168. }
  169. }}
  170. beforeUpload={this.beforeUpload}
  171. onChange={(infor) => {
  172. if (infor.file.status) {
  173. let newUploadNum = this.state.newUploadArr.length
  174. this.state.gallery && this.state.gallery.destroy();
  175. this.props.onChange(infor);
  176. if (infor.file && infor.file.status === 'error') {
  177. message.error('上传失败,请重新上传!');
  178. }
  179. //用于控制进度条
  180. if (infor.file && infor.file.status !== 'removed' && infor.event) {
  181. let percent = 0;
  182. this.state.newUploadInforArr[infor.file.uid] = infor.event.percent;
  183. this.setState({
  184. newUploadInforArr: this.state.newUploadInforArr
  185. })
  186. for (let i of Object.values(this.state.newUploadInforArr)) {
  187. percent += i
  188. }
  189. let percentNum = percent / newUploadNum / 100;
  190. this.setState({
  191. percent: percentNum
  192. })
  193. if (percentNum <= 1) {
  194. this.setState({
  195. uploadLoading: true,
  196. })
  197. }
  198. if (percentNum >= 1) {
  199. this.setState({
  200. percent: 1,
  201. }, () => {
  202. setTimeout(() => {
  203. this.setState({
  204. uploadLoading: false,
  205. }, () => {
  206. this.setState({
  207. percent: 0,
  208. newUploadArr: [],
  209. newUploadInforArr: {}
  210. })
  211. })
  212. }, 1500)
  213. })
  214. }
  215. } else if (infor.file && infor.file.status === 'removed') {
  216. this.setState({
  217. percent: 0,
  218. newUploadArr: [],
  219. newUploadInforArr: {}
  220. })
  221. }
  222. }
  223. }}
  224. >
  225. {Object.keys(this.props.uploadConfig).length === 0 ? "" : uploadButton}
  226. </Upload>
  227. </Spin>
  228. </div>
  229. {fileList.length > 10 && Object.keys(this.props.uploadConfig).length === 0
  230. ? <div className='seeMore' onClick={() => { this.setState({ seeMore: !this.state.seeMore }) }}>
  231. {this.state.seeMore ? '收起' : '查看更多'}
  232. </div>
  233. : <div />}
  234. <ul id={this.props.domId} style={{ display: 'none', zIndex: -1, }}>
  235. {
  236. fileList.map((value, index) => (
  237. <li key={index}>
  238. <img src={value.name.substr(value.name.lastIndexOf(".") + 1) == "pdf" ? pdfimg : (value.url || value.thumbUrl)} onLoad={() => {
  239. this.imgLoading();
  240. }} />
  241. </li>
  242. ))
  243. }
  244. </ul>
  245. {this.state.uploadLoading ? <div className='mask'>
  246. <Progress
  247. className='progress'
  248. type="circle"
  249. status="active"
  250. percent={parseFloat(this.state.percent * 100).toFixed(0)}
  251. />
  252. <div className='promptText'>文件上传中...</div>
  253. </div> : <div />}
  254. {/* {
  255. this.state.isPDF &&
  256. <PDFView
  257. fileType="pdf"
  258. visible={this.state.isPDF}
  259. file={this.state.file}
  260. closeFile={() => { this.setState({ isPDF: false }) }}
  261. />
  262. } */}
  263. </div>
  264. )
  265. }
  266. }
  267. ImgList.propTypes = {
  268. domId: PropTypes.string, //如果一个界面有多个该组件,需要传入自定义id名称,用于图片列表显示
  269. fileList: PropTypes.array.isRequired, //图片文件列表
  270. uploadConfig: PropTypes.object, //上传图片配置参数(需要上传图片时需要,存在与否,用于区分是否为上传或者为查看)
  271. onChange: PropTypes.func, //选择图片
  272. }
  273. ImgList.defaultProps = {
  274. domId: 'images',
  275. fileList: [],
  276. uploadConfig: {},
  277. onChange: () => { }
  278. }
  279. export default ImgList;