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

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

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

 
{{diagnostic}}

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

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

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

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

Я думаю, что это не поддерживается. Если вы посмотрите на эту директиву 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: ` 
`, providers: [ UploadService ] }) export class AppComponent { onChange(event) { var files = event.srcElement.files; console.log(files); } }
 @Component({ selector: 'my-app', template: ` 
`, providers: [ UploadService ] }) export class AppComponent { file: File; onChange(event: EventTarget) { let eventObj: MSInputMethodContext = event; let target: HTMLInputElement = eventObj.target; let files: FileList = target.files; this.file = files[0]; console.log(this.file); } doAnythingWithFile() { } }

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

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

 @Component({ selector: 'my-app', template: ` 
`, providers: [ UploadService ] }) export class AppComponent { onChange(files) { console.log(files); } }

Вот пример приложения, чтобы продемонстрировать это в действии.

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

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

 import { ViewChild } from '@angular/core'; @Component({ selector: 'my-app', template: ` 
` }) export class AppComponent { @ViewChild("fileInput") fileInputVariable: any; randomMethod() { const files = this.fileInputVariable.nativeElement.files; console.log(files); } }

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

Попробуйте эту небольшую библиотеку, работает с Angular 5.0.0

Пример быстрого запуска с ng2-file-upload 1.3.0:

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

app.module.ts:

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

your.component.html:

 ...   ... 

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 { (window.document.getElementById('myFileInputField')) .value = ""; } 

Альтернативный lib, работает в Angular 4.2.4, но требует некоторых обходных решений для использования в Angular 5.0.0

Если у вас сложная форма с несколькими файлами и другими входами, это решение, которое отлично ngModel с ngModel .

Он состоит из компонента ввода файла, который обертывает простой ввод файла и реализует интерфейс ControlValueAccessor чтобы сделать его потребляемым ngModel . Компонент предоставляет объект ngModel для ngModel .

Это решение основано на этой статье.

Компонент используется следующим образом:

   

Вот код компонента:

 import { Component, Input, forwardRef } from '@angular/core'; import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; const noop = () => { }; export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FileInputComponent), multi: true }; @Component({ selector: 'file-input', templateUrl: './file-input.component.html', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR] }) export class FileInputComponent { @Input() public name:string; @Input() public inputId:string; private innerValue:any; constructor() { } get value(): FileList { return this.innerValue; }; private onTouchedCallback: () => void = noop; private onChangeCallback: (_: FileList) => void = noop; set value(v: FileList) { if (v !== this.innerValue) { this.innerValue = v; this.onChangeCallback(v); } } onBlur() { this.onTouchedCallback(); } writeValue(value: FileList) { if (value !== this.innerValue) { this.innerValue = value; } } registerOnChange(fn: any) { this.onChangeCallback = fn; } registerOnTouched(fn: any) { this.onTouchedCallback = fn; } changeFile(event) { this.value = event.target.files; } } 

И вот шаблон компонента:

  
  • Нет провайдера для AngularFireDatabase, AngularFireAuth
  • Что такое ngDefaultControl в Angular?
  • ctorParameters.map не является функцией в угловом2-mdl
  • Использование ui-router с Bootstrap-ui modal
  • В Angular, как вы определяете активный маршрут?
  • Angular2 Tutorial (Tour of Heroes): Не удается найти модуль 'angular2-in-memory-web-api'
  • Angularjs: Служба, которая обслуживает несколько URL-адресов ресурсов / источников данных?
  • RouterModule.forRoot (ROUTES) vs RouterModule.forChild (ROUTES)
  • В противном случае на StateProvider
  • Как получить JSON-файл в Angular 2
  • Угловая привязка HTML
  • Interesting Posts

    Как отключить политику безопасности с помощью защищенного клиента VPN-1 контрольной точки?

    Общие рекомендации и рекомендации по правильному переопределению объекта. GetHashCode ()

    Односторонний Android-ход?

    См. Доступные диски из Windows CLI?

    Почему мой Intel i7-920 отображает 8 ядер вместо 4 ядер?

    rails от многих до многих

    Как сравнить два цвета для сходства / разницы

    Укажите следующую загрузку в безопасном режиме / WinRE через командную строку?

    Когда Hibernate сбрасывает сеанс, как он решает, какие объекты в сеансе загрязнены?

    Как заставить Chrome распознавать одно слово-запрос как поиск, а не URL-адрес

    Как убить задачи в Windows 7, когда даже диспетчер задач не откроет или не ответит?

    Отсутствие суммы и сумма заказа в PayPal Express Checkout

    Шифрование zip действительно плохо?

    Как указать дополнительные внешние папки хранения (точки подключения)?

    конвертировать письма в номера

    Давайте будем гением компьютера.