javascript FileReader上传“请求实体太大”答案

【问题标题】：javascript FileReader upload 'Request Entity Too Large'javascript FileReader上传“请求实体太大”
【发布时间】：2015-09-09 17:14:50
【问题描述】：

我正在尝试解决在 Chrome 中通过 ajax 上传时从请求中删除的文件。

当文件被删除或浏览时，我使用 FileReader 准备文件：

    // initialise fileListData array
    fileListData = new Array(fileList.length);

    // start reading files
    for (var i=0; i<fileList.length; i++) {

        // update fileListData file status
        fileListData[i] = { 'name': fileList[i].name, 'processing' : 1 };

        // read file
        var fileReader = new FileReader();

        fileReader.onload = (function(idx) {
            return function(e) {
                // update fileListData data
                setFilesAreReady(idx, e.target.result);
            }
        })(i);

        fileReader.readAsDataURL(fileList[i]);
    }

setFilesAreReady 方法只是将 FileReader 结果存入 fileListData 数组，然后检查数组中的所有项目是否完成处理（以便它可以启用上传按钮）。

文件读取完成后，上传按钮被启用，点击上传开始发出ajax请求：

if (is_chrome || is_safari) {
    formData.append('upfile_0', ajax_uploads[file_idx].fileData);
    console.log(ajax_uploads[file_idx].fileData);
} else {
    formData.append('upfile_0', file);
}
formData.append('event', eventVal);
formData.append('filePrivacy', filePrivacyVal);

首先我编译一个 formData 对象，然后将它与请求一起提交：

    // start upload
    jQuery.ajax(
    {
        data:       formData,
        url:        path_to_upload_script + '?upload_id=' + upload_id,
        type:       "POST",
        processData:    false,
        contentType:    false,
        error:
            function (jqXHR, textStatus, errorThrown)
            {
                ...
            },
        success: 
            function (response) 
            {
                ...
            }
    });

    // start ajax progress
    initialiseAjaxProgressBar(upload_id);
}

我遇到的问题是，如果上传的文件超过几兆字节，则会出现 Request Entity Too Large 错误：

但服务器实际上被配置为接受最大 250MB 的文件。我正在使用 Uber 上传器（perl 脚本），它可以处理大文件上传。 ajax 上传适用于 Firefox 和 Internet Explorer 中的大文件，因此这个 FileReader 解决方法仅适用于 chrome（和 safari）。

我猜这个错误是因为内容类型错误，因为我上传的是数据字符串而不是 js 文件对象。

如何正确上传 FileReader 结果（类似于：data:video/mp4;base64,...）以及我在 ajax 请求中附加到 formData 的其他参数？

【问题讨论】：

this 相关吗？
@raina77ow 不，我不这么认为？因为我已经在 ajax 请求中有 processData: false 。另外，我需要在文件中发送更多参数

标签： javascript ajax google-chrome file-upload upload

【解决方案1】：

最后我使用了这个名为plupload 的漂亮库。它将文件拆分为 1mb 块以解决请求实体太大的问题。该文件在服务器上重建。这也允许非常大的上传，因为每个块不会超过 PHP 的帖子最大大小。

【讨论】：