在Angular 6中,可以使用FormData
对象来处理单个表单组中的多文件输入。以下是一个解决方案的示例代码:
首先,在HTML模板中,创建一个包含多个文件输入的表单组:
然后,在组件的TypeScript文件中,定义选中的文件数组变量和上传文件的方法:
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'app-file-upload',
templateUrl: './file-upload.component.html',
styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent {
selectedFiles: FileList;
@ViewChild('filesInput') filesInput;
uploadFiles() {
const formData = new FormData();
const files = this.selectedFiles;
for (let i = 0; i < files.length; i++) {
formData.append(`file${i}`, files[i]);
}
// 发送文件到服务器
// 可以使用HttpClient来发送formData对象
// this.http.post('upload-url', formData).subscribe(response => {
// console.log(response);
// });
// 清空文件输入字段
this.filesInput.nativeElement.value = '';
}
}
在uploadFiles()
方法中,创建一个FormData
对象,并使用append()
方法将选中的文件添加到该对象中。然后,可以使用Angular的HttpClient
服务来发送formData
对象到服务器。在示例代码中,我们注释了发送请求的部分。
最后,清空文件输入字段的值,以便下一次选择文件。
这是一个简单的解决方案,可以在Angular 6中使用单个表单组中的多文件输入。