Angular 2+ получает base64 из нескольких файлов при перетаскивании - PullRequest
Новая
       14

Angular 2+ получает base64 из нескольких файлов при перетаскивании

0 голосов
/ 26 июня 2018

Вариант использования: при удалении нескольких файлов мне нужно получить их значения 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);

    }
  }


});
}

1 Ответ

0 голосов
/ 26 июня 2018

у меня получилось - код ниже 

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