antd of vue 利用customRequest自定义渲染上传进度条
程序员文章站
2022-06-16 12:33:23
antd of vue 上传进度条显示在a-upload组件中使用customRequest自定义渲染 ...
antd of vue 上传进度条显示
-
在a-upload组件中使用customRequest自定义渲染
<a-upload name="file" :customRequest="customRequest" //通过覆盖默认的上传行为,可以自定义自己的上传实现(Function) > <a-button icon="upload"> 文件上传</a-button> </a-upload> <p> </p>//预留空间
-
在
data
中注册customRequest:null
-
在
created
里写方法
created () {
const _this = this
this.customRequest = function (options) {
let params = new FormData();
params.append("file", options.file);
// 发送请求
debugger
axios.post((process.env.VUE_APP_API_BASE_URL + '/system/file/upload'), params, {headers: {token: Vue.ls.get(ACCESS_TOKEN)}}).then((res)=>{
debugger
options.onSuccess(res, options.file) //解决一直loading情况,调用onSuccess
var fileInfo = res.data.data
fileInfo.action = '删除'
// 赋值给数组在table中显示上传列表
_this.bgData.push(fileInfo)
_this.fileIds.push(fileInfo.id)
_this.openFile = true
// 在上传成功后进度条显示为99
progress.percent = 99
debugger
_this.$message.success(`${res.data.data.name} 上传成功`)//上传成功显示
})
let progress = { percent: 1 }
let speed = 100/(options.file.size/65000)//上传速度
const intervalId = setInterval(() => {
debugger
// 控制进度条防止在未上传成功时进度条达到100
if (progress.percent < 99 && progress.percent+speed < 100 ) {
progress.percent+=speed//控制进度条速度
options.onProgress(progress)//onProgress接收一个对象{ percent: 进度 }在进度条上显示
} else if((progress.percent = 99) ) {
progress.percent++
} else if (progress.percent=100){
clearInterval(intervalId)
}
}, 100)
};
- 效果图
本文地址:https://blog.csdn.net/qq_42068550/article/details/107543044