Question

我有一些代码片段

  public onChange(event: Event) {
      this.loadFiles();
  };


  loadFiles() {
    let files = event.target['files'];
    for (var i = 0; i < files.length; i++) {
      if (FileReader && files && files.length) {
        let fileReader = new FileReader();
        fileReader.onload = () => {
          let infoFile: string = fileReader.result;
          this.list.push(infoFile);
        };
        fileReader.readAsDataURL(files[i]);
      }
    }
  }

  loadImage() {
    this.imageService.setImage(this.list);
    this.isClicked = true;
    this.imageLoadedEvent.emit(this.isClicked);
  }

我是javascript的新手，我想执行loadImage()函数onChange()。我尝试在loadFile()中使用类似的内容我尝试在loadFiles()

中使用类似的内容

     let promise = new Promise(resolve => {
        resolve(this.list);
      });

      promise.then(response => {
        this.imageService.setImage(this.list);
        this.isClicked = true;
        this.imageLoadedEvent.emit(this.isClicked);
      });

但是这段代码为每个迭代循环执行。也许可以在loadImage()函数中执行onChange()函数只有一个？我也尝试过类似的东西

    public onChange(event: Event) {
    this.loadFiles();
    let promise = new Promise(resolve => {
      this.loadFiles();
      console.log(this.list.length);
      resolve('success');
    });
    promise.then(response => {
      console.log(this.list.length);
      //this.loadImage();
    });
  };

但是promise的执行速度比loadFiles()快，而length则等于0。

Answer 1

我不明白你为什么要在onChange之后执行加载图像但如果你想要你可以轻松执行如果你把这段代码

public onChange(event: Event) {
  this.loadFiles();
  setTimeout(loadImage, 100);
};

但是如果你想使用promise你可以用这种方式填充this.list，我看到你想要执行loadImage：

public onChange(event: Event) {
  let myPromise = new Promise(this.loadFiles);
  myPromise.then(this.loadImage).catch(function(err) {
    console.log(err);
  });
};


loadFiles(resolve: () => void, reject: (_: string) => void) {
  let files = event.target['files'];
  for (var i = 0; i < files.length; i++) {
    if (FileReader && files && files.length) {
      let fileReader = new FileReader();
      fileReader.onload = () => {
        let infoFile: string = fileReader.result;
        this.list.push(infoFile);
        resolve();
      };
      try {
        fileReader.readAsDataURL(files[i]);
      } catch (err) {
        reject(err);
      }
    }
  }
}

loadImage() {
  this.imageService.setImage(this.list);
  this.isClicked = true;
  this.imageLoadedEvent.emit(this.isClicked);
}

我认为你想要一个首先读取所有文件的方法，然后用该列表调用loadImage方法，所以也许我会这样做：

public onChange(event: Event) {
  this.loadFiles();
};


loadFiles() {
  let files = event.target['files'];
  for (var i = 0; i < files.length; i++) {
    if (FileReader && files && files.length) {
      let fileReader = new FileReader();
      fileReader.onload = () => {
        let infoFile: string = fileReader.result;
        this.list.push(infoFile);
        if (this.list.length === files.length) {
          this.loadImage()
        }
      };
      fileReader.readAsDataURL(files[i]);
    }
  }
}

loadImage() {
  this.imageService.setImage(this.list);
  this.isClicked = true;
  this.imageLoadedEvent.emit(this.isClicked);
}

注意：我没有太多使用类型脚本，所以参数可能不同。

Answer 2

这是我为使用过的承诺而辞职的解决方案

  public file_srcs: string[] = [];
  loadedFiles: number = 0;
  allFiles: number = 0;
  list: string[] = [];
  isClicked: boolean = false;
  @Output() imageLoadedEvent = new EventEmitter < boolean > ();

  constructor(private imageService: ImageService) {}

  ngOnInit() {}

  public onChange(event: Event) {
    this.loadFiles();
  };

  loadFiles() {
    let files = event.target['files'];
    let promises = [];
    this.allFiles = files.length;

    for (var i = 0; i < files.length; i++) {
      let fileReader = new FileReader();
      fileReader.onload = () => {
        let infoFile: string = fileReader.result;
        console.log(infoFile);
        this.list.push(infoFile);
        this.loadedFiles++;
        this.loadImage();
      }
      if (fileReader && files && files.length) {
        fileReader.readAsDataURL(files[i]);
      }
    }
  }

  loadImage() {
    if (this.loadedFiles == this.allFiles) {
      this.imageService.setImage(this.list);
      this.isClicked = true;
      this.imageLoadedEvent.emit(this.isClicked);
    }
  }

如何执行某些功能

2 个答案: