使用 Angular 上传文件时浏览器崩溃答案

【问题标题】：Browser crashes when upload file with Angular使用 Angular 上传文件时浏览器崩溃
【发布时间】：2017-03-14 10:07:08
【问题描述】：

我正在尝试使用 Angular 和 FileReader Api 在 JSON 中上传文件。

问题是对于大于600 - 700 KB 的文件，我的浏览器会崩溃。

据我所知，问题发生在请求资源时，而不是文件阅读器读取文件并将其编码为base64

有什么想法吗？

代码如下：

function readFiles(files) {

  var reader = new FileReader();
  var data = [];

  function readFile(index) {

    if (index >= files.length) {

     UploadFilesResource.create(JSON.stringify(data), function  (successData) {
       scope.attachments = successData.data;
       scope.showUploadForm = false;
     }, function (errorData) {
       MessageSrv.setErrorMessage(errorData.error_message)
     });

     return;
  }

  var file = files[index];

  reader.onload = function(e) {
     data.push(prepareFile(file, e.target.result));
     readFile(index + 1)
   };

   reader.readAsDataURL(file);
  }

  readFile(0);
}

这里是资源代码：

crmApp.lazy.factory('UploadFilesResource',
['CrmAppResource', 'CrmAppConfiguration',
    function ($resource, CrmAppConfiguration) {
        return $resource(
            CrmAppConfiguration.apiUrl + 'upload/files/:id',{id:'@id'}
        );
    }
]);

【问题讨论】：

如果它适用于较小的文件大小，则问题很可能出在后端。你也可以发布后端代码吗？
如果问题出在后端，为什么浏览器会崩溃？我认为问题是 JSON.stringify
目前没有后端实现。仅用于测试的虚拟休息端点。至于后端是使用 ZF2 的 PHP 5.5.9 项目的简单 apache 安装（默认配置）。目前问题出现在本地环境中。
那么，data 是一个字符串数组，每个 700k - 800k 个字符长？你想知道为什么浏览器挂起字符串化？ :) 伙计，那是巨大的。一次只发布一个 base64 数据，不要对任何内容进行字符串化。
是的，因为即使是一个 700k 长的字符串也是大。尝试打开文本编辑器并输入 70 万 个字母，您就会明白您在浏览器中输入的内容。

标签： javascript angularjs json filereader angularjs-fileupload

【解决方案1】：

谢谢@Jeremy 和@Jonas

成功了！问题是 JSON.stringify

所以我删除了它，现在浏览器一切正常！

【讨论】：

而不是 json.stringify 你使用了什么