Question

如何将FileReader.readAsDataURL结果分配给（全局）变量供以后使用？

我知道FileReader.result工作asyc并且可以在reader.onload = function（）{...}中使用但是我无法将它分配给全局var（来自匿名回调内部）供以后使用。

我用Google搜索并在stackoverflow上找到了一些提示，但没有什么能真正帮助我。有什么建议？

这是我的代码：

app.component.ts：

export class AppComponent {

  postData: PostData;

  image: File;
  status: string;
  imageBase64: string

  constructor(private http: Http ) {
    this.imageBase64 = '';
  }

  fileChangeEvent(fileInput: any) {
    if (fileInput.target.files && fileInput.target.files[0]) {
      let file  = fileInput.target.files[0];
      let preview = document.querySelector('img')

      let reader = new FileReader();

      this.image = file;

      reader.onload = function (e: any) {
        let b64 = e.target.result   

        // this.imageBase64 = b64;  // undefinded here  

        preview.src = b64;
        console.log(file);
        console.log(b64);
      }

      reader.readAsDataURL(this.image);
    }
}

  uploadimage() {
  // do something later with the bae64 reader.result - after upload button pressed
  }

app.component.html：

<label>Choose a file</label> 
<input type="file" class="inputfile" accept="image/*"(change)="fileChangeEvent($event)">
<img id="preview" src="" height="200" alt="Image preview...">
<button (click)="uploadimage()">Upload Image</button>

Answer 1

首先，你有错误的this。在function内部，this动态绑定到调用该函数的对象，如果它被调用为方法。如果函数不是作为方法调用的，this在严格模式下是undefined（模块和类体是隐式严格的），否则它默认为全局对象。

this也可以使用Function.prototype.bind绑定到特定对象。调用时，bind返回的函数会将其解析为指定的对象。

function fullname() {
  return this.first + '_' this.last;
}

const philip = {first: 'Philip', last: 'Pullman'};
const philipsFullname = fullname.bind(philip);
console.log(philipsFullname()); // Philip Pullman

this也可以在没有中间对象的情况下使用Function.prototype.call进行调用。

console.log(fullname.call(philip)); // Philip Pullman

使用箭头功能(params) => expression or block。箭头函数静态绑定this。在所有函数中，除此之外，一切都是静态绑定的。在箭头函数中，一切都是静态绑定的。

export class AppComponent {
  fileChangeEvent(fileInput: HTMLInputElement) {

    reader.onload = e => {
      const b64 = e.target.result   
      this.imageBase64 = b64; 

      preview.src = b64;

      console.log(file);
      console.log(b64);
      window.IMAGE_RESULT = b64;
    };
  }
}


declare global {
  interface Window {
    IMAGE_RESULT?: string;
  }
}

将FileReader结果分配给（全局）变量以供以后使用

1 个答案: