각도 2 - 파일 업로드 액세스

Question

<div class="fileUpload btn btn-primary"> 
    <span>Choose File</span> 
    <input id="uploadBtn" type="file" class="upload" value="No File Selected" #uploadBtn/> 
</div> 
<input id="uploadFile" placeholder="No File Chosen" disabled="disabled" value="{{uploadBtn.value}}"/> 

사용자가 업로드 한 파일에 어떻게 액세스합니까? 파일에서 데이터를 처리해야하므로 (예 : 유효한 파일 형식을 확인하는 등) 각도 및 타이프 스크립트에서 어떻게해야합니까?

Answer 1

자바 스크립트에서와 거의 같은 방식입니다.

위의 내용이 FileUploadComponent이라는 구성 요소를 말하는 템플릿이라면 다음과 같이 할 수 있습니다. 이 번호는 HTML5입니다. 그래서 IE10에서 브라우저를 지원합니다.

@Component({ 
    selector: 'file-upload', 
    template: ` 
     ... 
     <input type="file" class="upload" (change)="_onChange($event.target.files)"> 
     ...` 
}) 
export class FileUploadComponent { 

    private _onChange(files: FileList) : void { 
     if(files && files.length > 0) { 
       let file : File = files.item(0); 
       //Now you can get 
       console.log(file.name); 
       console.log(file.size); 
       console.log(file.type); 
     } 
    } 

} 

이 기능을 확장하여 FileReader을 사용하여 파일을로드 할 수 있습니다.

예를 들어 당신이 csv 파일을 읽고 싶은 경우 : file와의

시작 :

let reader: FileReader = new FileReader(); 

reader.onload = (e) => { 
    let csv: string = reader.result; 
    console.log(csv); 
    //From here you can either use a csv parse library, or your own 
    //implementation if you know what the structure of the csv is 
} 

reader.readAsText(file);