Угловая 2 Загрузка файла из входного типа = файл

Question

Использование угловой 2-бета-версии, и я не могу получить ввод файла типа для работы.

Используя диагностику, я могу видеть двустороннюю привязку для других type s, таких как текст.

<form> 
    {{diagnostic}} 
    <div class="form-group"> 
     <label for="fileupload">Upload</label> 
     <input type="file" class="form-control" [(ngModel)]="model.fileupload"> 
    </div> 
</form> 

В моем файле транскрипта я имею диагностическую линию в наличии:

get diagnostic() { return JSON.stringify(this.model); } 

Может быть, что это вопрос не является JSON? Значение null.

Я не могу проверить значение ввода; так или иначе, хотя текст рядом с «Выбрать файл ...» обновляется, я не вижу различий в DOM.

Answer 1

Я думаю, что это не поддерживается. Если вы посмотрите на эту директиву DefaultValueAccessor (см. https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/directives/default_value_accessor.ts#L23). Вы увидите, что значение, используемое для обновления связанного элемента, равно $event.target.value.

Это не относится к входу с типом file, так как файл-объект может быть достигнут $event.srcElement.files.

Для получения более подробной информации вы можете посмотреть на этом plunkr: https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p=info:

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <input type="file" (change)="onChange($event)"/> 
    </div> 
    `, 
    providers: [ UploadService ] 
}) 
export class AppComponent { 
    onChange(event) { 
    var files = event.srcElement.files; 
    console.log(files); 
    } 
} 

Answer 2

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <input name="file" type="file" (change)="onChange($event)"/> 
    </div> 
    `, 
    providers: [ UploadService ] 
}) 
export class AppComponent { 
    file: File; 
    onChange(event: EventTarget) { 
     let eventObj: MSInputMethodContext = <MSInputMethodContext> event; 
     let target: HTMLInputElement = <HTMLInputElement> eventObj.target; 
     let files: FileList = target.files; 
     this.file = files[0]; 
     console.log(this.file); 
    } 

    doAnythingWithFile() { 
    } 

} 

Answer 3

Существует немного лучший способ получить доступ к присоединенным файлам. Вы можете использовать template reference variable, чтобы получить экземпляр элемента ввода.

Вот пример, основанный на первом ответе:

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <input type="file" #file (change)="onChange(file.files)"/> 
    </div> 
    `, 
    providers: [ UploadService ] 
}) 

export class AppComponent { 
    onChange(files) { 
    console.log(files); 
    } 
} 

Вот example app продемонстрировать это в действии.

Возможно использование ссылочных переменных шаблона, например. вы можете получить к ним доступ через @ViewChild непосредственно в контроллере.

Answer 4

Попробуйте эту маленькую LIB, работает с угловыми 5.0.0

• https://www.npmjs.com/package/ng2-file-upload

например Quickstart с NG2-файл-загрузки 1.3.0:

Пользователь нажимает пользовательскую кнопку, который запускает диалог загрузки из скрытого типа ввода = «файл», загрузка начинается автоматически после выбора одного файла.

app.module.ts:

import {FileUploadModule} from "ng2-file-upload"; 

your.component.html:

... 
    <button mat-button onclick="document.getElementById('myFileInputField').click()" > 
    Select and upload file 
    </button> 
    <input type="file" id="myFileInputField" ng2FileSelect [uploader]="uploader" style="display:none"> 
... 

your.component.TS:

import {FileUploader} from 'ng2-file-upload'; 
...  
uploader: FileUploader; 
... 
constructor() { 
    this.uploader = new FileUploader({url: "/your-api/some-endpoint"}); 
    this.uploader.onErrorItem = item => { 
     console.error("Failed to upload"); 
     this.clearUploadField(); 
    }; 
    this.uploader.onCompleteItem = (item, response) => { 
     console.info("Successfully uploaded"); 
     this.clearUploadField(); 

     // (Optional) Parsing of response 
     let responseObject = JSON.parse(response) as MyCustomClass; 

    }; 

    // Asks uploader to start upload file automatically after selecting file 
    this.uploader.onAfterAddingFile = fileItem => this.uploader.uploadAll(); 
} 

private clearUploadField(): void { 
    (<HTMLInputElement>window.document.getElementById('myFileInputField')) 
    .value = ""; 
} 

Alternative Пб работает в угловых 4.2.4, но требует некоторых обходных путей, чтобы принять к угловому 5.0.0

• https://www.npmjs.com/package/angular2-http-file-upload

Answer 5

Другим способом использования эталонного шаблона переменного и ViewChild, как предложено Frelseren:

import { ViewChild } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <input type="file" #fileInput/> 
    </div> 
    ` 
}) 
export class AppComponent { 
    @ViewChild("fileInput") fileInputVariable: any; 
    randomMethod() { 
    const files = this.fileInputVariable.nativeElement.files; 
    console.log(files); 
    } 
} 

Также см. https://stackoverflow.com/a/40165524/4361955