Angular 2+在拖放中获取多个文件的base64答案

【问题标题】：Angular 2+ get base64 of multiple files on drag dropAngular 2+在拖放中获取多个文件的base64
【发布时间】：2018-06-26 15:22:48
【问题描述】：

用例：删除多个文件时，我需要获取它们的 base64 值。

我希望我可以说下面的代码有效，但它没有。不是当你有多个文件时。我确定是时间问题？一些文件得到他们的base64，但有些没有？

帮助？我正在使用 Angular 5。同样，这是在拖放事件中。

dropHandler(e) {
    e.stopPropagation();
    e.preventDefault();

    this.uploading = true;
    this.message = "uploading...";

    //console.log(this._router.url);

    //Retrieve all the files from the FileList object
    var files = e.target.files || e.dataTransfer.files;


      if (files.length > 0) {
        //addFiles gives us the base64 value
        var promise = this.addFiles(files);

        //
        promise.then(
          res => { 

            console.log(res);

          }
        );


      }


  }


//Add files and get base64 from FileReader
addFiles(files) {

return new Promise(function (resolve, reject) {

  var response = [];

  if (files) {

    for (var i = 0; i < files.length; i++) {
      var f = files[i];

      let file = {
        FileName: f.name,
        FileType: f.type,
        FileValue: null,
        IsActive: true
      };

      var reader = new FileReader();

      reader.onload = function (e) { // Possible clean-up?

        file.FileValue = btoa(reader.result);
        response.push(file);

        //
        if (response.length == files.length) {
          // Everything is done. Resolve the promise.
          resolve(response);
        }
      };
      //
      reader.readAsDataURL(f);

    }
  }


});
}

【问题讨论】：

标签： angular base64 filereader

【解决方案1】：

我得到它的工作 - 下面的代码

  dropHandler(e) {
    e.stopPropagation();
    e.preventDefault();

    this.uploading = true;
    this.message = "uploading...";
    var response = [];
    //console.log(this._router.url);

    //Retrieve all the files from the FileList object
    //var files = e.target.files || e.dataTransfer.files;
    var files = [].slice.call(e.dataTransfer.files);
    
    console.log(files);
 
    if (files.length > 0) {

      //Loop
      files.forEach(function (f) {
        var reader = new FileReader();

        let file = {
          FileName: f.name,
          FileType: f.type,
          FileValue: null,
          IsActive: true
        };

        //Get base64
        reader.onload = function (event) {
          //let contents = event.target['result'];
          //console.log(contents);

          file.FileValue = btoa(reader.result);
          response.push(file);
        };
        reader.readAsDataURL(f);
      });


      console.log(response);
      
      }
    }

【讨论】：