nuxt3+ts项目 使用自定义函数实现多文件上传 但是单个文件的进度 没法显示 要怎么解决?

这是目前想到的 但是视图不改变 试了很多方法也没用
image.png

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)
            })
        }
    })
}
阅读 1.4k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题