提交 d6d3e7b8 authored 作者: 徐立's avatar 徐立

图片上传组件也支持预览功能

上级 77a0cecc
...@@ -45,33 +45,45 @@ export default class index extends Component { ...@@ -45,33 +45,45 @@ export default class index extends Component {
pathName?.indexOf('.png') !== -1 || pathName?.indexOf('.png') !== -1 ||
pathName?.indexOf('.jpeg') !== -1 || pathName?.indexOf('.jpeg') !== -1 ||
pathName?.indexOf('.gif') !== -1 || pathName?.indexOf('.gif') !== -1 ||
pathName?.indexOf('.bmp') !== -1; pathName?.indexOf('.bmp') !== -1 ||
pathName?.indexOf('.jpg') !== -1;
let type; let type;
let isImg;
if (pathName?.indexOf('.pdf') !== -1) { if (pathName?.indexOf('.pdf') !== -1) {
isShow = true; isShow = true;
isImg = false;
type = 'pdf'; type = 'pdf';
} else if (pathName?.indexOf('.jpg') !== -1) {
isShow = true;
isImg = true;
type = 'jpg';
} else if (pathName?.indexOf('.mp3') !== -1) { } else if (pathName?.indexOf('.mp3') !== -1) {
isShow = true; isShow = true;
isImg = false;
type = 'mp3'; type = 'mp3';
} else if (pathName?.indexOf('.mp4') !== -1) { } else if (pathName?.indexOf('.mp4') !== -1) {
isShow = true; isShow = true;
isImg = false;
type = 'mp4'; type = 'mp4';
} else if (pathName?.indexOf('.csv') !== -1) { } else if (pathName?.indexOf('.csv') !== -1) {
isShow = true; isShow = true;
isImg = false;
type = 'csv'; type = 'csv';
} else if (pathName?.indexOf('.png') !== -1) { } else if (pathName?.indexOf('.png') !== -1) {
isImg = true;
isShow = true; isShow = true;
type = 'png'; type = 'png';
} else if (pathName?.indexOf('.gif') !== -1) { } else if (pathName?.indexOf('.gif') !== -1) {
isImg = true;
isShow = true; isShow = true;
type = 'gif'; type = 'gif';
} else if (pathName?.indexOf('.bmp') !== -1) { } else if (pathName?.indexOf('.bmp') !== -1) {
isShow = true; isShow = true;
isImg = false;
type = 'bmp'; type = 'bmp';
} else { } else {
isShow = false; isShow = false;
} }
console.log(FileViewer);
return ( return (
<> <>
{isShow ? ( {isShow ? (
...@@ -82,9 +94,13 @@ export default class index extends Component { ...@@ -82,9 +94,13 @@ export default class index extends Component {
okText="下载" okText="下载"
cancelText="预览" cancelText="预览"
> >
{isImg ? (
<img src={path} alt={pathName} />
) : (
<a target="_blank" href={path}> <a target="_blank" href={path}>
{pathName} {pathName}
</a> </a>
)}
</Popconfirm> </Popconfirm>
) : ( ) : (
<a target="_blank" href={path}> <a target="_blank" href={path}>
......
...@@ -2021,15 +2021,15 @@ export default class tableCom extends Component { ...@@ -2021,15 +2021,15 @@ export default class tableCom extends Component {
cm = ( cm = (
<ul> <ul>
{files.map((f, index2) => { {files.map((f, index2) => {
if (f.path.indexOf('.png') != -1 || f.path.indexOf('.jpg') != -1) { // if (f.path.indexOf('.png') != -1 || f.path.indexOf('.jpg') != -1) {
return ( // return (
<img // <img
key={index2} // key={index2}
style={{ width: 100, height: 100 }} // style={{ width: 100, height: 100 }}
src={queryApiActionPath() + f.path} // src={queryApiActionPath() + f.path}
/> // />
); // );
} // }
if (get === 'web') { if (get === 'web') {
return ( return (
<li key={index2}> <li key={index2}>
...@@ -2049,26 +2049,26 @@ export default class tableCom extends Component { ...@@ -2049,26 +2049,26 @@ export default class tableCom extends Component {
); );
} else { } else {
const files = !isEmpty(ary) ? ary : []; const files = !isEmpty(ary) ? ary : [];
console.log(files);
cm = ( cm = (
<ul> <ul>
{Array.isArray(files) && {Array.isArray(files) &&
files.map((f, index2) => { files.map((f, index2) => {
if (f.filePath.indexOf('.png') != -1 || f.filePath.indexOf('.jpg') != -1) { // if (f.filePath.indexOf('.png') != -1 || f.filePath.indexOf('.jpg') != -1) {
// return (
// <img
// key={index2}
// style={{ width: 100, height: 100 }}
// src={queryApiActionPath() + f.filePath}
// />
// );
// }
if (get === 'web') {
return ( return (
<img <li key={index2}>
key={index2} <FilePreview path={queryApiActionPath() + f.path} pathName={f.name} />
style={{ width: 100, height: 100 }} </li>
src={queryApiActionPath() + f.filePath}
/>
); );
} }
// if(get === 'web'){
// return <li key={index2}><FilePreview
// path={queryApiActionPath() + f.path}
// pathName={f.name}
// /></li>
// }
return ( return (
<li key={index2}> <li key={index2}>
<a <a
...@@ -2097,7 +2097,12 @@ export default class tableCom extends Component { ...@@ -2097,7 +2097,12 @@ export default class tableCom extends Component {
if (obj[dataColumn.base52] == null || obj[dataColumn.base52] == '') { if (obj[dataColumn.base52] == null || obj[dataColumn.base52] == '') {
cm = <div style={{ width: json.width, height: json.height }}></div>; cm = <div style={{ width: json.width, height: json.height }}></div>;
} else { } else {
cm = ( cm = FilePreview ? (
<FilePreview
path={config.httpServer + obj[dataColumn.base52]}
pathName={obj[dataColumn.base52]}
/>
) : (
<img <img
src={config.httpServer + obj[dataColumn.base52]} src={config.httpServer + obj[dataColumn.base52]}
style={{ width: json.width, height: json.height }} style={{ width: json.width, height: json.height }}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论