如何使用angular2在API中存储base64图像字符串?

时间:2018-07-30 11:50:27

标签: angular

我是新手。

我的任务是将图像转换为base64字符串,并将该字符串存储在API json中。

我已将图像正确转换为字符串格式,但是我不知道如何在我的后端存储该字符串。拜托,我需要你们。

    HTML
    ----
    <div class="col-lg-8">
    <input type="file" accept="image/*"
    (change)="changeListener($event)">
    <div *ngIf="imageToShow">
        <img src="{{imageToShow}}" class= "center" alt="">
    </div>
    </div>

    TS
    ---
    imageToShow: string = null;

   ngOnInit() {
   this.category_info = JSON.parse
('{"category":{"image":"","name":"","description":""
,"definition":"","type":"","title":"","icon_name":""}}');
   }
    changeListener($event) : void {
      this.readThis($event.target);
    }

    readThis(inputValue: any): void {
      var file:File = inputValue.files[0];
      var myReader:FileReader = new FileReader();
      myReader.onloadend = (e) => {
        this.imageToShow = myReader.result;
        console.log(this.imageToShow);
      }
      myReader.readAsDataURL(file);
    }  

1 个答案:

答案 0 :(得分:0)

From the Base64 String, Please remove Content Type string **'data:image/png;base64,'**. You can send the Base64 content string to the Backend API as POST method using Angular HTTPClient Service.

JSON Structure:

    {
        id: 0,
        content-type: :image/png
        base64-content : "image base64 content"
    }