Question

我正在尝试使用FineUploader上传大量文件。我还需要在上传之前操作文件 - 即我需要匿名化一些识别信息。在another answer中，Ray Nicholus建议拒绝onSubmit处理程序中的原始文件，然后重新添加被操纵的文件。所以我的onSubmit处理程序如下所示：

onSubmit: function (id, name)
{
    var file = this.getFile(id)
    if (file.isAnonymized)
    {
        return;
    }
    var reader = new FileReader()
    reader.onload = function()
    {
        var arrayBuffer = this.result
        var byteArray = new Uint8Array(arrayBuffer)
        // Manipulate the byteArray in some way...
        var blob = new window.Blob([byteArray])
        blob.isAnonymized = true
        // add the anonymized file instead
        uploader.addFiles({blob: blob, name: name})
    }
    reader.readAsArrayBuffer(file)
    // cancel the original file
    return false
},

这适用于少量文件。在一个具体的例子中，一位客户试图在Firefox中上传大约1.500个3MB的文件，并且在标签最终崩溃之前看到Firefox的内存使用率飙升。其他浏览器（Chrome，Edge）表现出类似的行为。使用浏览器的开发人员工具似乎无法显示任何大的内存分配。简单地按原样上传文件没有问题，但这不是一个选项。

Answer 1

我稍微清理了https://github.com/sgarcialaguna-mms/file-upload-memory/处的示例，现在我确信该错误是由于fineuploader库保持blob的时间超过了所需的时间。

该示例现在一次将一个文件加载到内存中，然后将blob传递给上载库。我现在也使用一个实际的服务器（来自fineuploader server-examples存储库的Django示例）。

使用Firefox，当我拖入约1GB的文件时，Firefox的内存使用量在上传过程中会稳定上升，即使在上传完成后也会保持高位。我可以打开：内存，点击＆＃34;最大限度地减少内存使用量＆＃34;要触发垃圾收集，请按＆＃34;测量＆＃34;并且文件数据显示在＆＃34; memory-file-data / large＆＃34;下。调用uploader.reset()，再次触发垃圾回收，Firefox的内存使用率急剧下降。再次测量显示＆＃34; memory-file-data / large＆＃34;对象不再存在于内存中。根据{{3}}，每次上传后调用this._handler.expunge(id)也可以。

Chrome的行为有点不同，由于长期存在的错误，一旦超过500 MB的blob数据累积，它最终会开始抛出ERR_FILE_NOT_FOUND错误。 chrome：// blob-internals页面显示正在保存哪些blob以及它们的引用计数。

我不知道是否有一种简单的方法可以告诉哪些变量/闭包/这些对象持有什么，但它会有很大的帮助。

上传和操作许多文件时内存使用率很高

1 个答案: