jquery.ajax + antd.Upload.customRequest文件上传进度

前情提要：大文件分片上传，需要利用Upload的customRequest属性自定义上传方法。也就是无法通过给Upload的action属性赋值上传地址进行上传，所以Upload组件自带的上传进度条，也没法直接用了，需要在customRequest中加工一下。

jquery.ajax上传进度

XMLHttpRequest.upload 属性返回一个XMLHttpRequestUpload对象，用来表示上传的进度。这个对象是不透明的，但是作为一个XMLHttpRequestEventTarget，可以通过对其绑定事件来追踪它的进度。

$.ajax({
    url, // 上传地址
    type, // get、post、put等类型
    data, // 上传参数
    cache: false, //上传文件不需要缓存
    processData: false, // 告诉jQuery不要去处理发送的数据
    contentType: false, // 告诉jQuery不要去设置contentType
    success, // 上传成功的处理
    error, // 上传失败的处理
    // ...其他ajax的参数请根据需求自定义哈，上面是我需要的
    // 重点在这里
    // 监听上传进度
    // 重点在这里
    xhr: function () {
        var xhr = new XMLHttpRequest();
        //使用XMLHttpRequest.upload监听上传过程，注册progress事件
        xhr.upload.addEventListener('progress', function (progressEvent) {
            // progressEvent.loaded是已上传的进度，progressEvent.total是总数，这里计算上传进度的百分比
            const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
            // 这里调用的是customRequest的参数，需要把上传进度传给upload组件，后面解释
            // 也可以自行处理，比如自己写个进度条，根据percent改变进度条宽度
            e.onProgress({ percent });
        })
        return xhr;
    },
})

Upload.customRequest

customRequest详细一点的解释在github上，这里主要用到onProgress方法。

调用onProgress方法，参数是上传进度，Upload的上传进度条会根据参数显示。
不调用的话，进度条会一直卡在0%，知道上传成功后直接变成100%

代码

// e的属性如上面截图
customRequest: e => {
    $.ajax({
        url, // 上传地址
        type, // get、post、put等类型
        // 上传参数，我就直接把文件信息不做处理放到请求参数里了
        data: e.file,
        cache: false, //上传文件不需要缓存
        processData: false, // 告诉jQuery不要去处理发送的数据
        contentType: false, // 告诉jQuery不要去设置contentType
        // 上传成功的处理
        success: (res) => {
            // 一定要调用onSuccess告诉Upload组件上传成功，res的内容会在onChange参数里的file.response
            e.onSuccess(res)
        }, 
        // 上传失败的处理
        error: (err) => {
            // 告诉Upload组件上传失败，err内容会在onChange参数里的file.response
            e.onError(err)
        },
    // ...其他ajax的参数请根据需求自定义
    // 监听上传进度
    xhr: function () {
        var xhr = new XMLHttpRequest();
        //使用XMLHttpRequest.upload监听上传过程，注册progress事件
        xhr.upload.addEventListener('progress', function (progressEvent) {
            // progressEvent.loaded是已上传的进度，progressEvent.total是总数，这里计算上传进度的百分比
            const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
            // 上传进度传给upload组件
            e.onProgress({ percent });
        })
        return xhr;
    },
})
}