Question

我有一个我不了解的问题，也不知道如何解决它，在哪里寻找原因。当我调试（chrome）时，所有东西都在工作，但是在正常使用中却没有。对我来说，是某种科幻小说，如果它比科幻小说更科学，那对我来说会更好：）

for (var i = 0; i < filteredAddedFiles.length; i++) {
  if ((/\.(png|jpeg|jpg|gif)$/i).test(filteredAddedFiles[i].name)) {

    (function (file) {
      var reader = new FileReader();
      var blob = b64toBlob(file.base64.replace('data:image/jpeg;base64,', ''), file.type);
      reader.addEventListener("load", function () {

        console.log(this);
        var image = new Image();
        image.src = window.URL.createObjectURL(blob);
        image.onload = function () {
          preview.innerHTML += drawHtml(image, file)
        };

        //I tried:
        //(function (b) {
        //  var image = new Image();
        //  image.addEventListener("load", function () {
        //    preview.innerHTML += drawHtml(this, file);
        //    //window.URL.revokeObjectURL(image.src);
        //  });
        //  image.src = window.URL.createObjectURL(b);
        //})(blob);
      });
      reader.readAsDataURL(blob); 
    })(filteredAddedFiles[i]);

  } else {
    errors += filteredAddedFiles[i].name + " Unsupported Image extension\n";
  }
}

在这里，我附了一部短片，展示了其工作原理 link to movie

不起作用-我的意思是-for中的所有内容似乎都没有执行

编辑：1

@Teemu-我在chrome控制台中打开了日志，所有console.log都出现了

@ Katie.Sun-现在上面的for-console.log(filteredAddedFiles.length);是0-但是当我调试代码时，相同的console.log(filteredAddedFiles.length);具有值！

编辑：2

@马蒂·普莱斯（Matti Price） filteredAddedFiles-是页面，过滤，验证等 一切从这里开始：

addedFiles = added(files); // files - FileList from input this is a read only array of obj

function added(from) {
            var out = [];
            for (var i = 0; i < from.length; i++) {
                (function (obj) {
                    var readerBase64 = new FileReader();
                    readerBase64.addEventListener("load", function () {
                        var fileBase64 = readerBase64.result;
                        var row = { name: obj.name, size: obj.size, type: obj.type, base64: fileBase64 }
                        out.push(row);
                    });
                    readerBase64.readAsDataURL(obj); 
                })(from[i]);
            }
            return out;
        }

然后addedFiles-做进一步的操作，然后转换为filteredAddedFiles。我在added函数中找到了什么？在调试过程中，有一个length值是正确的，但是当我打开__proto__: Array(0)时，我发现length属性= 0。

此length值应等于length上方的值吗？

第二件事：我不得不承认我对addEventListener缺乏足够的了解。这里有队列或线程吗？

编辑：3 在最后一个@Teemu评论之后，我进行了一些更改（我不得不阅读很多有关proetes的问题，等等：）），但是输出是相同的console.log("out resolve", out);显示了一个对象数组，但是console.log("out.length then", out.length);显示了{{1} }和0显示消息-small blue i-icon

~~Value below evaluated just now~~

在我发布上面的编辑后，我确定只创建了var out = []; for (var i = 0; i < files.length; i++) { fillArray(files[i], out); } console.log("out resolve", out); console.log("out.length then", out.length); function fillArray(obj, out) { return new Promise(function (resolve, reject) { var readerBase64 = new FileReader(); readerBase64.addEventListener("load", function () { var fileBase64 = readerBase64.result; var row = { name: obj.name, size: obj.size, type: obj.type, out.push(row); resolve(out); }); readerBase64.readAsDataURL(obj); }); }，我忘了打电话给Promise

，但这并不重要，因为我的代码中有90％因该主题和“金人奖”的答案而更改 @Kaiido

URL.createObjectURL() - is synchronous. You don't need your Promise wrapping event handlers hell, all can be done in a single loop.

就我而言，这是一个比文件读取器更好的解决方案，我只需要上传图像，并且有一些限制，由于{{1}，我不必担心冻结Internet浏览器} promise的性质谢谢您的帮助和承诺

代码在调试时正常运行，但不能正常运行-Javascript / Jquery

0 个答案: