TIL - 20220918

 오늘은 모던 JavaScript 튜토리얼에서 파일 업로드 재개하기에 대해 공부했다. 작성한 질문은 다음과 같다.

1. 업로드할 파일에 고윳값을 구분할 파일 아이디를 생성한다.

let fileId = file.name + '-' + file.size + '-' + file.lastModifiedDate;

파일 아이디는 파일 업로드를 재개할 때, 어떤 파일을 재개할지 알려줄 때 필요하며 이름, 크기 혹은 최종 수정 날짜가 변경되면 fileId는 별도로 생성된다.

 

2. 서버에 요청을 보내 몇 바이트만큼을 전송했는지 질의를 보낸다.

let response = await fetch('status', {
  headers: {
    'X-File-Id': fileId
  }
});

// 서버가 얼마만큼 파일 바이트를 가졌는지 확인한다.
let StartByte = +await response.text();

서버가 X-File-Id 헤더에서 파일 업로드를 추적한다고 가정한다. 헤더의 파일 업로드 추적은 서버 사이드에서 구현되어 있어야 한다. 아직 파일이 없으면 서버는 0으로 응답해야 한다.

 

3. startByte에서 파일을 보내기 위해 Blob의 slice 메서드를 활용한다.

xhr.open("POST", "upload", true);

// 파일 아이디를 통해 서버는 어떤 파일을 받을지 알게 된다.
xhr.setRequestHeader('X-File-Id', fileId);

// 서버는 업로드를 재개할 파일의 시작 바이트를 통하여 파일 업로드의 재개 여부를 알게 된다.
xhr.setRequestHeader('X-Start-Byte', startByte);

xhr.upload.onprogress = (e) => {
  console.log(`Upload ${startByte + e.loaded} of ${startByte + e.total}`);
};

// 업로드 할 파일은 input.files[0]나 또 다른 출처가 될 수 있다.
xhr.send(file.slice(startByte));

파일 아이디 X-File-Id를 서버로 보내 업로드할 파일이 무엇인지 알려주고, 시작 바이트인 X-Start-Byte를 서버에 보내 파일 업로드를 초기화하지 않고 파일 업로드를 다시 시작한다는 사실을 서버에 알게 한다. 서버는 기록을 확인해서 파일에 업로드가 있었는지 그리고 현재 서버에 업로드된 파일 크기가 정확히 X-Start-Byte인지 확인한 후 서버에 업로드된 파일 크기 시점부터 데이터를 추가한다.