将输入文件转换为Angular 2中的base64，而无需在离子V2中使用fileReader

Question

我有一个问题将输入文件对象转换为我的 Ionic V2 App 中的base64。当使用Onload/OnloadEnd读取器时，该问题是特别发生的，因为它仅被偶尔被调用(最稀有的最罕见的是非常具体的(。

当用户单击触发附件函数的映像文件时，我能够获取文件名，大小和对象，但是当我使用fileReader -onload或onloadend将文件对象转换为base64或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]);
  }
}

我可以理解这是否完全不起作用，但是在某些极少数情况下，onload/onloadend回调被调用并成功地将对象转换为我的Android Phone中的base64。

• 除非我以前提到的最稀有的最稀有场合。
，
• Web浏览器中的相同代码工作正常，并且可以成功调用回调，并将文件对象转换为base64。

因此，这给我留下了很少的选择，我找不到适合Angular 2制作的Base64转换插件量身定制的，因为大多数插件仅适用于旧的Angular。

Angular的一个这样的插件具有很大的希望-Angular-Base64-Upload，但我无法弄清楚如何在Angular 2中运行它，因为指令专门针对旧的Angular。

。

肯定必须有一种实现这一要求的方法，任何潜在客户都将不胜感激。

我的要求也是如此，因此Base64转换插件不应取决于任何文件路径，并且应该直接转换从用户选择的文件输入中获得的文件对象。

p.s：我已经在stackoverflow中看到了有关fileReader回调的所有答案，到目前为止，没有一个对我有用。

Answer 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));
    }

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

您可以尝试的事情

cordova.js之前的加载区域。

特定于离子2维护此序列顺序。

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

当polyfills.js执行区域。

Answer 2

当我尝试以前的解决方案时，基本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中时，您将获得图像