Question

我正在尝试将文件转换为Base64并将字符串存储为自变量：

  sellersPermitString: string;
  DriversLicenseString: string;
  InteriorPicString: string;
  ExteriorPicString: string;

这是我正在使用的方法，它仅允许我将base64保存到imageSrc

imageSrc;
handleInputChange(files) {
    var file = files;
    var pattern = /image-*/;
    var reader = new FileReader();
    if (!file.type.match(pattern)) {
      alert('invalid format');
      return;
    }
    reader.onloadend = this._handleReaderLoaded.bind(this);
    reader.readAsDataURL(file);
  }
  _handleReaderLoaded(e) {
    let reader = e.target;
    var base64result = reader.result.substr(reader.result.indexOf(',') + 1);
    this.imageSrc = base64result;
    console.log(this.imageSrc)
  }

这就是我试图将base64的值保存到变量中的方式，但是我没有得到只有其他文件的第一个文件。

 public picked(event, field) {
    let fileList: FileList = event.target.files;
    if (fileList.length > 0) {
      const file: File = fileList[0];
      if (field == 1) {
        this.sellersPermitFile = file;
        this.handleInputChange(file); //turn into base64
        this.sellersPermitString = this.imageSrc;
        console.log(this.sellersPermitString)
      }
      else if (field == 2) {
        this.DriversLicenseFile = file;
        this.handleInputChange(file); //turn into base64
        this.DriversLicenseString = this.imageSrc;
        console.log(this.DriversLicenseString)
      }
      else if (field == 3) {
        this.InteriorPicFile = file;
        this.handleInputChange(file); //turn into base64
        this.InteriorPicString = this.imageSrc;
        console.log(this.InteriorPicString)
      }
      else if (field == 4) {
        this.ExteriorPicFile = file;
        this.handleInputChange(file); //turn into base64
        this.ExteriorPicString = this.imageSrc;
        console.log(this.ExteriorPicString)
      }
    }
    else {
      alert("No file selected");
    }
  }

有什么想法吗？

换句话说，我想有一个方法来接收文件和一个变量来存储结果base64。

Stackblitz example.

Answer 1

将图像转换为base64是异步操作，这就是为什么文件未定义的原因，因为此行

this.sellersPermitString = this.imageSrc;

在将图像转换为base64之前执行第二次问题

    this.DriversLicenseString = this.imageSrc;

DriversLicenseString将包含第一个文件的值。

设置该值的安全位置为_handleReaderLoaded

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {


  imageSrc;
  sellersPermitFile: any;
  DriversLicenseFile: any;
  InteriorPicFile: any;
  ExteriorPicFile: any;
  //base64s
  sellersPermitString: string;
  DriversLicenseString: string;
  InteriorPicString: string;
  ExteriorPicString: string;
  //json
  finalJson = {};

  currentId: number = 0;

  addPictures() {
    this.finalJson = {
      "sellersPermitFile": this.ExteriorPicString,
      "DriversLicenseFile": this.DriversLicenseString,
      "InteriorPicFile": this.InteriorPicString,
      "ExteriorPicFile": this.ExteriorPicString
    }
  }
  public picked(event, field) {
    this.currentId = field;
    let fileList: FileList = event.target.files;
    if (fileList.length > 0) {
      const file: File = fileList[0];
      if (field == 1) {
        this.sellersPermitFile = file;
        this.handleInputChange(file); //turn into base64
      }
      else if (field == 2) {
        this.DriversLicenseFile = file;
        this.handleInputChange(file); //turn into base64
      }
      else if (field == 3) {
        this.InteriorPicFile = file;
        this.handleInputChange(file); //turn into base64
      }
      else if (field == 4) {
        this.ExteriorPicFile = file;
        this.handleInputChange(file); //turn into base64

      }
    }
    else {
      alert("No file selected");
    }
  }


  handleInputChange(files) {
    var file = files;
    var pattern = /image-*/;
    var reader = new FileReader();
    if (!file.type.match(pattern)) {
      alert('invalid format');
      return;
    }
    reader.onloadend = this._handleReaderLoaded.bind(this);
    reader.readAsDataURL(file);
  }
  _handleReaderLoaded(e) {
    let reader = e.target;
    var base64result = reader.result.substr(reader.result.indexOf(',') + 1);
    //this.imageSrc = base64result;
    let id = this.currentId;
    switch (id) {
      case 1:
        this.sellersPermitString = base64result;
        break;
      case 2:
        this.DriversLicenseString = base64result;
        break;
      case 3:
        this.InteriorPicString = base64result;
        break;
      case 4:
        this.ExteriorPicString = base64result;
        break
    }

    this.log();
  }

  log() { 
    // for debug
    console.log('1', this.sellersPermitString);
    console.log('2', this.DriversLicenseString);
    console.log('3', this.InteriorPicString);
    console.log('4', this.ExteriorPicString);
  }

}

stackblitz example

如何将字符串变量作为参数发送到onload函数

1 个答案: