使用 formData 上传 Ajax 文件在大文件上失败答案

【问题标题】：Ajax file upload with formData fails on large files使用 formData 上传 Ajax 文件在大文件上失败
【发布时间】：2019-05-28 13:49:24
【问题描述】：

我正在通过 ajax 发送一个包含上传文件的 FormData 对象，但是当我尝试上传大文件 (> 5M) 时，我收到了空的 $_POST 和 $_FILES 变量。

阅读了很多关于这个问题的帖子，我几乎应用了所有东西，但没有用。

I've tried on php.ini:
- max_execution_time = 300
- max_input_time = 300
- post_max_size = 2048M (large but compulsory)
- upload_max_filesize = 2048M (large but compulsory)
- max_input_vars = 2000 (trying different values)

On HTTP/HTTPS directives (some have no sense but I was trying in a desperately way to see the behaviour):
- FcgidConnectTimeout 300
- FcgidIOTimeout 300
- FcgidIdleTimeout 300
- FcgidBusyTimeout 300
- IPCCommTimeout 9999
- FcgidMaxRequestLen 21474836480

我的代码如下：

var form = $('form[name="myform"]');
var formData = new FormData(form[0]);

/*
Also tried this:
   var file = $("form[name='myform'] input[name='filename']");
   formData.append("my_upload", (file[0]).files[0]);
*/

$.ajax({
   type: 'post',
   data: formData,
   dataType: 'json',
   async: true,
   url: '/mysite/controllers/Controller.php',
   processData: false,
   contentType: false,
   ...
});

因此，对于小于 5M 的文件，在我的本地服务器和生产服务器中一切正常。对于大于 5M 的文件，仅适用于我的本地服务器，但不适用于生产服务器（我收到空的 $_POST 和 $_FILES 变量）。尽管生产服务器在 CloudFlare 上的 WAF 下，但它们通常具有一些变量配置。

【问题讨论】：

听起来确实像文件大小限制。你确定你成功更新了配置文件吗？您是否调试过引发的错误？
你应该确保你正在编辑正确的php.ini，用php --ini标识它应该出现在加载的配置文件行中，在我的例子中是Loaded Configuration File: /etc/php/7.2/cli/php.ini。将值更改为 upload_max_filesize、max_file_uploads、post_max_size
是的，我编辑了正确的 php.ini：# php --ini 配置文件 (php.ini) 路径：/etc/php/7.0/cli 加载的配置文件：/etc/php /7.0/cli/php.ini
调试这是我得到的：“TypeError: 'caller', 'callee', 和 'arguments' 属性可能无法在严格模式函数或在 Function.调用Getter (:2:14)"

标签： javascript jquery ajax upload form-data

【解决方案1】：

我的设置也有同样的问题。我没有使用 jQuery，而是使用 vanilla js。

问题不在于服务器！如果您查看浏览器的开发者工具，您会发现 HTTP-Request 没有表单数据。

小上传

Big Upload >=6MB 不会创建 FormData：

我的代码是：

function uploadFile(file, filename, domDirectory, domTabelle, domSchluessel){
var fd = new FormData();
fd.append("filename", filename);
fd.append("name", filename);
fd.append("right_id", domDirectory);
fd.append("tabelle", domTabelle);
fd.append("schluessel", domSchluessel);
var xhr = new XMLHttpRequest();
var reader  = new FileReader();
reader.addEventListener("load", function () {
    fd.append("dataURI", reader.result);
    //console.log(reader.result);
    xhr.send(fd);
  }, false
);
reader.readAsDataURL(file);
xhr.open('POST', '../control/Upload.php', true);
}

【讨论】：

【解决方案2】：

终于找到了原因。谢谢大家，很抱歉忘记解释最后发生的事情。这是来自 CloudFlare! 的 WAF，它将上传大小限制为 5M。是的，这就是原因。所以我更改了我的代码，将上传分成小于 5M 的部分，然后在上传后再次将它们加入服务器。我没有找到更好的方法，但是嘿，它有效！。

【讨论】：