jQuery Ajax 分片上传文件的问题.

[dd112389]

环境

Chrome 89.0.4389.90
FireFox 86.0.1
OS: Windows 10 20H2
服务端: PHP 7.4.9
集成环境: Wampserver x64

构造 FormData

// 传入一个参数 file, 类型为 File.

var chunkSize = 8388608;
var formData = new FormData;
formData.set('chunk', file.slice(0, chunkSize));

请求

new Promise((resolve, reject) => {
	$.ajax({
        url: chunk_url,
        type: 'POST',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function success() {
            // 更新进度条的代码...

            resolve();
        },
        error: function error(jqXHR, textStatus) {
            conosle.error(textStatus);
            reject(textStatus);
        }
    });
});

问题

搞了两个晚上了, 试了各种奇奇怪怪的方法都没有用.
当请求之后开发者工具里面请求中没有找到 POST 参数.
然后用 Firefox 的开发者工具查看的时候会出现一行请求已被截断.
接下来我尝试去改 php 的配置, 具体是这三个参数:

post_max_size = 256M
max_input_vars = 2500
upload_max_filesize = 128M

然后发现依然没有用, POST 参数依然不会去到后端, 也不会显示在请求里面.
最后我直接把整个 file 给丢到 FormData 里面发现请求可以正常发送, 工具里也能看到所有 POST 参数并且后端也能拿到...
邪门了...

猜测

• ajax 处理 FormData 的时候不能正确判断文件的结束位置.
• Blob.slice 处理的问题.
• 撞鬼了.

所以这到底是我系统的问题还是怎样, 脑壳大...
麻烦各位大佬看看了...

[eason1874]

你的问题描述细节丰富，但是你的代码段没头没尾的，报错信息也没有。

这代码我目测没问题，动手测试了也没问题，可以发送请求，后端也能接收到数据，PHP $_FILES 数组也有 chunk 键。

因为不能复现你说的问题。我只能说，如果只是为了上传文件，可以考虑第三方开源库，比如 https://github.com/pqina/filepond

如果想继续排查，可以在 firefox 控制台右边齿轮图标把“持续记录”打开，确保就算页面刷新了报错信息也不被刷掉，然后再刷新页面测试看有没有报错信息，逐点检查每个环节的数据正不正常。

[zhizunzz]

nginx 之类的有上传大小限制？盲猜

[zhizunzz]

啊 刚注意到是 Wampserver, 那就是盲猜 apache 上传文件大小限制

[memedahui]

ie 不支持 formData,然后我就放弃了.

[Xusually]

看下是不是有报错 Http Status Code:413 Request Entiry Too large

[luckRay]

Web Uploader 了解下

[SystemLight]

@luckRay 这东西好像五年没维护了

[dd112389]

@eason1874 因为确实没有报错信息, 有的话我就贴上来了.
请求直接就返回没有任何内容的 200.

[dd112389]

@luckRay
这东西又不是说换就换的...
而且我直接用 Fetch 也会有这个问题.

[dd112389]

@Xusually
没有报错信息, 请求返回的是 200.

[dd112389]

@zhizunzz
之前也想过这方面的原因.
但是整个文件却能正确提交请求.
整个文件大小比分片大多了.(有 300M, 也有 1.5G 的).

[dd112389]

结案了, 不是请求没成功, 只是浏览器的开发者工具里面没有展示相关提交数据和返回的数据.
在回调里面可以拿到数据.