Question

我允许用户通过网站上传CSV文件。使用JavaScript文件API读取文件，然后将其发送到服务器进行保存。

,   upload: function (prefix, numberType, file, name)
{
    this.attributes = { // Set the data to be sent along
        'upload': true,
        'prefix': prefix,
        'file': file,
        'name': name,
        'numberType': numberType 
    };

    console.log('upload', this) // This will correctly show in the console

    return this.sync('create', this, { // This is when Chrome crashes
        xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            xhr.upload.onprogress = function(evt){
                document.querySelector('.uploadProgressBar').style.width = parseInt(evt.loaded/evt.total*100) + '%';
                document.querySelector('#uploadNow').classList.add('percentageUpload');
                document.querySelector('#uploadNow').innerText = parseInt(evt.loaded/evt.total*100) + '%';
            };
            return xhr;
        }
    });
}

检查“网络”选项卡时，似乎从未发送过请求，因此在创建请求时它就中断了。仅当文件大小在100mb左右并且较小的文件可以正常上传时，它才会中断。除此之外，它在Safari和Firefox上均可正常运行，因此这是Chrome的特定问题。这是Chrome的已知问题，无法处理大文件吗？

我认为真正解决此问题的唯一方法是将文件拆分为多个块，然后将其重新组合到服务器上。这当然是可能的，但值得一提的是，将来是否有一定的局限性。

Answer 1

浏览器由于内存不足而崩溃。

不是将文件加载到内存中，而是将文件对象传递给XMLHttpRequest，以便Chrome浏览器可以以上传形式流式传输文件内容。

为此使用FormData对象：

// your file input
const file = document.getElementById('file').files[0];
// your form
var form = new FormData();
form.append('file', file);

const xhr = $.ajaxSettings.xhr();

xhr.upload.onprogress = function(evt) {
  document.querySelector('.uploadProgressBar').style.width = parseInt(evt.loaded / evt.total * 100) + '%';
  document.querySelector('#uploadNow').classList.add('percentageUpload');
  document.querySelector('#uploadNow').innerText = parseInt(evt.loaded / evt.total * 100) + '%';
};
xhr.open('POST', 'http://example.com/'); // Url where you want to upload
xhr.send(form);

上传大文件（100mb +）仅会使Chrome浏览器崩溃

1 个答案: