Question

当我订阅由在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

Answer 1

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

animation

现在，在选择文件后，该组件将告诉父组件我已经准备好，然后可以将fromControl补丁设置为true。上例中，父组件的HTML例如$ event等于字符串“ ready”：

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');
        }
    }

}

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

订阅使用FormControl进行的输入类型文件更改吗？

1 个答案: