Блог

 <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}}"/>
  

Как мне получить доступ к файлу, загруженному пользователем? Как мне это сделать в angular и typescript, поскольку мне все еще нужно обработать данные в файле (например, проверить допустимые типы файлов)?

Почти так же, как вы бы делали в JavaScript.

Если приведенное выше является вашим шаблоном, скажем, для компонента с именем 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 amp;amp; 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);