chunk업로드 공통, 모델관리 수정

2026-01-08 18:35:19 +09:00
parent 4d2135ec4c
commit eb88717791
19 changed files with 1335 additions and 23 deletions
--- a/src/main/resources/static/chunk_upload_test.html
+++ b/src/main/resources/static/chunk_upload_test.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <title>Chunk Upload Test</title>
+</head>
+<body>
+<h2>대용량 파일 청크 업로드 테스트</h2>
+
+* Chunk 테스트 사이즈 10M (10 * 1024 * 1024) - 성능에 따라 변경가능<br><br>
+
+* 업로드 API선택</br></br>
+<select name="apiUrl" id="apiUrl" style="width:600px;height:40px;">
+  <option value="/api/model/file-chunk-upload">모델파일Chunk업로드 ( /api/model/file-chunk-upload )</option>
+  <option value="/api/upload/file-chunk-upload">파일Chunk업로드(공통) ( /api/upload/file-chunk-upload )</option>
+</select>
+<br><br>
+* 파일첨부<br><br>
+<input type="file" id="chunkFile" style="height:40px;"><br><br>
+<button onclick="startUpload()" style="height:40px;">업로드 시작</button>
+<br><br><br><br>
+* 업로드시 업로드 이력을 추적하기 위해 UUID생성해서 전달(파일병합시 사용)(script 예제참고)</br></br>
+UUID : <input id="uuid" name="uuid" value="" style="width:300px;height:30px;" readonly><br><br>
+
+* API 호출시 파일정보 추출해서 자동 할당해야 함.(script 예제참고)</br></br>
+chunkIndex : <input  style="height:30px;" id="chunkIndex" placeholder="chunkIndex" readonly><br><br>
+chunkTotalIndex : <input  style="height:30px;" id="chunkTotalIndex" placeholder="chunkTotalIndex" readonly ><br><br>
+
+* API 호출시 파일정보 추출해서 자동 할당해야 함.(script 예제참고)</br></br>
+fileSize : <input style="height:30px;" id="fileSize" placeholder="fileSize" readonly><br><br>
+<!--
+fileHash : <input id="fileHash" placeholder="fileHash"><br><br> -->
+
+
+<br><br>
+* 진행율(%)</br></br>
+<div style="width:500px;height:30px;border:1px solid #cccccc;"><div id="prgssbar" style="width:100%;height:30px;background:#eeeeee;"></div></div>
+<br><br>
+* 결과메세지</br></br>
+<div id="status" style="padding:20px;width:800px;height:300px;border:1px solid #000000;"></div>
+
+<script>
+  async function startUpload() {
+
+    const apiUrl = document.getElementById('apiUrl').value;
+    const file = document.getElementById('chunkFile').files[0];
+    const fileName = file.name;
+    //const datasetUid = Number(document.getElementById('datasetUid').value);
+    //const chunkIndex = document.getElementById('chunkIndex').value;
+    if (!file) return alert("파일을 선택하세요.");
+
+    const CHUNK_SIZE = 10 * 1024 * 1024; // 5MB
+    const fileSize = file.size;
+    var totalChunks = Math.ceil(fileSize / CHUNK_SIZE);
+    const chunkTotalIndex = totalChunks - 1;
+    const uuid = crypto.randomUUID(); // 고유 ID 생성
+
+    //var uuid = "";
+
+
+    document.getElementById('uuid').value = uuid;
+    document.getElementById('fileSize').value = file.size;
+    document.getElementById('chunkTotalIndex').value = chunkTotalIndex;
+
+
+    for (let i = 0; i < totalChunks; i++) {
+      //for (let i = 0; i < 1; i++) {
+      const start = i * CHUNK_SIZE;
+      const end = Math.min(start + CHUNK_SIZE, file.size);
+      const chunk = file.slice(start, end);
+
+      document.getElementById('chunkIndex').value = i;
+
+      const formData = new FormData();
+      formData.append("uuid", uuid);
+      formData.append("fileSize", fileSize);
+      formData.append("fileName", fileName);
+      formData.append("chunkIndex", i);
+      formData.append("chunkTotalIndex", chunkTotalIndex);
+      formData.append("chunkFile", chunk);
+
+      try {
+        const response = await fetch(apiUrl, { method: 'POST', body: formData });
+
+        // 2. 응답 상태 확인 (200 OK 등)
+        if (!response.ok) {
+          throw new Error(`서버 에러: ${response.status}`);
+        }
+
+        // 3. 서버가 보낸 데이터 읽기 (JSON 형태라고 가정)
+        const result = await response.json();
+        document.getElementById('status').innerText = JSON.stringify(result, null, 2);
+        if( result.data.res != "success")
+        {
+          //오류 경고창 띄우는 것으로 처리하시면 됩니다.
+          break;
+        }
+
+        document.getElementById('prgssbar').style.width = result.data.uploadRate+"%";
+
+      } catch (error) {
+        console.error(`${i}번째 청크 업로드 실패:`, error);
+        break; // 오류 발생 시 중단
+      }
+
+    }
+
+    // 모든 청크 전송 후 최종 완료 요청
+    //var mergeResult = await completeUpload(uuid);
+    //document.getElementById('status').innerText = JSON.stringify(mergeResult, null, 2);
+
+  }
+
+
+  async function completeUpload(uuid) {
+    try {
+      const response = await fetch(`/api/upload/chunk-upload-complete/${uuid}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`서ver 응답 에러: ${response.status}`);
+      }
+
+      const result = await response.json();
+      return result;
+
+    } catch (error) {
+      console.error("완료 요청 중 오류 발생:", error);
+    }
+  }
+</script>
+</body>
+</html>