JS에서 FileReader를 사용하여 사진을 업로드하기 전에 로컬 미리보기 기능을 구현하는 방법

FileReader 개체를 사용하면 웹 응용 프로그램이 File 또는 Blob 개체를 사용하여 읽을 파일이나 데이터를 지정하여 사용자 컴퓨터에 저장된 파일(또는 원시 데이터 버퍼)의 내용을 비동기식으로 읽을 수 있습니다. 이 글에서는 JS에서 FileReader를 사용하여 이미지를 업로드하기 전에 로컬 미리보기를 구현하는 방법을 소개합니다. 필요한 친구는 이를 참고할 수 있습니다

Introduction

이미지 업로드 미리보기를 할 때 특별한 요구사항이 없다면, 이미지를 직접 업로드하고 배경으로 이동하여 성공 후 URL을 가져온 다음 페이지에 렌더링하면 됩니다. 이미지가 상대적으로 작을 경우 미리보기가 느려지는 것은 문제가 되지 않습니다. , 정크 파일도 생성되므로 업로드하기 전에 로컬에서 미리 보는 것이 좋습니다.

프로젝트를 진행하면서 플러그인을 찾다가 순수 프런트엔드가 이미지의 로컬 미리보기를 실현할 수 있다는 것을 알았습니다. 그런데 오늘 인터뷰에서 질문을 받았을 때 우연히 발견하게 되었습니다. 컴퓨터 데스크탑에 데모를 구현한 후 이를 기반으로 데모에서 API를 확인하고 간단히 요약했습니다.

먼저 File 객체를 가져와야 합니다

입력 태그가 포함된 이미지를 업로드하면 이벤트 객체가 파일 객체 모음을 포함합니다

event.target.files

핵심은 FileReader 객체입니다

MDN에 따르면:

FileReader 객체를 사용하면 웹 애플리케이션이 파일(또는 원시 데이터 버퍼)의 내용을 비동기적으로 읽을 수 있습니다. 읽을 내용을 지정하기 위해 File 또는 Blob 개체를 사용하여 사용자 컴퓨터에 저장됩니다.

먼저 FileReader의 인스턴스 객체를 생성자로 가져와야 합니다

var freader = new FileReader();

readAsDataURL() 메서드를 사용하여 지정된 콘텐츠를 읽습니다.

freader.readAsDataURL(file);

마지막으로 이벤트 처리가 있습니다. 읽기 진행 상황을 모니터링하는 것과 동일합니다. 여기서는 읽기가 완료되면 이미지를 렌더링하므로 onload

freader.onload = function(e) { console.log(e); myImg.setAttribute('src', e.target.result); }

를 사용합니다. 랙이 로드된 후 최종적으로 얻는 것은 base64로 인코딩된 src 주소입니다. 다음에는 구체적인 이유를 밝히고 base64에 대한 특별 기사를 작성하세요.

관련 기사:

jQuery+JSONP를 통한 도메인 간 요청 방법(자세한 튜토리얼)

Vue2.0 사용 http 요청 및 로딩 표시 구현

위 내용은 JS에서 FileReader를 사용하여 사진을 업로드하기 전에 로컬 미리보기 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!