在 Angular 2 中将输入文件转换为 Base64，而不使用 Ionic V2 中的 FileReader答案

【问题标题】：Convert Input File to Base64 in Angular 2 without using FileReader In Ionic V2在 Angular 2 中将输入文件转换为 Base64，而不使用 Ionic V2 中的 FileReader
【发布时间】：2017-05-02 08:57:02
【问题描述】：

我在 ionic v2 应用程序中将输入文件对象转换为 Base64 时遇到问题。这个问题在使用 onload/onloadend 阅读器时特别会出现，因为它只是偶尔被调用（最罕见的非常具体）。

当用户单击触发 attachFile 函数的图像文件时，我能够获取文件名、大小和对象，但之后当我使用 FileReader 将文件对象转换为 Base64 时 - onload 或 onloadend 回调函数很少被调用并且文件对象没有因此被转换为 Base64。

文件输入：

<input #fileInput type="file" accept="image/*" (change)="attachFile($event)">

附加文件：

attachFile(fileInput: any)
{
  let fileList: FileList = fileInput.target.files;

  // I can access the selected file name, size and object correctly without any issues
  console.log("File name = " + fileList[0].name);
  console.log("File size = " + fileList[0].size);
  console.log("File = " + fileList[0]);

  // Converting the file input to base 64 (This rarely works)
  this.convertFileToBase64AndSet(fileList);
}

Base64 转换：

convertFileToBase64AndSet(fileList: FileList)
{
   if(fileList.length > 0)
  {
    var reader = new FileReader();

      reader.onloadend = (e: Event) => {

      console.log(reader.result);
    }

    reader.readAsDataURL(fileList[0]);
  }
}

如果这完全不起作用，我可以理解，但在我的 Android 手机中调用 onload/onloadend 回调并成功将对象转换为 Base64 的情况很少见。

包括 onerror 在内的任何回调都不会被调用，除非像我之前提到的那样是最罕见的情况。
Web 浏览器中的相同代码运行良好，回调成功调用并将文件对象转换为 Base64。

所以这给我留下了很少的选择，我无法找到为 Angular 2 量身定制的体面的 Base64 转换插件，因为周围的大多数插件都只适用于旧的 Angular。

一个这样的角度插件有很大的希望 - angular-base64-upload 但我无法弄清楚如何在角度 2 中运行它，因为说明是专门针对旧角度的。

肯定有办法达到这个要求，任何线索都将受到高度赞赏。

我的要求也是 Base64 转换插件不应该依赖于任何文件路径，应该直接转换从用户选择的文件输入中得到的文件对象。强>

P.S：我已经在 stackoverflow 中看到了关于 FileReader 回调的所有答案，但到目前为止没有一个对我有用。

【问题讨论】：

标签： angular ionic-framework ionic2 filereader

【解决方案1】：

检查这个。 https://plnkr.co/edit/PFfebmnqH0eQR9I92v0G?p=preview

模板

<input type="file" id="filePicker" (change)="handleFileSelect($event)">

组件：

handleFileSelect(evt){
      var files = evt.target.files;
      var file = files[0];

    if (files && file) {
        var reader = new FileReader();

        reader.onload =this._handleReaderLoaded.bind(this);

        reader.readAsBinaryString(file);
    }
  }

  _handleReaderLoaded(readerEvt) {
     var binaryString = readerEvt.target.result;
            this.base64textString= btoa(binaryString);
            console.log(btoa(binaryString));
    }

编辑： 关于这在 Mobile 中不起作用，这似乎是 ionic 中的已知问题。 https://github.com/driftyco/ionic-native/issues/505

你可以尝试的事情

在 cordova.js 之前加载 zone.js 也可以修复它。

特定于ionic2 保持这个顺序。

<script src="build/polyfills.js"></script>
 <script src="cordova.js"</script>

随着 polyfills.js 执行 zone.js。

【讨论】：

我记得在另一个问题中看到了这个解决方案，这是我最初尝试的第一个解决方案，但不幸的是它没有用。用相同的 plunker 代码再次尝试，看看我是否遗漏了什么，问题仍然存在。
抱歉，有什么问题吗？你得到你选择的文件的base 64
问题是当我在 android 手机中运行 FileReader 回调（具体来说是运行 Nougat 的 Nexus 6p）时，我无法获得 base64 转换。这同样适用于浏览器，但不适用于手机，但偶尔它也适用于我的 Nexus 6P，成功率为 1:100。
@PathGhiya - 感谢确切的答案是在之前加载 @index.html 作为 polyfills.js 执行 zone.js。请更新您的答案，因为我希望更多人遇到此问题。一旦你这样做，我会接受这个作为正确答案:-)。再次感谢您对此进行调查，您拯救了我的一天。
@VikramEzhil ：欢迎您 :) 是的，很多人会偶然发现这一点。你可以接受 & +1 :)

【解决方案2】：

当我尝试以前的解决方案时，base 64 不完整 html部分

<input type="file" class="form-control input-lg" #fileInput type="file" accept="image/*" (change)="conImage($event)" name="Image"/>

组件端

conImage(input) :void{
    //this.profileService.conImage().subscribe(convertimage => this.convertimage = convertimage);
if (input.target.files && input.target.files[0]) {
    var reader = new FileReader();
    //data = data.replace(/['"]+/g, '');
    //$('#imageupload').attr('src', e.target.result);
    reader.onload = function (e) {
        console.log(e.target.result)
        //console.log(e)
    };
    reader.readAsDataURL(input.target.files[0]);
}

}

console.log 输出提供了完整的 base64 代码，当您将 base64 放入图像的 src 中时，您将获得该图像

【讨论】：