diff --git a/src/components/fileUpload/index.js b/src/components/fileUpload/index.js new file mode 100644 index 0000000..8592b6c --- /dev/null +++ b/src/components/fileUpload/index.js @@ -0,0 +1,184 @@ +import React,{useState,useEffect} from 'react' +import { Upload, Row, Col,Image,message,Modal } from "antd" +import { DeleteOutlined, FileWordOutlined, FilePdfOutlined,FileJpgOutlined, FileZipOutlined, FilePptOutlined, FileExcelOutlined } from '@ant-design/icons'; +import './index.less' +import { httpget, httpGetFile, httppost } from '../../utils/request'; +import apiurl from '../../service/apiurl'; +const { Dragger } = Upload; +export default function FileUpload({ mode,setFileIds,files }) { + const [fileList, setFileList] = useState([]) //上传文件列表 + const [iframeSrc, setIframeSrc] = useState('') + const [pdfViewOPen, setPdfViewOPen] = useState(false) + const [loading, setLoading] = useState(false) + /** + * @description 删除上传的图片 + * @param {string} id 删除的id + */ + const deleteFile = async(fileId) => { + let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId); + setFileList(filterFile) + setFileIds(filterFile.map(item => item.response?.data?.fileId)) + } + + const fileChange = (info) => { + if (info.file.status === "done") { + setLoading(false); + } + if (info.file.status === "uploading") { + setLoading(true); + } + if (info.file.status === "error") { + message.error("文件上传失败") + setLoading(false); + } + let fileIds = info.fileList.map(file => { + return file.response?.data?.fileId + }) + setFileIds(fileIds) + setFileList(info.fileList) + console.log("info.fileList",info.fileList); + + } + + + + /** + * @description 文件下载 + * @param {String} params 文件fileId + */ + const download = (params) => { + let downloadLink = document.createElement("a"); + // downloadLink.href = `http://192.168.66.7:20010/fileAssociations/downloadFile/${params?.fileId}`; + downloadLink.href = `http://223.75.53.141:81/shzh/jcsj/fileAssociations/downloadFile/${params?.fileId}`; + downloadLink.download = `${params.fileName}`; + downloadLink.style.display = "none"; + // 将链接添加到页面中 + document.body.appendChild(downloadLink); + + // 模拟点击事件,开始下载 + downloadLink.click(); + } + + /** + * @description pdf文件预览 + * @param {String} params 文件预览url + */ + const viewPdf = (params) => { + setIframeSrc(params.fileId) + setPdfViewOPen(true) + } + + useEffect(() => { + if (mode != "save" && files) { + setFileList(files.map(file => ({...file,name:file.fileName,response:{data:{name:file.fileName,fileId:file.fileId}}}))) + setFileIds(files.map(item => item.response?.data?.fileId)) + } + }, [mode,files]) + + return ( +
+ {mode !== "view" && + { console.log(info.dataTransfer.files); }} + fileList={fileList} + disabled={loading} + showUploadList={false} + // onSuccess={handleSuccess} + > +

点击或拖拽文件到此区域上传

+

+ 支持扩展名:.rar .zip .doc .docx .pdf .jpg .png .ppt +

+
+ } + + { + loading ? 文件正在上传中,请等待 : + fileList.length > 0 && fileList.map(file => { + return ( + +
+
+ {file.name.indexOf('.docx') > -1 ? +
{ download(file.response?.data) }} + style={{ cursor: 'pointer' }} + > + +
+ : + file.name.indexOf('.pdf') > -1 ? +
{ download(file.response?.data) }} + style={{ cursor: 'pointer' }} + > + +
+ : + file.name.indexOf('.zip') > -1 ? +
{ download(file.response?.data) }} + style={{ cursor: 'pointer' }} + > + +
+ : + file.name.indexOf('.ppt') > -1 ? +
{ viewPdf(file.response?.data) }} + style={{ cursor: 'pointer' }} + > + +
: + file.name.indexOf('.xlsx') > -1 ? +
{ download(file.response?.data) }} + style={{ cursor: 'pointer' }} + > + +
+ : + + { download(file.response?.data) }} /> + } + {file.name} +
+
deleteFile(file.response?.data?.fileId)}> + +
+
+ + ) + }) + } +
+ + { + setPdfViewOPen(false) + }} + > +