时间戳

首页 > 解决方案 > 使用 FormControl 订阅输入类型文件更改？

javascript - 使用 FormControl 订阅输入类型文件更改？

问题描述

当我订阅一个FormControl.valueChanges()由在一个文件上选择一个文件触发的时，input发出的值不包含所选文件的完整路径。是否可以通过订阅获取此信息，或者我们是否必须直接将其从元素中提取出来@ViewChild才能直接访问该元素？设置如下所示：

<input #file name='file' id='file' type='file' [formControl]='loadButton'/>

它的订阅是这样的：

this.loadButton.valueChanges
    .pipe(untilDestroyed(this))
    .subscribe(path => {
      console.dir(path);
    });
}

选择文件后，记录的语句如下所示：

C:\fakepath\test.png

标签： javascriptangulartypescriptrxjshtml5-filesystem

解决方案

在我的项目中，我在一个组件中完成了它，例如：

import { Component, EventEmitter, Output } from '@angular/core';
@Component({
  selector: 'app-image-uploader',
  template: '<input type="file" (change)="onUploadFileChanged($event)" />',
})
export class ImageUploaderComponent implements OnInit {
    @Output() uploadStatusChange = new EventEmitter<any>();
    onUploadFileChanged(event) {
        this.targetElement = event.target;
        if (event.target.files && event.target.files[0]) {
            component.uploadStatusChange.emit('ready');
        }
    }

}

现在，选择文件后，组件会告诉父组件我准备好了，然后您可以将 fromControl 补丁设置为 true。父组件的 HTML 就像上面例子中的 $event 等于字符串 'ready'：

<app-image-uploader (uploadStatusChange)="yourFunction($event)"></app-image-uploader>

对于图像，您也可以在上传前使用 FileReader 显示它。

推荐阅读