Ionic4中同一页面使用两个ng2-file-uploader实例的异常求助

问题原因 #

多个fileUploader组件实例共用了同一个FileUploader对象，导致事件回调被所有实例共享，触发时会同时调用多个实例的onFileSelected发射器。

解决方案 #

1. 为每个组件实例创建独立的FileUploader对象 #

在组件的ngOnInit生命周期钩子中初始化专属的FileUploader实例，确保每个组件拥有独立的上传器实例：

import { Component, Input, Output, EventEmitter, OnInit, ChangeDetectorRef } from '@angular/core';
import { FileUploader, FileItem } from 'ng2-file-upload';

@Component({
  selector: 'fileUploader',
  templateUrl: './file-uploader.component.html',
  styleUrls: ['./file-uploader.component.scss']
})
export class FileUploaderComponent implements OnInit {
  @Input() url: string;
  @Input() token: string;
  @Input() autoUpload = false;
  @Input() multiple = false;
  @Input() _id: string;
  @Input() value: string;
  @Input() accept: string;
  @Input() uploadLabel: string;
  @Output() onFileSelected = new EventEmitter<[FileItem, string]>();
  @Output() onError = new EventEmitter<any>();
  @Output() onSuccess = new EventEmitter<any>();
  @Output() onCompleteAll = new EventEmitter<void>();

  public fileUploader: FileUploader;

  constructor(private ch: ChangeDetectorRef) {}

  ngOnInit() {
    // 初始化独立的FileUploader实例
    this.fileUploader = new FileUploader({
      url: this.url,
      authToken: this.token,
      autoUpload: this.autoUpload
      // 其他需要的配置项
    });

    // 绑定专属的事件回调
    this.fileUploader.onAfterAddingFile = (fileItem: FileItem) => {
      if (this.fileUploader.queue.length > 1 && !this.multiple) {
        this.fileUploader.removeFromQueue(this.fileUploader.queue[0]);
      }
      this.onFileSelected.emit(fileItem, this._id);
      this.markAsChanged();
    };

    this.fileUploader.onErrorItem = (item, response, status, headers) => {
      this.onError.emit({ item, response, status, headers });
    };

    this.fileUploader.onSuccessItem = (item, response, status, headers) => {
      this.onSuccess.emit({ item, response, status, headers });
    };

    this.fileUploader.onCompleteAll = () => {
      this.ch.detectChanges();
      this.onCompleteAll.emit();
    };
  }

  private markAsChanged() {
    this.ch.detectChanges();
  }
}

2. 优化模板中的属性绑定方式 #

将模板中的插值表达式改为属性绑定，避免潜在的字符串拼接问题，同时确保每个实例的配置独立：

<fileUploader
  #fileUploader
  [id]="item.FieldName"
  [autoUpload]="false"
  [extraData]="{label:item.Caption}"
  class="file-uploader-container"
  [url]="userData.ServiceURL + 'Attachments?UserID=' + userData.UserID + '&FormID=' + navParams.formID + '&IDValue=' + navParams.IDValue"
  [token]="userData.Token"
  [uploadLabel]="'uploadSelectImageButtonLabel' | translate"
  [value]="item.AttachPath"
  [accept]="'image/jpeg,image/png'"
  (onFileSelected)="onImageChange($event,item.FieldName)"
></fileUploader>

3. 确认组件输入属性的唯一性 #

确保每个fileUploader实例的_id（或用于标识的属性）是唯一的，比如传入item.FieldName作为实例标识，避免事件回调混淆。

验证效果 #

修改后，每个文件上传组件实例会拥有独立的上传器对象，选择文件时只会触发当前实例的onFileSelected事件，不会影响其他实例。

内容的提问来源于stack exchange，提问作者Abo Omar