Skip to content

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

图片上传组件预览

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