使用angular2将文件转换为base64文件

我想使用Angular2并使用一个通过base64字符串获取文件的Web服务

在（成功地）通过http获取文件数据之后，尝试了很多事情。 但我没有进入base64，这是非常令人沮丧的。。。如果有人能给我一个有用的提示，那就太好了

[import {Component, OnInit} from '@angular/core';
import {DemoService} from './demo.service';
import {Observable} from 'rxjs/Rx';
import {Http} from '@angular/http';

@Component({
  selector: 'demo-app',
  template:`
  <h1>Get IP Address online</h1> <br>
  text2 bac  {{orderString}}<br>
  <b>json</b>: {{data}} <br>
  <b>json</b>: {{data2}} <br>
  <b>json</b>: {{data3}} <br>
  `
})


export class AppComponent {

  public order: any;
  public orderString:string;
  public lastname : string;
  public data: any;
  public data2: any;
  public data3: any;


  constructor(private http:Http) {
    console.log('constructor');
    this.orderString = 'TEST';


    var reader: FileReader;

    this.http.get('test.png')
        .subscribe(res => {
          var x: any;
          //this.data = res.blob();
          this.data2 = res.text();
          //this.data3 = btoa(res.arrayBuffer.toString());
          var fileString: string;

          reader = new FileReader();

          reader.onloadend = function() { 
             fileString = reader.result;             
             alert(fileString);
          }
          reader.onload = function() { 
             fileString = reader.result;             
             alert(fileString);
          }

          reader.readAsDataURL(res.blob());
          reader.readAsBinaryString(res.blob());

          this.data3 = fileString;
        });

        //new base64encodeexample().encodeFile('kaikaito-app-icon.png');
  }

  ngOnInit() {
    console.log('ngOnInit');
    this.orderString = 'TEST';
  }
}][1]

[从'@angular/core'导入{Component，OnInit}”；
从“./demo.service”导入{DemoService}；
从'rxjs/Rx'导入{Observable}；
从'@angular/Http'导入{Http}；
@组成部分({
选择器：“演示应用程序”，
模板：`
联机获取IP地址

text2 bac{{orderString}}

json:{{data}}

json:{{data2}}

json:{{data3}}

`
})
导出类AppComponent{
公共秩序：任何；
public orderString:string；
公共姓氏：字符串；
公共数据：任何；
公共数据2：任何；
公共数据3：任何；
构造函数（专用http:http）{
console.log（'constructor'）；
this.orderString='TEST'；
var阅读器：文件阅读器；
this.http.get（'test.png'）
.订阅（res=>{
var x：任何；
//this.data=res.blob（）；
this.data2=res.text（）；
//this.data3=btoa（res.arrayBuffer.toString（））；
var fileString:string；
reader=newfilereader（）；
reader.onloadend=函数（）{
fileString=reader.result；
警报（文件字符串）；
}
reader.onload=函数（）{
fileString=reader.result；
警报（文件字符串）；
}
reader.readAsDataURL（res.blob（））；
reader.readAsBinaryString（res.blob（））；
this.data3=fileString；
});
//新的base64encodeexample（）.encodeFile（'kaikaito-app-icon.png'）；
}
恩戈尼尼特（）{
console.log（'ngOnInit'）；
this.orderString='TEST'；
}
}][1]

像这样调用方法 演示：

---

您可以将其包装在observable中，也可以针对您的文件对其进行自定义

谢谢您的片段。我也可以通过TypScript来实现这一点，因为它看起来像JavaScript代码片段。。。

import { Observable, Observer } from "rxjs";
convertFileToDataURLviaFileReader(url: string) {
 Observable.create((observer: Observer) => {
  let xhr: XMLHttpRequest = new XMLHttpRequest();
  xhr.onload = function() {
   let reader: FileReader = new FileReader();
   reader.onloadend = function() {
    observer.next(reader.result);
    observer.complete();
   }
   reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
 });
}

convertFileToDataURLviaFileReader(`xyz.com/a.png`).subscribe(base64 => {
 console.log(base64);
});