提交 e8a67704 authored 作者: 钟是志's avatar 钟是志

附件上传的预览图片组件修改

上级 ad18dfa9
/** /**
* web端文件预览功能 * web端文件预览功能
*/ */
import React, { Component } from 'react'; import React, {Component} from 'react';
import { Modal, Popconfirm } from 'antd'; import {Modal, Popconfirm} from 'antd';
import { checkIsImage } from '@/webPublic/one_stop_public/libs/UploadCom'; import {checkIsImage} from '@/webPublic/one_stop_public/libs/UploadCom';
const FileViewer = CLIENT_TYPE == 'mobile' ? null : require('react-file-viewer'); const FileViewer = CLIENT_TYPE == 'mobile' ? null : require('react-file-viewer');
...@@ -13,6 +13,7 @@ export default class index extends Component { ...@@ -13,6 +13,7 @@ export default class index extends Component {
this.state = { this.state = {
visible: false, visible: false,
}; };
this.imageDom = null;
} }
showModal = () => { showModal = () => {
...@@ -33,13 +34,13 @@ export default class index extends Component { ...@@ -33,13 +34,13 @@ export default class index extends Component {
}); });
}; };
download = () => { download = () => {
let { path, pathName } = this.props; let {path, pathName} = this.props;
window.open(path, '_blank'); window.open(path, '_blank');
}; };
render() { render() {
let { path, pathName, width, height } = this.props; let {path, pathName, width, height} = this.props;
const { visible } = this.state; const {visible} = this.state;
let isShow = false; let isShow = false;
let type; let type;
let isImg = checkIsImage(pathName); let isImg = checkIsImage(pathName);
...@@ -53,7 +54,7 @@ export default class index extends Component { ...@@ -53,7 +54,7 @@ export default class index extends Component {
isShow = true; isShow = true;
} }
} }
if(isShow){ if (isShow) {
type = pathName.split('.'); type = pathName.split('.');
type = Array.isArray(type) && type.length && type[type.length - 1]; type = Array.isArray(type) && type.length && type[type.length - 1];
} }
...@@ -69,6 +70,7 @@ export default class index extends Component { ...@@ -69,6 +70,7 @@ export default class index extends Component {
cancelText='预览'> cancelText='预览'>
{isImg ? ( {isImg ? (
<img <img
ref={(node)=>{ this.imageDom = node;}}
style={{ style={{
width: width ? width : '100px', width: width ? width : '100px',
height: height ? height : 'auto', height: height ? height : 'auto',
...@@ -93,6 +95,8 @@ export default class index extends Component { ...@@ -93,6 +95,8 @@ export default class index extends Component {
visible={visible} visible={visible}
width={1200} width={1200}
destroyOnClose destroyOnClose
getContainer={false}
centered={true}
onOk={this.handleOk} onOk={this.handleOk}
onCancel={this.handleCancel}> onCancel={this.handleCancel}>
{type === 'pdf' ? ( {type === 'pdf' ? (
...@@ -106,8 +110,11 @@ export default class index extends Component { ...@@ -106,8 +110,11 @@ export default class index extends Component {
) : ( ) : (
<div <div
style={{ style={{
height: 600, height: 650,
}}> }}>
<a target={'_blank'} href={path}>
下载文件
</a>
{FileViewer && ( {FileViewer && (
<FileViewer <FileViewer
fileType={type} fileType={type}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论