javascript - Angular 未定义的多个文件上传

Question

我正在尝试使用 angular 2 进行多个文件上传。

这是我用来提取数据到变量的函数

文件JSON

，稍后我将其插入数组 fileArray: Array = [];.

  var that2 = this.fileArray;
     for (var i = 0; i < this.files.length; i++) {
                (function (file) {
                    var reader = new FileReader();
                    let parts = file.name.split(".");
                    reader.onload = function (e) {
                        let view = new Uint8Array(this.result);
                        var data = Array.prototype.map.call(view, function (byte: any) {
                            return ('0' + (byte & 0xFF).toString(16)).slice(-2);
                        }).join('');

                        let fileJSON = { "Filename": parts[0], "Extension": parts[1], "DateCreated": new Date(), "Data": data, "TripId": "", "TypeId": 0 };

                        that2.push(fileJSON);

                    }
                    reader.readAsArrayBuffer(file);
                })(this.files[i]);
            }
        this.editUploadedFiles();

在此之后我想通过使用显示文件列表

 <tr ng-repeat="file in fileArray">

 <td>{{file.Filename}}</td>

然而这给了我

TypeError: Cannot read property 'Filename' of undefined

我想要获取所有文件列表的 editUploadedFiles() 函数如下所示:

   editUploadedFiles() {

        console.log(this.fileArray);
        this.fileArray.forEach(function (element) {
            console.log(element.Filename);
        });

        this.next(); // this just hides and shows some form div's and enables button that calls function "finish()"

    }

然而，我在尝试打印出 element.Filename 时遇到了同样的错误。

但是当我再次按下“下一步”按钮时，我调用了这个名为“finish()”的函数

finish() {

        this.fileArray.forEach(function (element) {
            console.log(element.Filename);
        });
    }

基本上它几乎是一样的，但在这里它显示文件名没有任何问题!

我认为它必须对异步操作做一些事情，但我不知道如何等待它们。

Answer 1

公平警告:这是我在很长一段时间内编写的一些最骇人听闻的代码。它应该完成您正在尝试做的事情，而不必向我们提供您嵌入在 for() 循环中的 IIFE。

// Your code:
/*
var that2 = this.fileArray;
for (var i = 0; i < this.files.length; i++) {
  (function (file) {
    var reader = new FileReader();
    let parts = file.name.split(".");
    reader.onload = function (e) {
      let view = new Uint8Array(this.result);
      var data = Array.prototype.map.call(view, function (byte: any) {
        return ('0' + (byte & 0xFF).toString(16)).slice(-2);
      }).join('');

      let fileJSON = { "Filename": parts[0], "Extension": parts[1], "DateCreated": new Date(), "Data": data, "TripId": "", "TypeId": 0 };

      that2.push(fileJSON);

    }
    reader.readAsArrayBuffer(file);
  })(this.files[i]);
}
this.editUploadedFiles();
*/

// Updated code:
let fileUploadCounter = 0;

this.fileArray.map((file) => {
  const fileParts = file.name.split('.');
  const reader = new FileReader();
  reader.onload = function (e) {
    const view = new Uint8Array(this.result);
    var data = Array.prototype.map
      .call(view, function (byte: any) {
        return ('0' + (byte & 0xFF).toString(16)).slice(-2);
      })
      .join('');

    fileReadFinished({ 
      "Filename": parts[0], 
      "Extension": parts[1], 
      "DateCreated": new Date(), 
      "Data": data, 
      "TripId": "", 
      "TypeId": 0 
    });
  };
  
  reader.readAsArrayBuffer(file);
});

function fileReadFinished(json) {
  if (fileUploadCounter === this.fileArray.length) {
    this.editUploadedFiles();
  }
}.bind(this)