vue2에서 input 태그를 사용하여 파일을 업로드한 후 Base64 인코딩으로 변환하는 예제를 해보겠습니당
파일 업로드 UI 만들기
1) 먼저 input 태그를 사용하여 파일 업로드 UI를 만들어 줍니다
<input type="file" id="fileUpload" />
- type = "file" : 사용자가 파일을 업로드할 수 있음
- id="fileUpload" : input 태그에 접근하기 위해 id 정의
input 태그에 대한 자세한 옵션은 https://developer.mozilla.org/enUS/docs/Web/HTML/Reference/Elements/input 을 참고하세용
2) input 태그의 이벤트 핸들러 등록
<script>
const inputDom = document.getElementById('fileUpload');
const uploadFiles = () => {
const selectedFile = inputDom.files;
};
inputDom.addEventListener('change', uploadFiles);
</script>- id가 'fileUpload'인 dom element를 inputDom 으로 정의
- input 요소에 change 이벤트가 발생할 때 마다 실행할 함수 uploadFile 함수 정의
- change 이벤트는 파일을 업로드 할 때마다 발생하는데 동일한 파일을 업로드하면 발생안함
- inputDom.files 을 통해 업로드한 파일에 접근
- 업로드한 파일 selectedFile을 출력하면 다음과 같습니다. 길이 정보는 필요없으니 실제 파일은 selectedFile[0]로 접근해야 합니다
3) 파일 데이터를 Unit8Array 함수를 사용해 byte array로 변환하기
파일 데이터를 arrayBuffer로 읽어들인 후 Unit8Array 함수를 사용해 8bit 단위로 끊어읽을 수 있는 byte array로 변환하는 함수를 만들었습니다
array buffer에 대한 내용은 추후에 자세히 다뤄보도록 하겠습니당
<script>
fileToByteArray(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onloadend = (event) => {
if (event.target.readyState === FileReader.DONE) {
const arrayBuffer = event.target.result;
const byteArray = new Uint8Array(arrayBuffer);
resolve(byteArray);
}
};
reader.onerror = (error) => {
reject(error);
};
});
}
</script>- FileReader는 비동기적으로 데이터를 읽어오기 때문에 프로미스 타입으로 return 합니다
- readAsArrayBuffer 메서드로 파일 데이터를 ArrayBuffer로 읽는 작업을 실행합니다
- onloadend와 onerror 이벤트는 readAsArrayBuffer 같은 작업 중 발생하는 이벤트에 대한 핸들러 느낌입니다(?)
- onloadend는 작업의 성공 여부와 관계없이 readAsArrayBuffer가 종료되면 실행됩니다. 예제 코드에서는 ArrayBuffer로 읽은 파일 데이터를 Unit8Array 함수를 이용해 8bit 씩 끊어 읽을 수 있는 byte array를 만들어 return 합니다
- onerror는 작업이 실패했을 때 실행됩니다
4) byteArray 를 Base64 인코딩으로 변환하기
다시 2번 코드에 fileToByteArray 함수를 호출한 후 Base64로 인코딩하는 코드를 추가해줍니다
<script>
const inputDom = document.getElementById('fileUpload');
const uploadFiles = () => {
const selectedFile = inputDom.files;
this.fileToByteArray(selectedFile[0]).then(byteArray => {
var base64Encoded = byteArray.toBase64();
console.log('base64Encoded', base64Encoded);
});
};
inputDom.addEventListener('change', uploadFiles);
</script>toBase64 함수는 Unit8Array 인스턴스를 Base64로 인코딩하는 함수입니다
5) 확인하기 ~
'ABC'가 적힌 파일을 업로드하여 base64로 인코딩한 문자를 콘솔로 확인해보니 'QUJD'로 잘 출력되는걸 확인할 수 있습니다
'ABC'가 Base64 인코딩하여 'QUJD'로 변환되는 원리는 아래 글을 확인해보세용
