Question

我正在使用Angular的服务，该服务可以帮助我处理错误以及显示在base64上解码的文件和图像。一切正常，但是当我需要返回数据时，我很困惑。我需要将常规功能保留在带有2个键的对象中； error and base

这是我的服务代码

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ToolsService {

  constructor() {}

  viewImg(file: Blob, maxSize: number, maxHeight ?: number, maxWidth ?: number): any {

    const ret = {
      error: null,
      base: null
    };
    const fileType = /image.*/;
    if (!file.type.match(fileType)) {
      ret.error = 'The file is not an image';
      return ret;
    }

    if (Math.ceil(file.size / 1024) > maxSize) {
      ret.error = `the file is ${ Math.ceil( file.size / 1024 ) }Kb, allowed ${ ( maxSize ) }Kb`;
      return ret;
    }

    const reader = new FileReader();

    reader.onload = () => {
      const res: any = reader.result;
      const img      = new Image();
      ret.base       = res;
      img.src        = res;
      console.log( 'LOADING IMG' );

      img.onload = () => {
        console.log( 'CONVERTING IMG' );
        if (img.width > maxWidth || img.height > maxHeight) {
          ret.error = `File oversized, ${ img.width } x ${ img.height }px. Allowed ${ maxWidth } x ${ maxHeight }px`;
          return ret;
        }
        ret.base = res;
      };
    };

    reader.readAsDataURL(file);
    return ret;
  }
}

我以此方式调用服务

preview( ev: any ) {
    if( ev.target.files[0] ) {
      const base64 = this._tools.viewImg( ev.target.files[0], 250, 100, 100 );
      console.log( base64 );
    }
  }

控制台上的结果按此顺序

new.component.ts：22 {error：null，base：null}

tools.service.ts：36加载IMG

tools.service.ts：39转换IMG

在图像处理之前返回结果。我以为使用Promise，但我对它们没有经验。

我该如何解决？

变量在处理函数之前返回

0 个答案: