在Angular 8中,当使用ReactiveForm来处理文件上传时,确实存在一个问题,即在Edge浏览器上无法正确识别输入类型为“file”的值。这是由于Edge浏览器的一些限制导致的。
为了解决这个问题,可以使用以下代码示例:
首先,创建一个ReactiveForm表单,并添加一个文件上传控件:
import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';
@Component({
selector: 'app-file-upload',
template: `
`,
})
export class FileUploadComponent {
fileUploadForm;
constructor(private formBuilder: FormBuilder) {
this.fileUploadForm = this.formBuilder.group({
file: ['']
});
}
onFileChange(event) {
if (event.target.files.length > 0) {
const file = event.target.files[0];
this.fileUploadForm.get('file').setValue(file);
}
}
uploadFile() {
const formData = new FormData();
formData.append('file', this.fileUploadForm.get('file').value);
// 发送文件上传请求
}
}
然后,为了在Edge浏览器上正常工作,我们需要添加一个polyfill,这样可以将文件上传控件的值正确地设置为选择的文件:
(window as any).global = window; // 添加这行代码
现在,在Edge浏览器上,文件上传控件的值应该能够被正确地识别和设置了。
希望这个解决方法对你有帮助!