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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

Meteor

JSLint - a Javascript code quality tool

jsFiddle

D3.js

WebStorm

推荐书目

Javascript 权威指南第 5 版

Closure: The Definitive Guide

这是一个创建于 1668 天前的主题，其中的信息可能已经有所发展或是发生改变。

环境

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 处理的问题.
撞鬼了.

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

formdata

请求

textstatus

ajax

12 条回复 2021-04-01 16:04:53 +08:00

eason1874

2021-03-22 05:48:18 +08:00

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

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

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

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

zhizunzz

2021-03-22 07:54:10 +08:00

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

zhizunzz

2021-03-22 07:56:53 +08:00

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

memedahui

2021-03-22 09:13:11 +08:00

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

Xusually

2021-03-22 10:29:06 +08:00

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

luckRay

2021-03-22 11:13:57 +08:00

Web Uploader 了解下

SystemLight

2021-03-22 15:04:54 +08:00

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

dd112389

2021-03-22 17:06:26 +08:00

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

dd112389

2021-03-22 17:07:34 +08:00

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

dd112389

2021-03-22 17:08:06 +08:00

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

dd112389

2021-03-22 17:09:27 +08:00

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

dd112389

2021-04-01 16:04:53 +08:00

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