javascript - Xhr 上传事件.loaded 问题

Question

opts.xhr=function(){
    var xhr = new window.XMLHttpRequest();

    // Upload progress
    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
            var percentComplete = e.loaded / e.total * 100;
            console.log('Progress info:', e.loaded, e.total, Math.round(percentComplete),  Math.round(e.loaded/1024/1024), Math.round(e.total/1024/1024));
        }
    }
    return xhr;
}
return $.ajax(opts);

进度信息:53657600 2666153229 2 51 2543

进度信息:55656448 2666153229 2 53 2543

进度信息:57655296 2666153229 2 55 2543

进度信息:59850752 2666153229 2 57 2543

进度信息:4489216 2666153229 0 4 2543

进度信息:4800512 2666153229 0 5 2543

WTF？!

为什么会跳回来？显示 59850752 已加载，然后是 4489216。O_o我做错了什么？

请求网址:http://mydomain.com/admin/upload?callback=jQuery18307878572104964405_1372440424301

请求 header

Accept:text/javascript, application/javascript, application/ecmascript, application/x-ecmascript, */*; q=0.01
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryVHTBFWPenOcByyrT
Origin:http://mydomain.com
Referer:http://mydomain.com/admin/add
User-Agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36
X-Requested-With:XMLHttpRequest

查询字符串参数

callback:jQuery18307878572104964405_1372440424301

请求负载

------WebKitFormBoundaryVHTBFWPenOcByyrT
Content-Disposition: form-data; name="images[]"; filename="smerch_BDRip-AVC.mkv"
Content-Type: application/octet-stream


------WebKitFormBoundaryVHTBFWPenOcByyrT--

Answer 1

经过一些调查，我发现问题是您的后端在没有响应的情况下断开了连接，Axios 尝试重新上传数据(有时会抛出“网络错误”)。

解决方案是检查客户端和后端服务器之间的代理/防火墙配置，并延长超时和允许的主体大小

例如对于 nginx

client_max_body_size 3G