前情提要:大文件分片上传,需要利用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;
},
})
}