如何解决Angular :使用 FormArray 读取多个文件的文件阅读器
我在从不同的输入上传多张图片时遇到问题,我有一个包含 formArray 的表单,每当我按下“添加文件”按钮时都会推送一个新的输入
this.designForm = this.fb.group({
newFiles: this.fb.array([
this.fb.control(null,Validators.required)
],Validators.required)
});
get newFiles() {
return this.designForm.get('newFiles') as FormArray;
}
addNewFiles() {
this.newFiles.push(this.fb.control(null,Validators.required));
}
按钮:<button type="button" (click)="addNewFiles()">Add new Document</button>
输入:
<div *ngFor="let newFile of newFiles.controls; let i=index">
<input type="file"
id="usecaseImage"
(change)="showPreviewImage($event)"
[formControlName]="i">
</div>
和事件方法:
showPreviewImage(event: any) {
if (event.target.files && event.target.files[0]) {
var reader = new FileReader();
reader.onload = (event: any) => {
for(let i=0;i<this.newFiles.length;i++){
console.log(this.newFiles.length);
this.designForm.value.newFiles[i] = event.target.result;
}
}
reader.readAsDataURL(event.target.files[0]);
}
}
它适用于上传,但是当我尝试预览图像时,它只会重复最后一个输入中的最后一个图像,因此如果我有 3 个带值的输入
input1 value-> X.JPG,input2 value-> Y.JPG and input3 value-> Z.JPG
它预览 Z.JPG 3 次!
编辑:预览在另一个组件中,我从原始组件的服务中填充它:
this.designForm = this.sdlcService.designForm ;
然后我循环获取我有多少表单(我提交表单的次数)和另一个循环获取单个表单中有多少输入(上传了多少图像)使用键值管道提取值。
<div *ngFor="let form of designForm ;let d = index">
<img [src]="input.value" *ngFor="let input of form | keyvalue;let s = index">
</div>
我该如何处理?
解决方法
这是一个典型的解决方案(Angular)
模板
<button class="" (click)="uploader.click()">
<input hidden type="file" multiple #uploader (change)="onFileInputChange($event)" />
</button>
ts
attachments: File[] = [];
----------------------------
onFileInputChange($event: any) {
if (!$event.target.files) {
return;
}
Array.from($event.target.files).forEach((f: File) => {
if (!this.attachments.find((i) => i.name === f.name)) {
this.attachments.push(f);
}
});
}
async onSubmit() {
if (!this.attachments.length) {
return;
}
const attachments = await Promise.all(this.attachments.map(this.fileToDataURL));
// add any action you want,here you got an array of dataUri
}
fileToDataURL(file_: File) {
const reader = new FileReader();
// tslint:disable-next-line:no-unused
return new Promise((resolve,reject) => {
reader.readAsDataURL(file_);
reader.addEventListener(
'load',function (event) {
resolve(event.target.result);
},false,);
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。