Angular4在ie11上的打字稿中上传图像答案

【问题标题】：Angular4 uploading image in typescript on ie11Angular4在ie11上的打字稿中上传图像
【发布时间】：2019-03-28 18:52:30
【问题描述】：

我正在尝试将图像上传到我在 Angular 4 中的网络应用程序。我使用 readAsBinaryString() 转换输入文件并使用 btoa() 提取 ascii 代码，然后将其传递给后端服务。在 Chrome 上一切正常，但在 Internet Explorer 11 上却不行。

为了修复 ie11，我在 polyfills.ts 中添加了函数 readAsBinaryString() ：

function str2ab(str) {
  let buf = new ArrayBuffer(str.length);
  let bufView = new Uint8Array(buf);
  for (let i = 0, strLen = str.length; i < strLen; i++) {
    bufView[i] = str.charCodeAt(i);
  }
  return buf;
}

if (!FileReader.prototype.readAsBinaryString) {
  FileReader.prototype.readAsBinaryString = function (fileData) {
    let binary = '';
    let pt = this;
    let reader = new FileReader();
    reader.onload = function (e) {
      let bytes = str2ab(reader.result);
      let length = bytes.byteLength;
      for (let i = 0; i < length; i++) {
        binary += String.fromCharCode(bytes[i]);
      }
      pt.content = binary;
      pt.onload();
    };
    reader.readAsArrayBuffer(fileData);
  };
}

image.component.html

<input type="file" name="image" id="image" accept="image/png, image/jpeg" (change)="fileChange($event)" [(ngModel)]="image" placeholder="Upload image">

image.component.ts

  fileChange = function (evt) {
    let files = evt.target.files;
    let file = files[0];
    if (files && file) {
      let reader = new FileReader();
      reader.onload = (e) => { // 'e' is undefined on ie11!
        let target = <FileReader>e.target;
        let result = target.result as string;
        this.byteArray = btoa(result);
      };
      reader.readAsBinaryString(file);
    }
  };

目前使用 polyfills 在 ie11 上使用函数 readAsBinaryString()，但在函数 reader.onload 中会出现以下错误： 无法获取未定义或空引用的属性“目标”。

【问题讨论】：

标签： angular typescript internet-explorer-11 image-uploading

【解决方案1】：

您可以查看this issue，并尝试使用以下代码：

  fileChange = function (evt) {
    let files = evt.target.files;
    let file = files[0];
    if (files && file) {
      const reader = new FileReader();

      reader.onload = (event: Event) => {
        // event.target.result; // This is invalid
        console.log(reader.result); // This is valid
     };

      reader.readAsBinaryString(file);
    }
  };

【讨论】：