uploader组件，批量上传怎么设置实时滚动

这里使用vue-simple-upload插件而成的uploader组件，

实现方式：

<uploader
ref="uploaderRef"
:options="uploadOptions"

:key="new Date().getTime()"

:autoStart="false"

:file-status-text="fileStatusText"

class="uploader"

@file-added="onFileAdded"

@files-added="onFilesAdded"

@file-success="onFileSuccess"

@file-complete="onFileComplete"

@file-progress="onFileProgress"

@file-error="onFileError"

@file-removed="onFileRemoved">

其中我们注意onFileProgress事件：

上传中，

rootFile 当前文件文件所属的根 Uploader.File 对象，它应该包含或者等于成功上传，

file 当前文件

chunk Uploader.Chunk 实例，它就是该文件的最后一个块实例，如果你想得到请求响应码的话，chunk.xhr.status 就是

const onFileProgress = (file, rootFile, chunk, progress) => {
scrollToCurrentFile(file.id)

}

const scrollToCurrentFile = (fileId) => { /// 文件跟踪

// 确保 DOM 已更新
nextTick(() => {

const fileList = fileListRef.value // 获取 ul 容器

const fileElement = fileList.querySelector(`.file_${fileId}`)

    if (fileElement) {

         // 平滑滚动到文件位置
fileElement.scrollIntoView({

          behavior: 'smooth',
block: 'center', // 垂直居中显示

            })
}
})
}

上述代码即可实现跟随下滑