Skip to content

W
WebPublic
提交 444a3263 authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

图片上传组件预览

上级 83374e52
隐藏空白字符变更
内嵌 并排
正在显示 包含 116 行增加 和 142 行删除
one_stop_public/filePreview/index.jsx
浏览文件 @ 444a3263
...@@ -3,150 +3,124 @@ ...@@ -3,150 +3,124 @@
*/ */
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';
const FileViewer = CLIENT_TYPE == 'mobile' ? null : require('react-file-viewer'); const FileViewer = CLIENT_TYPE == 'mobile' ? null : require('react-file-viewer');
export default class index extends Component { export default class index extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
visible: false, visible: false,
}; };
} }
showModal = () => {
this.setState({ showModal = () => {
visible: true, this.setState({
}); visible: true,
}; });
};
handleOk = (e) => {
this.setState({
visible: false,
});
};
handleCancel = (e) => {
this.setState({
visible: false,
});
};
download = () => {
let { path, pathName } = this.props;
window.open(path, '_blank');
};
handleOk = (e) => { render() {
this.setState({ let { path, pathName, width, height } = this.props;
visible: false, const { visible } = this.state;
}); let isShow = false;
}; let type;
let isImg = checkIsImage(pathName);
if (isImg) {
isShow = true;
} else {
let find = ['.pdf', '.mp3', '.mp4', '.csv'].find((x) => {
return pathName.indexOf(x) > -1;
});
if (find) {
isShow = true;
}
}
if(isShow){
type = pathName.split('.');
type = Array.isArray(type) && type.length && type[type.length - 1];
}
handleCancel = (e) => { return (
this.setState({ <>
visible: false, {isShow ? (
}); <Popconfirm
}; title='该附件支持预览,是否预览?'
download = () => { onConfirm={this.download}
let { path, pathName } = this.props; onCancel={this.showModal}
window.open(path, '_blank'); okText='下载'
}; cancelText='预览'>
render() { {isImg ? (
let { path, pathName, width, height } = this.props; <img
const { visible } = this.state; style={{
let isShow = width: width ? width : '100px',
pathName?.indexOf('.pdf') !== -1 || height: height ? height : 'auto',
// || pathName?.indexOf('.doc') !== -1 }}
pathName?.indexOf('.mp3') !== -1 || src={path}
pathName?.indexOf('.mp4') !== -1 || alt={pathName}
pathName?.indexOf('.csv') !== -1 || />
pathName?.indexOf('.png') !== -1 || ) : (
pathName?.indexOf('.jpeg') !== -1 || <a target='_blank' href={path}>
pathName?.indexOf('.gif') !== -1 || {pathName}
pathName?.indexOf('.bmp') !== -1 || </a>
pathName?.indexOf('.jpg') !== -1; )}
let type; </Popconfirm>
let isImg; ) : (
if (pathName?.indexOf('.pdf') !== -1) { <a target='_blank' href={path}>
isShow = true; {pathName}
isImg = false; </a>
type = 'pdf'; )}
} else if (pathName?.indexOf('.jpg') !== -1) {
isShow = true;
isImg = true;
type = 'jpg';
} else if (pathName?.indexOf('.mp3') !== -1) {
isShow = true;
isImg = false;
type = 'mp3';
} else if (pathName?.indexOf('.mp4') !== -1) {
isShow = true;
isImg = false;
type = 'mp4';
} else if (pathName?.indexOf('.csv') !== -1) {
isShow = true;
isImg = false;
type = 'csv';
} else if (pathName?.indexOf('.png') !== -1) {
isImg = true;
isShow = true;
type = 'png';
} else if (pathName?.indexOf('.gif') !== -1) {
isImg = true;
isShow = true;
type = 'gif';
} else if (pathName?.indexOf('.bmp') !== -1) {
isShow = true;
isImg = false;
type = 'bmp';
} else {
isShow = false;
}
return (
<>
{isShow ? (
<Popconfirm
title="该附件支持预览,是否预览?"
onConfirm={this.download}
onCancel={this.showModal}
okText="下载"
cancelText="预览">
{isImg ? (
<img
style={{
width: width ? width : '100px',
height: height ? height : 'auto',
}}
src={path}
alt={pathName}
/>
) : (
<a target="_blank" href={path}>
{pathName}
</a>
)}
</Popconfirm>
) : (
<a target="_blank" href={path}>
{pathName}
</a>
)}
<Modal <Modal
title={pathName} title={pathName}
visible={visible} visible={visible}
width={1200} width={1200}
destroyOnClose destroyOnClose
onOk={this.handleOk} onOk={this.handleOk}
onCancel={this.handleCancel}> onCancel={this.handleCancel}>
{type === 'pdf' ? ( {type === 'pdf' ? (
<iframe <iframe
style={{ style={{
width: '100%', width: '100%',
height: 600, height: 600,
}} }}
src={path} src={path}
/> />
) : ( ) : (
<div <div
style={{ style={{
height: 600, height: 600,
}}> }}>
{FileViewer && ( {FileViewer && (
<FileViewer <FileViewer
fileType={type} fileType={type}
filePath={path} filePath={path}
// onError={this.onError} // onError={this.onError}
// errorComponent={Error} // errorComponent={Error}
// unsupportedComponent={Error} // unsupportedComponent={Error}
/> />
)} )}
</div> </div>
)} )}
</Modal> </Modal>
</> </>
); );
} }
} }
one_stop_public/libs/UploadCom.js
浏览文件 @ 444a3263
...@@ -10,7 +10,7 @@ export function checkIsImage(path){ ...@@ -10,7 +10,7 @@ export function checkIsImage(path){
return false; return false;
} }
let p = path.toLowerCase(); let p = path.toLowerCase();
let find = ['.jpg','.png', '.jpeg', '.bmp', '.gif'].find((x) => { let find = ['.jpg','.png', '.jpeg', '.bmp', '.gif', '.bmp', '.svg'].find((x) => {
return path.indexOf(x) > -1; return path.indexOf(x) > -1;
}); });
return !!find; return !!find;
......
one_stop_public/tableCompon/index.jsx
浏览文件 @ 444a3263
...@@ -1562,7 +1562,7 @@ export default class tableCom extends Component { ...@@ -1562,7 +1562,7 @@ export default class tableCom extends Component {
); );
break; break;
case 'ImgUploadCom': case 'ImgUploadCom': // 图片上传组件
if (value == null || value == '') { if (value == null || value == '') {
cm = <div style={{ width: json.width, height: json.height }} />; cm = <div style={{ width: json.width, height: json.height }} />;
} else { } else {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论