Question

我有一个关于base64映像的问题。我认为很多来源都不清楚这个问题。我们如何制作base64图像方法，以及如何使用Angular 5插入rest api。在我们的模型类中图像的类型是什么，例如字符串，数字，任何其他？现在，我有一个简单的示例，但是我不知道它是否正确启动。您能帮忙解决这个问题吗？也许另一个Angular Developper可以利用这种共享。

示例模型类

export class Bank {bankLogo: any;} // what is the type?

示例组件

export class BankComponent implements OnInit {
              public bankLogo:any;
              bank: Bank[];
              private imageSrc: string = '';
               //My Example Function 
              handleInputChange(e) {
                    var file = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0];
                    var pattern = /image-*/;
                    var reader = new FileReader();
              if (!file.type.match(pattern)) {
                      alert('invalid format');
                      return;
                    }
                    reader.onload = this._handleReaderLoaded.bind(this);
                    reader.readAsDataURL(file);
                    }
                   _handleReaderLoaded(e) {
                    let reader = e.target;
                    this.imageSrc = reader.result;
                    console.log(this.imageSrc)
                  }
              Create() {
              const newPost: Bank = new Bank();     
              newPost.bankLogo=this.bankLogo;
              this.bankService.CreateUser(newPost).subscribe((resp: Bank) => {
          console.log(resp); this.bank.push(resp);
        });
      }
              constructor(private bankService: BankService) { }
}

示例HTML

<div class="image-upload col-md-9 mb-5 mt-5">
          <img [src]="imageSrc" style="max-width:300px;max-height:300px"/>
          <input name="imageUrl" type="file" accept="image/*" (change)="handleInputChange($event)" [(ngModel)]="bankLogo" />
</div>

Answer 1

这是解决此主题的非常基本的方法。希望这对您有所帮助。

使用对更改事件有反应的fileChooser：

<input type="file" id="fileChooser" (change)="changeHandler($event)" />

您的打字稿文件中的更改处理程序然后读取图像并存储作为变量中的base64字符串。

private image: string;

...

changeHandler(event) {
    if (event.target.files && event.target.files[0]) {
        let reader = new FileReader();

        reader.onload = (event: any) => {
            this.image = event.target['result'];
            this.logger.info(this.image);
        };

        // .readAsDataURL() directly converts the image into a base64 string
        reader.readAsDataURL(event.target.files[0]);

    }
}

以HTML显示图像

<div [style.background-image]="'url('+ image +')' | safeStyle"
     [style.background-repeat]="'no-repeat'"
     [style.background-size]="'100% 100%'">
</div>

您可能必须使用消毒液管道。否则，浏览器将阻止您显示图像。

import { Pipe } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'safeStyle' })
export class SafeStylePipe {
  constructor(private sanitizer: DomSanitizer) { }

  transform(html) {
    return this.sanitizer.bypassSecurityTrustStyle(html);
  }
}

这个小例子应该使您可以将图像读为base64字符串并直接显示。

如何使用Angular 5中的模型类制作base64图像并插入任何api服务

1 个答案: