在我的例子中，两个jQuery模态是堆叠在一起的。阻止这一切解决了我的问题。

我在这里还面临着类似的细节问题 上传logo时使用下拉logo上传框

<div>
      <div class="uploader greyLogoBox" id="uploader" flex="64" onclick="$('#filePhoto').click()">
        <img id="imageBox" src="{{ $ctrl.companyLogoUrl }}" alt=""/>
        <input type="file" name="userprofile_picture"  id="filePhoto" ngf-select="$ctrl.createUploadLogoRequest()"/>
        <md-icon ng-if="!$ctrl.isLogoPresent" class="upload-icon" md-font-set="material-icons">cloud_upload</md-icon>
        <div ng-if="!$ctrl.isLogoPresent" class="text">Drag and drop a file here, or click to upload</div>
      </div>
      <script type="text/javascript">
          var imageLoader = document.getElementById('filePhoto');
          imageLoader.addEventListener('change', handleImage, false);

          function handleImage(e) {
              var reader = new FileReader();
              reader.onload = function (event) {

                  $('.uploader img').attr('src',event.target.result);
              }
              reader.readAsDataURL(e.target.files[0]);
          }
      </script>
      </div>

CSS.css

.uploader {
  position:relative;
  overflow:hidden;
  height:100px;
  max-width: 75%;
  margin: auto;
  text-align: center;

  img{
    max-width: 464px;
    max-height: 100px;
    z-index:1;
    border:none;
  }

  .drag-drop-zone {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 32px;
  }
}

.uploader img{
  max-width: 464px;
  max-height: 100px;
  z-index:1;
  border:none;
}



.greyLogoBox {
  width: 100%;
  background: #EBEBEB;
  border: 1px solid #D7D7D7;
  text-align: center;
  height: 100px;
  padding-top: 22px;
  box-sizing: border-box;
}


#filePhoto{
  position:absolute;
  width:464px;
  height:100px;
  left:0;
  top:0;
  z-index:2;
  opacity:0;
  cursor:pointer;
}

在修正之前，我的代码是:

function handleImage(e) {
              var reader = new FileReader();
              reader.onload = function (event) {
                  onclick="$('#filePhoto').click()"
                  $('.uploader img').attr('src',event.target.result);
              }
              reader.readAsDataURL(e.target.files[0]);
          }

控制台的错误:

我解决了它通过删除onclick="$('#文件照片').click()"从div标签。

如果您不小心导入/嵌入了相同的JavaScript文件两次，有时会出现这种情况，值得在检查器的资源选项卡中检查。

有趣的是，没有人提到异步函数中的等待调用。在我的例子中，我有超过1.5 MB的循环和数据库交互文件。

async function uploadtomongodb() {

    await find('user', 'user2', myobj0).then(result => {
    }

})

等待将删除“超过最大调用堆栈大小”。否则内存负载过多。不确定Node是否可以处理超过700行和对象。

在你的代码中有一个递归循环(例如，一个函数最终会一次又一次地调用自己，直到堆栈满为止)。

其他浏览器要么有更大的堆栈(所以您会得到一个超时)，要么因为某种原因(可能是放置错误的try-catch)而忽略错误。

发生错误时，使用调试器检查调用堆栈。

检测堆栈溢出的问题是，有时堆栈跟踪将被解开，您将无法看到实际发生了什么。

我发现Chrome的一些较新的调试工具在这方面很有用。

点击Performance选项卡，确保Javascript样本被启用，你会得到类似这样的结果。

溢出的地方很明显!如果单击extendObject，您将能够看到代码中确切的行号。

你也可以看到时间，可能有帮助，也可能没有帮助，或者转移注意力。

另一个有用的技巧是，如果你不能真正发现问题，在你认为问题所在的地方放置大量的console.log语句。上面的步骤可以帮助你做到这一点。

在Chrome中，如果你反复输出相同的数据，它会像这样显示问题更清楚。在这个例子中，堆栈在最终崩溃之前击中了7152帧: