Question

我知道有类似的问题，但没有一个涵盖Angular 5的方法，或者至少没有以我理解的方式涵盖。

对于我的图片上传系统，我需要知道图片是否附在输入标签上以及文件的名称。这是我的代码：

HTML：

<input 
  type="file" 
  [(ngModel)]="currentInput"
  (change)="onFileSelected($event)"
>

角度：

export class ImageUpload {
    currentInput;

    onFileSelected(event) {
        console.log(this.currentInput);
    }
}

无论是否附加了文件，“ currentInput”中的值始终是未定义的。类型等于“文件”时如何处理输入？

谢谢！

Answer 1

尝试以下方式

####################################################################

Unable to execute the selected commands

Mongo Server error (MongoCommandException): Command failed with error 16436: 'Unrecognized pipeline stage name: '$where'' on server localhost:27017. 

The full response is:
{ 
    "ok" : 0.0, 
    "errmsg" : "Unrecognized pipeline stage name: '$where'", 
    "code" : NumberInt(16436)
}

####################################################################

Answer 2

给名称输入字段，这是一个要求：https://angular.io/guide/forms#!#ngModel。另外，您已经在类外部定义了该函数。函数和属性都需要放在一个类中。

更新：文件输入类型不支持数据绑定。需要使用纯JavaScript来完成。

<input 
  type="file" 
  name = "currentInput"
  [(ngModel)]="currentInput"
  (change)="onFileSelected($event)"
>

export class ImageUpload {
  currentInput:any;
  onFileSelected(event) {
    console.log(event.target.files);
    this.currentInput = event.target.files; 
  }
}

Answer 3

尝试下面的代码。它使用事件发射器来侦听输入更改并返回文件对象及其元数据。试试看。我喜欢的是您不需要外部库。

//In your component, create a function that emits an event on file selected
import {Component, OnInit, EventEmitter} from '@angular/core';

public onFileSelected(event: EventEmitter<File[]>) {
    const file: File = event[0];
    console.log(file);
}

// In your html, attach the function to the input tag like so
<input type="file" id="file" (change)="onFileSelected($event)">

Angular 5如何从类型=文件的输入中获取文件名

3 个答案: