index.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345
  1. import React, { Component } from 'react';
  2. import { Icon, message, Spin, Upload, Progress, Modal } from 'antd';
  3. import $ from 'jquery/src/ajax';
  4. import './index.less';
  5. import Viewer from 'viewerjs';
  6. import 'viewerjs/dist/viewer.css';
  7. import PropTypes from 'prop-types';
  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.onRemove = this.onRemove.bind(this);
  33. this.setTimeOutObj = null;
  34. }
  35. componentDidMount() {
  36. this.setTimeOutObj = setTimeout(() => {
  37. this.setState({
  38. gallery: new Viewer(document.getElementById(this.props.domId))
  39. }, () => {
  40. this.setState({
  41. loading: false
  42. })
  43. })
  44. }, 10000)
  45. }
  46. imgLoading() {
  47. if (Object.keys(this.props.uploadConfig).length !== 0) {
  48. this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
  49. } else {
  50. let num = this.state.imgLoadNum + 1;
  51. if (num >= this.props.fileList.length) {
  52. this.state.gallery && this.state.gallery.destroy();
  53. this.setState({
  54. gallery: new Viewer(document.getElementById(this.props.domId))
  55. }, () => {
  56. this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
  57. this.setState({
  58. loading: false
  59. })
  60. })
  61. }
  62. this.setState({
  63. imgLoadNum: num
  64. })
  65. }
  66. }
  67. beforeUpload(file) {
  68. const isLt2M = file.size / 1024 / 1024 < 10;
  69. if (!isLt2M) {
  70. message.error('文件大小不能超过 10MB!');
  71. return isLt2M;
  72. }
  73. if (this.props.accept) {
  74. if (isLt2M) {
  75. this.state.newUploadArr.push(file)
  76. this.setState({
  77. newUploadArr: this.state.newUploadArr
  78. })
  79. }
  80. return isLt2M;
  81. } else {
  82. const isJPG = file.type.split('/');
  83. // if (isJPG[0] !== 'image' && isJPG[0] !== "application") {
  84. // message.error('只能上传图片或pdf文件!');
  85. // return false;
  86. // }
  87. if (isJPG[0] !== 'image') {
  88. message.error('只能上传图片!');
  89. return false;
  90. }
  91. if (isJPG && isLt2M) {
  92. //用于计算当次选择的图片数量
  93. this.state.newUploadArr.push(file)
  94. this.setState({
  95. newUploadArr: this.state.newUploadArr
  96. })
  97. }
  98. return isJPG && isLt2M;
  99. }
  100. }
  101. async onRemove(info) {
  102. const { orderNo, sign, deleteApi } = this.props
  103. if (!deleteApi) {
  104. return
  105. }
  106. let name = info.response.data
  107. let remove = new Promise(function (resolve, reject) {
  108. Modal.confirm({
  109. title: '操作确认',
  110. content: '是否确认删除?',
  111. okText: '确定',
  112. cancelText: '取消',
  113. onOk() {
  114. $.ajax({
  115. method: "post",
  116. dataType: "json",
  117. crossDomain: false,
  118. url: globalConfig.context + deleteApi,
  119. data: {
  120. orderNo,
  121. sign,
  122. fileName: name
  123. }
  124. }).done(function (data) {
  125. if (!data.error.length) {
  126. resolve(true);
  127. } else {
  128. };
  129. }.bind(this));
  130. },
  131. onCancel() {
  132. resolve(false)
  133. },
  134. })
  135. });
  136. return await remove;
  137. }
  138. componentWillUnmount() {
  139. this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
  140. }
  141. render() {
  142. const { fileList } = this.props;
  143. if (!fileList || !Array.isArray(fileList)) {
  144. return null;
  145. }
  146. return (
  147. <div className='ImgListComponent'>
  148. <div className='ImgList'>
  149. <Spin spinning={Object.keys(this.props.uploadConfig).length !== 0 ? false : (fileList.length === 0 ? false : this.state.loading)} tip="文件加载中...">
  150. <Upload
  151. {...this.props.uploadConfig}
  152. accept={this.props.accept || "image/*,application/pdf"}
  153. className={Object.keys(this.props.uploadConfig).length !== 0 ? "" : "demandDetailShow-upload"}
  154. listType={this.props.accept ? this.props.uploadConfig.listType : "picture-card"}
  155. fileList={
  156. Object.keys(this.props.uploadConfig).length !== 0 ?
  157. (
  158. fileList.map((v, i) => {
  159. v.index = i;
  160. v.url = v.url;
  161. v.thumbUrl = v.name.substr(v.name.lastIndexOf(".") + 1) == "pdf" ? pdfimg : v.url
  162. return v
  163. })
  164. ) : (
  165. this.state.seeMore ?
  166. fileList.map((v, i) => {
  167. v.index = i;
  168. v.url = v.url;
  169. v.thumbUrl = v.name.substr(v.name.lastIndexOf(".") + 1) == "pdf" ? pdfimg : v.url
  170. return v
  171. }) :
  172. fileList.map((v, i) => {
  173. v.index = i;
  174. v.url = v.url;
  175. v.thumbUrl = v.name.substr(v.name.lastIndexOf(".") + 1) == "pdf" ? pdfimg : v.url
  176. return v
  177. }).slice(0, 10)
  178. )
  179. }
  180. onPreview={(file) => {
  181. let types = file.name.substr(file.name.lastIndexOf(".") + 1)
  182. if (!!file.type && file.type.split('/')[0] == "application" || types == "pdf") {
  183. let url = file.response.data.indexOf("/upload") == -1
  184. ? globalConfig.avatarHost + "/upload" + file.response.data
  185. : file.response.data
  186. this.setState({
  187. isPDF: true,
  188. file: url,
  189. })
  190. // window.open(url)
  191. } else {
  192. if (Object.keys(this.props.uploadConfig).length !== 0) {
  193. //TODO 上传组件,查看图片临时解决方法,无法查看下一张
  194. let image = new Image();
  195. image.src = file.url || file.thumbUrl;
  196. let viewer = new Viewer(image, {
  197. hidden: function () {
  198. viewer.destroy();
  199. },
  200. });
  201. viewer.show();
  202. } else {
  203. this.state.gallery.view(file.index).show();
  204. }
  205. }
  206. }}
  207. beforeUpload={this.beforeUpload}
  208. onChange={(infor) => {
  209. if (infor.file.status) {
  210. let newUploadNum = this.state.newUploadArr.length
  211. this.state.gallery && this.state.gallery.destroy();
  212. this.props.onChange(infor);
  213. if (infor.file && infor.file.status === 'error') {
  214. message.error('上传失败,请重新上传!');
  215. }
  216. //用于控制进度条
  217. if (infor.file && infor.file.status !== 'removed' && infor.event) {
  218. let percent = 0;
  219. this.state.newUploadInforArr[infor.file.uid] = infor.event.percent;
  220. this.setState({
  221. newUploadInforArr: this.state.newUploadInforArr
  222. })
  223. for (let i of Object.values(this.state.newUploadInforArr)) {
  224. percent += i
  225. }
  226. let percentNum = percent / newUploadNum / 100;
  227. this.setState({
  228. percent: percentNum
  229. })
  230. if (percentNum <= 1) {
  231. this.setState({
  232. uploadLoading: true,
  233. })
  234. }
  235. if (percentNum >= 1) {
  236. this.setState({
  237. percent: 1,
  238. }, () => {
  239. setTimeout(() => {
  240. this.setState({
  241. uploadLoading: false,
  242. }, () => {
  243. this.setState({
  244. percent: 0,
  245. newUploadArr: [],
  246. newUploadInforArr: {}
  247. })
  248. })
  249. }, 1500)
  250. })
  251. }
  252. } else if (infor.file && infor.file.status === 'removed') {
  253. this.setState({
  254. percent: 0,
  255. newUploadArr: [],
  256. newUploadInforArr: {}
  257. })
  258. }
  259. }
  260. }}
  261. onRemove={this.onRemove}
  262. >
  263. {Object.keys(this.props.uploadConfig).length === 0 ? "" : uploadButton}
  264. </Upload>
  265. </Spin>
  266. </div>
  267. {fileList.length > 10 && Object.keys(this.props.uploadConfig).length === 0
  268. ? <div className='seeMore' onClick={() => { this.setState({ seeMore: !this.state.seeMore }) }}>
  269. {this.state.seeMore ? '收起' : '查看更多'}
  270. </div>
  271. : <div />}
  272. <ul id={this.props.domId} style={{ display: 'none', zIndex: -1, }}>
  273. {
  274. fileList.map((value, index) => (
  275. <li key={index}>
  276. <img src={value.name.substr(value.name.lastIndexOf(".") + 1) == "pdf" ? pdfimg : (value.url || value.thumbUrl)} onLoad={() => {
  277. this.imgLoading();
  278. }} />
  279. </li>
  280. ))
  281. }
  282. </ul>
  283. {this.state.uploadLoading ? <div className='mask'>
  284. <Progress
  285. className='progress'
  286. type="circle"
  287. status="active"
  288. percent={parseFloat(this.state.percent * 100).toFixed(0)}
  289. />
  290. <div className='promptText'>文件上传中...</div>
  291. </div> : <div />}
  292. {
  293. // PDF文件预览弹窗
  294. this.state.isPDF &&
  295. <Modal
  296. // maskClosable={false}
  297. wrapClassName={"pdfmodal"}
  298. visible={this.state.isPDF}
  299. className="admin-desc-content"
  300. footer=""
  301. title=""
  302. width="1200px"
  303. onCancel={() => {
  304. this.setState({
  305. isPDF: false,
  306. file: "",
  307. })
  308. }}
  309. >
  310. <embed src={this.state.file} type="application/pdf" style={{ width: "100%", height: 700 }} />
  311. </Modal>
  312. }
  313. </div>
  314. )
  315. }
  316. }
  317. ImgList.propTypes = {
  318. domId: PropTypes.string, //如果一个界面有多个该组件,需要传入自定义id名称,用于图片列表显示
  319. fileList: PropTypes.array.isRequired, //图片文件列表
  320. uploadConfig: PropTypes.object, //上传图片配置参数(需要上传图片时需要,存在与否,用于区分是否为上传或者为查看)
  321. onChange: PropTypes.func, //选择图片
  322. }
  323. ImgList.defaultProps = {
  324. domId: 'images',
  325. fileList: [],
  326. uploadConfig: {},
  327. onChange: () => { }
  328. }
  329. export default ImgList;