JavaScript 파일 업로더를 구축하는 방법은 무엇입니까?

파일 업로드는 오늘날 대부분의 웹 프로젝트의 기본 기능입니다. 예를 들어 Facebook, LinkedIn, Twitter, Coursera 등과 같은 최신 웹사이트 및 웹 앱을 통해 최종 사용자는 이미지, 문서, 비디오 등과 같은 파일을 업로드할 수 있습니다. PDF-to-Word 변환기를 사용하면 사용자가 파일을 업로드할 수도 있습니다. 때때로 내부 팀은 제품 비디오 및 이미지를 업로드하기 위해 파일 업로드 기능이 필요합니다. 파일 업로더를 만드는 것은 어려울 수 있지만 현재 파일 업로드 기능을 프로젝트에 빠르게 구현하는 데 도움이 되는 여러 타사 도구 및 라이브러리를 사용할 수 있습니다. 그러나 처음부터 파일 업로더, 특히 JavaScript 업로더를 만들려는 경우 이 문서가 적합합니다.

이 기사에서는 외부 라이브러리를 사용하지 않고 바닐라 JavaScript 또는 순수 JavaScript로 JavaScript 파일 업로더를 만드는 방법을 보여줍니다.

파일 업로더의 기능은 무엇입니까?

파일 업로더를 구축할 때 사용자가 원하는 파일을 웹사이트나 웹 앱에 업로드할 수 있는 프런트 엔드 파일 업로드 버튼을 만들어야 합니다. 또한 더 나은 사용자 경험을 위해 여러 파일 업로드를 허용하고 진행률 표시줄을 표시할 수 있습니다. 또한 사용자가 이미지 파일을 업로드할 때 이미지 미리보기도 표시해야 합니다. 파일이 업로드되면 파일을 읽고 백엔드로 보내고 서버에 저장해야 합니다. 간혹 사용자가 대용량 파일을 업로드하여 업로더 속도가 느려지는 경우가 있습니다. 이러한 이유로 오류를 방지하고 속도를 향상시키기 위해 대용량 파일을 청크로 서버에 업로드하는 것이 가장 좋습니다. 이러한 파일 청크는 하나의 큰 파일보다 더 관리하기 쉽습니다.

또한 개발자는 빠른 업로드를 지원하는 효율적인 파일 업로더를 만들어야 합니다. 또한 사이버 공격자가 맬웨어 및 바이러스를 서버에 배포하지 못하도록 파일 업로더가 안전한지 확인해야 합니다.

JavaScript 파일 업로더를 만드는 방법?

1단계: 서버 측 설정

기본 제공 HTTP 패키지를 사용하여 Node.js 서버를 설정합니다. 프로젝트를 위한 새 폴더를 생성하여 시작하겠습니다.

mkdir 파일 업로드 서비스

다음으로 index.js 파일을 만듭니다. 이것은 우리 서버의 진입점이 될 것입니다.

마지막으로 포트 8080에서 실행될 HTTP 서버를 생성합니다.

2단계: JavaScript 파일 업로더의 프런트 엔드 생성

JavaScript 파일 업로더의 프런트 엔드를 생성하기 위해 파일 업로드 버튼을 표시하고 사용자의 파일 입력을 수락하는 기본 HTML 파일을 생성합니다. 파일 업로드 상태도 표시됩니다. 사용자가 버튼을 클릭하면 파일 업로드 프로세스가 시작됩니다.

간단한 파일 업로드 버튼을 만드는 동안 디자인 목적으로 버튼의 텍스트를 편집하거나 버튼의 색상을 변경할 수도 있습니다.

다음으로 백엔드에서 이 파일을 보냅니다.

3단계: 프런트 엔드에서 업로드된 파일 읽기

프런트 엔드에서 파일 내용을 읽으려면 'FileReader' 개체를 사용합니다. 이를 통해 웹 앱은 파일 콘텐츠(사용자 시스템에 저장됨)를 비동기적으로 읽을 수 있습니다. 'FileReader' 개체는 파일을 읽는 여러 메서드를 제공합니다. 예를 들어 업로드된 파일을 배열 버퍼 또는 원시 이진 데이터로 읽을 수 있습니다. 파일을 데이터 URL로 읽을 수도 있습니다. 여기서는 배열 메서드를 사용하여 파일을 읽습니다.

선택한 파일은 입력을 위해 '파일' 필드에서 액세스할 수 있습니다.

또한 'FileReader' 개체는 'onprogress' 및 'onload'와 같은 여러 이벤트 리스너를 제공하여 프런트 엔드에서 업로드된 파일의 읽기를 추적합니다. 여기서는 'onload' 이벤트를 사용합니다.

4단계: 업로드된 파일을 백엔드로 전송

사용자가 업로드한 파일을 백엔드에 보내기 전에 작은 청크 또는 조각으로 나누고 특히 파일 크기가 큰 경우 파일 청크를 주기적으로 보내는 것이 가장 좋습니다. 매우 큰 파일을 업로드하면 대기 시간 및 속도와 관련된 문제가 발생할 수 있기 때문입니다. 또한 때로는 사이버 공격자가 너무 큰 파일을 업로드하여 서버가 오작동할 수 있습니다.

따라서 먼저 파일을 청크로 분할하고 하나씩 백엔드로 보냅니다. 또한 파일이 손상되지 않도록 청크를 순서대로 보내야 합니다. 또한 요청으로 인해 서버에 과부하가 걸리지 않도록 'async await'를 사용할 것입니다.

5단계: 서버에 파일 청크 저장

마지막으로 청크를 수신하여 서버에 저장합니다.

그게 다야. 이제 Javascript 파일 업로드를 위한 완전한 단일 파일 업로더가 있습니다. '다중' 옵션을 사용하여 여러 파일 업로드를 활성화할 수도 있습니다.

<입력 유형=”파일” id=”파일” 배수>

각 파일을 하나씩 청크로 나누어 백엔드로 보냅니다.

결론

파일 업로드는 많은 최신 웹 앱과 웹사이트의 필수 기능입니다. JavaScript 라이브러리 또는 파일 업로드 API와 같은 타사 파일 업로드 도구를 사용하여 JavaScript 파일 업로드를 앱에 빠르게 구현할 수 있습니다. 그러나 원하는 방식으로 처음부터 파일 업로더를 만들 수도 있습니다. 예를 들어 대용량 파일을 청크로 분할하여 하나씩 백엔드로 보낼 수 있습니다. 이 기사에서는 처음부터 Vanilla JS를 사용하여 JavaScript 파일 업로더를 만들었습니다.