138 lines
4.8 KiB
HTML
138 lines
4.8 KiB
HTML
<!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:1200px;height:600px;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>
|