Final project - Dev12

Jaemin Jung·2021년 9월 17일

Final Project

목록 보기

12/27

음원 등록/수정 페이지

sidebar의 기초 작업이 끝났고 음원을 등록하고 수정하는 페이지 제작을 맡았다.

파일 업로드 기능

우리팀의 프로젝트에서는 앨범 이미지와 음원 파일을 업로드 하는 기능이 있다.
이중 앨범 이미지는 파일 업로드와 미리보기가 생성 되어야 한다.
파일을 업로드 하기 위해서는 기본적으로 input 태그의 type을 file로 설정 해야한다.
input 태그의 onchange 이벤트 핸들러를 붙여 사용자가 파일을 선택할 때마다 핸들러 함수가 호출되도록 한다.

<input type="file" onchange={()=>{handleFile(e)}}/>

FileReader

input 태그로 업로드한 이미지 파일의 데이터를 읽어와 미리보기 이미지를
띄우기 위해서는 Web API의 FileReader를 사용했다.

FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다.
File 객체는 <input> 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 FileList 객체, 드래그 앤 드랍으로 반환된 DataTransfer 객체 혹은 HTMLCanvasElement의 mozGetAsFile() API로 부터 얻습니다.

우선은 FileReader를 사용하기 위해 FileReader를 호출한다.
호출만했지 아직 파일을 읽은 것은 아니다.

      const reader = new FileReader();

파일을 읽는 방법은 네 가지가 있다.

readAsText
파일을 텍스트로 읽어오며, 텍스트 파일을 읽을 때 사용한다.
readAsDataURL
파일 데이터를 URL로 읽어온다. 파일 정보를 주소처럼 활용한다.
readAsArrayBuffer
ArrayBuffer라는 객체를 반환하고,
데이터를 일정한 크기로 조금씩 서버에 보낼때 사용한다.
readAsBinaryString
이진 데이터로 읽어온다.
이 데이터는 서버에서 읽을 수 있다.

나는 이 네가지중에서 img 태그의 src값을 주기 위해서 readAsDataURL를 사용했다.

마지막으로 onload값을 설정해야한다.
onload는 load 이벤트의 핸들러이며,
이 이벤트는 읽기 동작이 성공적으로 완료 되었을 때마다 호출된다.

onload값에 이미지 src 값을 변경해주는 함수를 작성해놓는다.
src값에 reader객체의 result (url로 변경된 값)을 세팅 해주면 끝

      // 1. 파일을 읽기 위해 FileReader를 호출함 파일을 아직 읽은것은 아님
      const reader = new FileReader();

      // 2. 파일을 url값으로 읽는 이벤트 총 4가지중 하나
      reader.readAsDataURL(file);

      // 3. 이 이벤트는 읽기 동작이 성공적으로 완료 되었을 때마다 발생합니다.
      reader.onload = function () {
        setSrc(reader.result);
      };

실행순서 filereader -> reader.readAsDataURL -> onload

유효성 검사

input 태그로 업로드한 파일에는 type이 정해져 있다.
예를들어서 jpg나 jpeg같은 이미지파일은 image/<확장명>형태로 되어있다.
이를 이용해서 이미지 파일, 오디오 파일만 업로드하도록 유효성 검사 함수를 만들었다.

  function isValidFile (key, file) {
    if (key === '이미지') {
      return file.type.match('image/');
    } else if (key === '오디오') {
      return file.type.match('audio/');
    }
  }

FormData

파일을 실제로 서버에 업로드 하기위해서는 form형태로 업로드 해야한다.
Web API의 FormData를 이용해보자.

FormData 인터페이스는 form 필드와 그 값을 나타내는 일련의 key/value 쌍을 쉽게 생성할 수 있는 방법을 제공합니다. 또한 XMLHttpRequest.send() (en-US) 메서드를 사용하여 쉽게 전송할 수 있습니다. 인코딩 타입이 "multipart/form-data"로 설정된 경우, form에서 사용하는 것과 동일한 포맷을 사용해야 합니다.

우선은 FormData를 사용하기 위해 FormData를 호출한다.