角度未定义的多个文件上传答案

【问题标题】：Multiple file upload in angular undefined角度未定义的多个文件上传
【发布时间】：2018-08-14 08:13:15
【问题描述】：

我正在尝试使用 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: 无法读取未定义的属性“文件名”

我想要获取所有文件列表的 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);
        });
    }

基本上它几乎相同，但这里显示的文件名没有任何问题！

我认为它必须与异步操作有关，但我不知道如何等待它们。

【问题讨论】：

尝试将this.fileArray.forEach(function (element) { console.log(element.Filename); });更改为this.fileArray.forEach(function () { console.log(this.Filename); });
@messerbill 嘿，感谢您的快速反应，我收到“'this' 隐含类型'any'，因为它没有类型注释”错误
所以尝试将this.fileArray.forEach(function (element) { console.log(element.Filename); }); 更改为for (let item of this.fileArray) { console.log(item.Filename) }
TypeError: Cannot read property 'Filename' of undefined ...我认为该函数不是问题，因为如果您看到我的主要帖子，它会在“完成”函数中返回良好的结果跨度>
这看起来像 Angular JS 而不是 Angular 2

标签： javascript arrays typescript asynchronous file-upload

【解决方案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)

【讨论】：