先说结论,再说分析
function httpRequest(e) {
const formData = new FormData()
formData.append('file', e.file)
return server({ // server为基于axios封装的请求方法
url: 'api/upload',
method: 'post',
data: formData,
onUploadProgress: event => e.onProgress({ percent: event.progress * 100 }) // 一行不多不少
}).then(() => {
return new Promise((resolve) => {// 为什么要这么做?
setTimeout(() => {
resolve()
}, 500)
})
})
}
为什么要这么做?加一下console.log
// 自定义上传
function httpRequest(e) {
const formData = new FormData()
formData.append('file', e.file)
return server({ // server为自己封装的请求方法
url: 'api/upload',
method: 'post',
data: formData,
onUploadProgress: event => {
+ console.log('进度: ', event);
e.onProgress({ percent: event.progress * 100 })
}// 解决自定义上传没有进度条
}).then(() => {
+ console.log('上传完成')
return new Promise((resolve) => {
setTimeout(() => {
resolve()
}, 500)
})
})
}
如果不处理会出现这样的问题(上传成功后进度条卡住)
为什么加了这么一行问题就解决了?且看代码分析
下载 element-plus 源码
搜索关键字 httpRequest
修改的就是uploadFiles就是上传列表的数据
return new Promise((resolve) => {
setTimeout(() => {
resolve()
}, 500)
})
这段代码就是通过promise返回值穿透 延时的调用 options.onSuccess 方法
const options: UploadRequestOptions = {
headers: headers || {},
withCredentials,
file: rawFile,
data: beforeData,
method,
filename,
action,
onProgress: (evt) => {
onProgress(evt, rawFile)
},
onSuccess: (res) => {
onSuccess(res, rawFile)
delete requests.value[uid]
},
onError: (err) => {
onError(err, rawFile)
delete requests.value[uid]
},
}
const request = httpRequest(options)
requests.value[uid] = request
if (request instanceof Promise) {
request.then(options.onSuccess, options.onError)
}
用定时器会不会太low了,如果网络波动500ms会不会短呢?有没有更好的办法?
用 nextTick 做异步会不会高大上一些,而且不会受到网络延迟的影响!