V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
dd112389
V2EX  ›  JavaScript

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

  •  
  •   dd112389 · 2021-03-22 03:30:41 +08:00 · 2741 次点击
    这是一个创建于 1378 天前的主题,其中的信息可能已经有所发展或是发生改变。

    环境

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

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

    12 条回复    2021-04-01 16:04:53 +08:00
    eason1874
        1
    eason1874  
       2021-03-22 05:48:18 +08:00   ❤️ 1
    你的问题描述细节丰富,但是你的代码段没头没尾的,报错信息也没有。

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

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

    如果想继续排查,可以在 firefox 控制台右边齿轮图标把“持续记录”打开,确保就算页面刷新了报错信息也不被刷掉,然后再刷新页面测试看有没有报错信息,逐点检查每个环节的数据正不正常。
    zhizunzz
        2
    zhizunzz  
       2021-03-22 07:54:10 +08:00
    nginx 之类的有上传大小限制?盲猜
    zhizunzz
        3
    zhizunzz  
       2021-03-22 07:56:53 +08:00
    啊 刚注意到是 Wampserver, 那就是盲猜 apache 上传文件大小限制
    memedahui
        4
    memedahui  
       2021-03-22 09:13:11 +08:00
    ie 不支持 formData,然后我就放弃了.
    Xusually
        5
    Xusually  
       2021-03-22 10:29:06 +08:00
    看下是不是有报错 Http Status Code:413 Request Entiry Too large
    luckRay
        6
    luckRay  
       2021-03-22 11:13:57 +08:00
    Web Uploader 了解下
    SystemLight
        7
    SystemLight  
       2021-03-22 15:04:54 +08:00
    @luckRay 这东西好像五年没维护了
    dd112389
        8
    dd112389  
    OP
       2021-03-22 17:06:26 +08:00
    @eason1874 因为确实没有报错信息, 有的话我就贴上来了.
    请求直接就返回没有任何内容的 200.
    dd112389
        9
    dd112389  
    OP
       2021-03-22 17:07:34 +08:00
    @luckRay
    这东西又不是说换就换的...
    而且我直接用 Fetch 也会有这个问题.
    dd112389
        10
    dd112389  
    OP
       2021-03-22 17:08:06 +08:00
    @Xusually
    没有报错信息, 请求返回的是 200.
    dd112389
        11
    dd112389  
    OP
       2021-03-22 17:09:27 +08:00
    @zhizunzz
    之前也想过这方面的原因.
    但是整个文件却能正确提交请求.
    整个文件大小比分片大多了.(有 300M, 也有 1.5G 的).
    dd112389
        12
    dd112389  
    OP
       2021-04-01 16:04:53 +08:00
    结案了, 不是请求没成功, 只是浏览器的开发者工具里面没有展示相关提交数据和返回的数据.
    在回调里面可以拿到数据.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2829 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 14:25 · PVG 22:25 · LAX 06:25 · JFK 09:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.