Angular 2+在拖放时获得多个文件的base64

时间:2018-06-26 15:22:48

标签: angular base64 filereader

用例:在放下多个文件时,我需要获取它们的base64值。

我希望我可以说下面的代码有效,但事实并非如此。当您有多个文件时不行。我确定这是时间安排问题吗?有些文件获得了base64,但有些却没有?

有帮助吗?我正在使用Angular5。同样,这是拖放事件。

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 :(得分:0)

我知道了-下面的代码

> C:\Users\userX\PycharmProjects\PegabaseFilter\venv\Scripts\python.exe
> C:/Users/userX/PycharmProjects/PegabaseFilter/test_2.py
> [<test.Restaurant object at 0x00000000032A8F28>, <test.Restaurant
> object at 0x00000000032A8A90>, <test.Restaurant object at
> 0x00000000032DF048>, <test.Restaurant object at 0x00000000032DF0B8>,
> <test.Restaurant object at 0x00000000032DF160>, <test.Restaurant
> object at 0x00000000032DF208>, <test.Restaurant object at
> 0x0000000003251BA8>] {'_sa_instance_state':
> <sqlalchemy.orm.state.InstanceState object at 0x00000000032A8FD0>,
> 'name': u'Pizza Palace', 'id': 1} {'_sa_instance_state':
> <sqlalchemy.orm.state.InstanceState object at 0x00000000032A8A90>,
> 'name': u'Pizza Palace', 'id': 2} {'_sa_instance_state':
> <sqlalchemy.orm.state.InstanceState object at 0x00000000032A8C88>,
> 'name': u'Pizza Palace', 'id': 3} {'_sa_instance_state':
> <sqlalchemy.orm.state.InstanceState object at 0x00000000032A85C0>,
> 'name': u'Pizza Palace_userX', 'id': 4} {'_sa_instance_state':
> <sqlalchemy.orm.state.InstanceState object at 0x00000000032A8588>,
> 'name': u'Pizza Palace_userX', 'id': 5} {'_sa_instance_state':
> <sqlalchemy.orm.state.InstanceState object at 0x00000000032A84A8>,
> 'name': u'Pizza Palace_userX', 'id': 6} {'_sa_instance_state':
> <sqlalchemy.orm.state.InstanceState object at 0x0000000003251C18>,
> 'name': u'Pizza Palace_userX', 'id': 7}