>웹 프론트엔드 >JS 튜토리얼 >JavaScript에서 파일을 Base64로 변환하는 방법은 무엇입니까?

JavaScript에서 파일을 Base64로 변환하는 방법은 무엇입니까?

Barbara Streisand
Barbara Streisand원래의
2024-12-03 04:53:08739검색

How to Convert Files to Base64 in JavaScript?

JavaScript에서 파일을 Base64로 변환: 종합 가이드

웹 애플리케이션으로 작업할 때 다음 작업의 일부로 파일을 전송해야 하는 경우가 종종 있습니다. 데이터 교환. 이를 원활하게 달성하려면 파일을 Base64 형식으로 변환해야 합니다. 이 수수께끼 같은 인코딩 기술은 인쇄 가능한 ASCII 문자의 하위 집합을 사용하여 이진 데이터를 나타내므로 HTTP 또는 기타 텍스트 기반 프로토콜을 통해 파일을 전송하는 데 적합합니다.

문제:

document.querySelector 메소드를 통해 얻은 File 객체가 있다고 가정합니다.

file = document.querySelector('#files > input[type="file"]').files[0];

당신의 목표는 변환하는 것입니다. 효율적인 데이터 전송을 위해 이 File 객체를 Base64 문자열로 변환합니다.

해결책:

파일을 Base64로 변환하려면 JavaScript에서 제공하는 FileReader 클래스를 활용할 수 있습니다. 이 클래스를 사용하면 파일 내용을 읽고 Base64 형식으로 인코딩할 수 있습니다. 구현 방법은 다음과 같습니다.

function getBase64(file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        console.log(reader.result);
    };
    reader.onerror = function (error) {
        console.log('Error: ', error);
    };
}

var file = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file); // prints the Base64 string

이 코드는 FileReader 인스턴스를 초기화하고 파일 읽기를 데이터 URL(DataURL)로 시작합니다. 읽기 작업이 성공적으로 완료되면 onload 이벤트가 트리거되고 변환된 Base64 문자열이 reader.result에서 가져옵니다. 이제 데이터 교환이나 기타 원하는 목적으로 이 Base64 문자열을 사용할 수 있습니다.

위 내용은 JavaScript에서 파일을 Base64로 변환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.