get upload file list

sbx0 · Jan 11, 2024 · e4e0cab · e4e0cab
1 parent 1220369
commit e4e0cab
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 4 deletions.
diff --git a/todo-service/src/main/java/cn/sbx0/todo/business/file/FileController.java b/todo-service/src/main/java/cn/sbx0/todo/business/file/FileController.java
@@ -10,12 +10,15 @@
 import org.springframework.web.bind.annotation.*;
 import org.springframework.web.multipart.MultipartFile;
 
+import java.io.File;
 import java.io.IOException;
 import java.nio.file.Files;
 import java.nio.file.Path;
 import java.nio.file.Paths;
 import java.security.MessageDigest;
 import java.security.NoSuchAlgorithmException;
+import java.util.ArrayList;
+import java.util.List;
 import java.util.UUID;
 
 @Slf4j
@@ -74,6 +77,26 @@ public ResponseEntity<FileSystemResource> downloadFile(@PathVariable String file
                 .body(fileSystemResource);
     }
 
+    @GetMapping("/list")
+    public Result<List<FileInfoEntity>> fileList() {
+        File folder = new File(UPLOAD_DIR);
+        File[] files = folder.listFiles();
+        List<FileInfoEntity> fileInfos = new ArrayList<>();
+        if (files != null) {
+            for (File file : files) {
+                if (file.isDirectory()) {
+                    continue;
+                }
+                String name = file.getName();
+                if (name.contains(JSON_TYPE)) {
+                    continue;
+                }
+                fileInfos.add(new FileInfoEntity(name));
+            }
+        }
+        return Result.success(fileInfos);
+    }
+
     private String calculateMD5(byte[] fileBytes) throws NoSuchAlgorithmException {
         MessageDigest md = MessageDigest.getInstance("MD5");
         byte[] digest = md.digest(fileBytes);

diff --git a/todo-service/src/main/java/cn/sbx0/todo/business/file/FileInfoEntity.java b/todo-service/src/main/java/cn/sbx0/todo/business/file/FileInfoEntity.java
@@ -9,4 +9,11 @@ public class FileInfoEntity {
     private String fileName;
     private String originalFileName;
     private String md5;
+
+    public FileInfoEntity() {
+    }
+
+    public FileInfoEntity(String fileName) {
+        this.fileName = fileName;
+    }
 }
diff --git a/todo-service/src/main/resources/application-dev.yml b/todo-service/src/main/resources/application-dev.yml
@@ -21,8 +21,8 @@ spring:
         enabled: false
   servlet:
     multipart:
-      max-file-size: 10MB
-      max-request-size: 10MB
+      max-file-size: 100MB
+      max-request-size: 100MB
 logging:
   file:
     name: ./logs/current.log

diff --git a/todo-web/apis/apiPath.js b/todo-web/apis/apiPath.js
@@ -14,3 +14,4 @@ export const TaskStatistics = API + "/task/statistics";
 export const AssetTypePaging = API + "/asset/type/paging";
 export const RecentRecordTimeList = API + "/asset/record/getRecentRecordTimeList";
 export const AssetRecords = API + "/asset/record/getRecords";
+export const FileList = API + "/file/list";
diff --git a/todo-web/app/file/components/image/image.jsx b/todo-web/app/file/components/image/image.jsx
@@ -0,0 +1,24 @@
+"use client"
+
+import React, {useState} from 'react';
+
+function ImageClickFull({src}) {
+    const [isFullScreen, setIsFullScreen] = useState(false);
+
+    const toggleFullScreen = () => {
+        setIsFullScreen(!isFullScreen);
+    };
+
+    return (
+        <div className={`${isFullScreen ? 'w-screen h-screen fixed top-0 left-0 bg-black' : ''}`}
+             onClick={toggleFullScreen}>
+            <img src={src}
+                className={`${isFullScreen ? 'w-full h-full object-contain mx-auto' : ''}`}
+                alt=""
+                loading="lazy"
+            />
+        </div>
+    );
+}
+
+export default ImageClickFull;
diff --git a/todo-web/app/file/components/upload/upload.jsx b/todo-web/app/file/components/upload/upload.jsx
@@ -1,12 +1,28 @@
 "use client"
 
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {getCookie} from "../../../../apis/cookies";
+import {callApi} from "../../../../apis/request";
+import {FileList, GET, POST} from "../../../../apis/apiPath";
+import ImageClickFull from "../image/image";
 
 function DragAndDropUpload() {
     const [files, setFiles] = useState([])
     const [dragging, setDragging] = useState(false);
 
+    useEffect(() => {
+        getFileList();
+    }, []);
+
+    const getFileList = () => {
+        callApi({
+            method: GET,
+            url: FileList,
+        }).then(r => {
+            setFiles(r.data)
+        })
+    }
+
     const handleDragEnter = (event) => {
         event.preventDefault();
         setDragging(true);
@@ -101,7 +117,7 @@ function DragAndDropUpload() {
                 {
                     files.map((one => {
                         return <div key={one.fileName}>
-                            <img src={'/api/file/download/' + one.fileName} alt="" loading="lazy"/>
+                            <ImageClickFull src={'/api/file/download/' + one.fileName}/>
                         </div>;
                     }))
                 }