Question

我正在尝试使用API调用将本地目录中存在的文件夹上载到S3上的服务器。这对于小型文件夹（文件数：100，大小：51mb）有效，但是对于大型文件夹（文件数：868，大小：180mb），在显示消息“ Aw的几秒钟后，选项卡崩溃提示！显示此网页时出了点问题。“ 。

通过首先在本地选择文件夹来完成上传，这会为我提供其中所有文件的路径，然后将其转换为树结构以发送到API主体中。我在后端发送的文件夹结构具有树状结构。使用的功能如下：

// files are the paths of the files present in the folder
this.readFolder = function(files) {
  return new Promise(function(resolve, reject) {
    var tree = {};
    for (var i = 0; i < files.length; i++) {
      var file = files[i];
      var loadCount = 0;
      var reader = new FileReader();

      if (file.type && file.type.indexOf('image') > -1) {
        reader.readAsDataURL(file);
      } else {
        reader.readAsText(file);
      }

      (function(file, reader) {
        reader.onload = function() {
          var path = file.webkitRelativePath.split('/');
          var folder = tree;
          for (var i in path) {
            if (i == path.length - 1) {
              folder[path[i]] = reader.result;
            } else {
              folder[path[i]] = folder[path[i]] || {};
            }
            folder = folder[path[i]];
          }
          loadCount++;
          if (loadCount == files.length) {
            resolve(tree);
          }
        };
      })(file, reader);
    }
  });
};

该函数返回的树结构然后在API主体中发送。

$http.post("/api/upload", {
  data: tree
}).then(function(res) {
  if (res.data.error) {
    toaster.pop('error', '', res.data.reason);
  } else {
    toaster.pop('success', '', 'Uploaded successfully.');
  }
}, function(rej) {
  var error = (rej.data) ? rej.data.msg : "Some error occured.";
  toaster.pop('error', '', error);
});

经过一番挖掘，我发现这可能是由于API的主体部分转换为字符串而发送的大字符串可能会导致chrome中出现内存问题。有人可以确切地告诉我为什么它不起作用以及如何使其起作用吗？

PS：我找不到在服务器或开发者控制台上记录的错误。同样，在标签页崩溃后，开发人员工具也会断开连接。

此外，这也适用于Mozilla Firefox。

“糟糕！”关于在chrome中上传大型目录的消息

0 个答案: