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

@Component({
  selector: 'app-fileinput',
  templateUrl: './fileinput.component.html',
  styleUrls: ['./fileinput.component.scss']
})
export class FileinputComponent {
  file!: File;
  fileData: any = ""
  fileList: File[] = []

  /**
   * 文件选择器 选择文件触发事件
   * @param event 
   */
  async onFileChange(event: any) {
    // 将选择的文件列表，赋值给fileList
    this.fileList = event?.target?.files
    // 默认将第一个文件，显示在展示区域
    this.setFile(event?.target?.files?.[0])
  }

  /**
   * 设置展示区域文件
   * @param file 
   */
  async setFile(file: File) {
    // 将文件设置为展示区域文件
    this.file = file
    // 加载文件DataURL，赋值给变量fileData
    if (file.type?.startsWith("text")) {
      this.fileData = await file.text();
    } else {
      this.fileData = await this.fileToDataUrl(this.file)
    }
  }

  /**
   * 根据传入文件，加载并返回DataURL
   * @param file 
   * @returns 
   */
  fileToDataUrl(file: Blob) {
    return new Promise(resolve => {
      let reader = new FileReader();
      reader.addEventListener(
        "load", () => {
          let base64 = reader.result
          resolve(base64)
        }, false,);
      if (file) {
        reader.readAsDataURL(file);
      }
    })
  }
}
