这是目前想到的 但是视图不改变 试了很多方法也没用
html
<draggable
v-model="fileList"
@start="drag=true"
@end="drag=false"
class="file-list"
item-key="id">
<template #item="{element}">
<div v-if="element?.url">
....
<div class="file-item" v-else>
<div class="file" v-loading="element.isLoading" :element-loading-text="`${element.progress}%`"> //进度 不会跟着改变
<img :src="element.url"/>
<div class="mask">
<el-button type="danger" size="small" @click="handleRemove(element)">删除</el-button>
</div>
</div>
<div class="title">{{ element.name }}</div>
</div>
</div>
</template>
</draggable>
//js
async function handleThumbnailUpload(option: UploadRequestOptions) {
let timer:any = 0;
let { file } = option;
let formData = new FormData();
formData.append("file",file)
//@ts-ignore
formData.append('uuid',file.uid)
//插入图片 生成预览数据
fileList.value!.push({
name: file.name,
url: URL.createObjectURL(file),
//@ts-ignore
uid: file.uid,
isLoading: true,
progress: 0
})
let num = 0
timer = setInterval(()=>{
num+=5
if (num>=100) clearInterval(timer);
//@ts-ignore
option.onProgress({percent: num}) // 定时器 增加进度
},200)
const { data ,code } = await bookUpload(formData) //图片上传请求
clearInterval(timer);
if (!code) {
return feedback.msgError("上传失败")
}
fileList.value.forEach((item: any, index: number)=>{
if (item.uid == data.uuid) {
item.id = data.id
item.isLoading = false //隐藏加载效果
}
})
}
//然后 option.onProgress({percent: num}) 就会触发handleProgress这个函数 evt变量就有数值 但是 页面不会渲染动态显示进度数值
function handleProgress(evt: UploadProgressEvent, uploadFile: UploadFile) {
fileList.value.forEach((item: any, index: number) => {
if (item.uid == uploadFile.uid) {
nextTick(()=>{
item.progress = evt.percent
console.log("item",item)
})
}
})
}