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

Question

当我订阅由在 input 上选择文件触发的 FormControl.valueChanges() 时，发出的值不包含所选文件的完整路径。是否可以通过订阅获取此信息，或者我们是否必须直接使用 @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

Answer 1

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

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 patch 为 true。父组件的 HTML 例如，对于上面的例子，$event 等于字符串 'ready':

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

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

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

Subscribing to input type file changes with FormControl?

javascript

rxjs

html5-filesystem

typescript

angular