Question

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

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

的功能

fileJSON

，后来我推入数组 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：无法读取属性＆＃39;文件名＆＃39;未定义的

我的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 时出现同样的错误。

但是当我按下＆＃34;下一步＆＃34;再次按下按钮，我将此功能称为“＃34;完成（）＆＃34;

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)

角度未定义的多文件上传

1 个答案: