init

2026-02-02 12:29:00 +09:00
parent f8f5cef6e1
commit 495ef7d86c
175 changed files with 45128 additions and 0 deletions
--- a/src/main/resources/static/chunk_upload_test.html
+++ b/src/main/resources/static/chunk_upload_test.html
@@ -0,0 +1,125 @@
+<!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>
+datasetUid(학습데이터식별키) : <input id="datasetUid" placeholder="1"><br><br>
+
+* API 호출시 파일정보 추출해서 자동 할당해야 함.(script 예제참고)</br></br>
+chunkIndex : <input id="chunkIndex" placeholder="chunkIndex" readonly><br><br>
+chunkTotalIndex : <input id="chunkTotalIndex" placeholder="chunkTotalIndex" readonly><br><br>
+
+* API 호출시 파일정보 추출해서 자동 할당해야 함.(script 예제참고)</br></br>
+fileSize : <input id="fileSize" placeholder="fileSize" readonly><br><br>
+<!--
+fileHash : <input id="fileHash" placeholder="fileHash"><br><br> -->
+
+<input type="file" id="chunkFile"><br><br>
+<button onclick="startUpload()">업로드 시작</button>
+<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:500px;height:300px;border:1px solid #000000;"></div>
+
+<script>
+  async function startUpload() {
+    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;
+    const totalChunks = Math.ceil(fileSize / CHUNK_SIZE);
+    const chunkTotalIndex = totalChunks - 1;
+    //const uploadId = crypto.randomUUID(); // 고유 ID 생성
+
+    var 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("datasetUid", datasetUid);
+      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('/api/upload/chunk-upload-dataset', { 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;
+        }
+
+        uuid = result.data.uuid;
+
+        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>