file uploading

[DDDDDeng2022]

components: 这是伪代码，其中FileItem、PreviweDialog、FilesBox可另开一个jsx文件，这三个组件复用将是整个项目最高的

提取文件名字

const getfileName = (filelink) => {
        const parsedUrl = new URL(filelink);
        const pathname = parsedUrl.pathname;
        const filename = pathname.substring(pathname.lastIndexOf("/") + 1, pathname.indexOf("-", pathname.lastIndexOf("/")));
        console.log(filename);
        return filename;
    }

1. FileItem

   const FileItem=({fileLink,isEditable})=>{
   
   解析fileLink >> file(filename.extension)
   const DefinedIcon = (extension)=>{
   if extention === 图片类  >> PhotoIcon(带颜色)
   if extention === pdf >> PictureAsPdfIcon(带颜色)
   if extention === 文档类   >> DescriptionIcon(带颜色)
   }
   const [openPreviweDialog, setOpenPreviweDialog]=useState(false);
   return
   <>
   <> DefinedIcon + {file}</>
   <> 
     <button onClick={setOpenPreviweDialog(true)}> view </button>
     <button>  download     </button>
     {isEditable && <button>  remove </button>}
   </>
   <PreviweDialog filelink={filelink} handleDialogClose={handleDialogClose}/>
   </>
   }

   甚至可以使用这个查看和下载

     import DownloadIcon from "@mui/icons-material/Download";
     import PreviewIcon from "@mui/icons-material/Preview"; 
     <IconButton onClick={() => { /* 预览文档逻辑 */ }}><PreviewIcon /></IconButton>
   <IconButton component="a" href={filelink} download> <GetAppIcon /></IconButton>

   参考

   

2. PreviweDialog

   const PreviweDialog = ({ filelink, handleDialogClose })=>{
     preview
   }

   3.FilesBox

   const FilesBox=({filelinks,isEditable})=>{
   return filelinks.map((fileLink)=>
   <FileItem fileLink={fileLink} isEditable={isEditable}/>
   )
   }

   4.VisaPage

   const VisaPage=()=>{
   const [filelinks,setFilelinks]=useState();
   const [isEditable,setIsEditable]=useState(false);
   if step completed   >> setIsEditable(false)
   if step==activeStep(curDoc)  >>  setIsEditable(true)
   return 
   ...
   <button >choose files</>(上传文件)
   < FilesBox fileLink={fileLink}  isEditable={isEditable}/>
   <button onClick={post filelinks}>upload</button>
   ....
   }

[DDDDDeng2022]

@donnalovescoding