一种基于webworker的PC端文件上传方法技术

本发明专利技术涉及一种基于web worker的PC端文件上传方法，包括以下步骤：初始化worker线程；在主线程中调用antd提供的upload组件用于批量选择文件；重写upload组件的beforeUpload方法，在上传前对文件进行预处理，记录文件的数量；载入文件至fileList，更新视图；调用postMessage通知worker线程发起文件上传，向worker线程传输数据；获取对应的oss上传地址，接收文件流的读取，将文件流推送到oss地址上；文件开始上传，调用postMessage通知主线程执行相应的操作；主线程更新文件上传进度和结果，变动部分文件列表的存档，定期手动把存档的变动部分更新到视图中的fileList中。本发明专利技术采用双线程形式，在worker线程发起文件上传操作，可以释放主线程资源，后续没有同步任务堆积在eventLoop中，保证了页面其他功能的可用性。性。性。

【技术实现步骤摘要】
一种基于web worker的PC端文件上传方法


[0001]本专利技术属于计算机
，具体涉及一种基于web worker的PC端文件上传方法。

技术介绍

[0002]随着大数据和机器学习的飞速发展，AI技术在视觉、文本、语音的分析上取得了重大突破，随着而来的是需要在客户侧上传大规模的语料文件用于机器学习的训练。
[0003]例如在专利公开号为CN101064910A的专利中公开了一种基于呼叫控制的端对端断点续传方法，在TCP层基于对等网络传输， 收发双方加载动态链接库，通过其提供的应用程序接口来实现端对端的断点续传，实现的步骤包括：首先发送方初始化，启动监听的主线程，当一方开始发送文件或一方请求另一方发送文件时，进入发送流程，在收发方协商成功后，发送方发送文件，收发双方自动记录相应的文件开始位置和长度， 如果在传输过程中一方退出，则进入传送中断流程，将断点文件记入日志；下次一方再次上线进行文件续传询问，进入重新发送流程，继续发送，直至文件下载完成。本专利技术解决了数据传输中断点续传功能的适用范围单一的问题，适用范围广，在IP网络中任何一种通信模式都可以使用断点续传的方式进行数据传输来解决数据中断问题，并可以实现自动搜索、自动协商数据来源。
[0004]上传专利中的方法非常消耗线程资源，且在现有技术中. 还包括了直接高并发上传文件，根据接口上传进度来更新页面的进度展示，限制上传操作的并发数，减少对主线程的占用的方式，但高并发的操作导致了页面渲染的迟缓并且无法及时响应用户的其他操作，造成了页面假死的现象。限制并发数的方式，虽然能够避免页面无法响应的问题，但对于大规模文件数量的上传操作就需要耗费非常多的时间，而且这段时间内用户必须停留在当前页面，体验较差。

技术实现思路

[0005]为了解决上述问题，本专利技术提供了一种基于web worker的PC端文件上传方法能够在提升文件并行上传能力的同时，保证页面渲染和其他操作的流畅性，能够及时的更新展示每个文件的上传进度、成功数量等进度信息，同时不会影响页面其他部分的更新渲染、网络请求、事件响应，提升用户体验。
[0006]本专利技术的技术方案如下所示：一种基于web worker的PC端文件上传方法，包括以下步骤：S1：初始化worker线程；S2：在主线程中调用antd提供的upload组件用于批量选择文件；S3：在主线程中重写upload组件的beforeUpload方法，在上传前对文件进行预处理，记录文件的数量；S4：在主线程中载入文件至fileList，更新视图；S5：在主线程中调用postMessage通知worker线程发起文件上传操作，并向worker线程
传输数据；S6：在worker线程中获取对应的oss上传地址，接收文件流的读取，将文件流推送到oss地址上，并注册推送请求的取消事件；S7：文件开始上传，在文件上传请求过程中，在worker线程中调用postMessage通知主线程执行相应的操作；S8：主线程接收worker线程推送的上传文件状态变更通知后，更新文件上传进度和结果，变动部分文件列表的存档，定期手动把存档的变动部分更新到视图中的fileList中。
[0007]优选的，所述步骤S3中预处理的过程包括对单个文件的大小和文件名长度进行限制，通知页面在右下角展示出文件队列上传进度的浮窗，当有多个任务浮窗时将当前任务的浮窗置于最上方的位置。
[0008]优选的，所述步骤S4中在载入待上传文件前还包括步骤：重写upload组件的onChange，设置组件为受控模式；当载入待上传文件并触发onchange时，进行计数。
[0009]优选的，所述主线程在通知worker线程后，注册上传文件的回调事件，对应upload组件暴露的onProgress、onSuccess、onError。
[0010]优选的，所述步骤S8还包括主线程执行上传文件对应的回调事件。
[0011]优选的，所述步骤S5中传输的数据包括文件对象、队列标识。
[0012]优选的，所述步骤S7的相应的操作包括请求进度更新时通知主线程调用onProgress、上传成功时调用onSuccess、上传报错时调用onError，在文件上传过程中，在worker线程中调用onProgress方法来返回上传进度百分比的值并展示，文件上传成功之后调用onSuccess方法来返回上传成功后生成的文件OSS地址，展示文件上传成功的提示，并结束文件的上传过程。
[0013]优选的，在所述步骤S7中的文件上传过程中，若用户主动取消上传，则通知worker线程调用注册的上传队列对应的取消事件，中断本次上传。
[0014]本专利技术还提供了一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现所述基于web worker的PC端文件上传方法的步骤。
[0015]本专利技术还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现所述基于web worker的PC端文件上传方法的步骤。
[0016]本专利技术的有益效果为：本专利技术提出技术方案能够在提升文件并行上传能力的同时，保证页面渲染和其他操作的流畅性；在上千个文件的批量上传时充分利用客户侧的网络和计算能力，能够在短时间内完成全部上传；本专利技术在批量上传进度的渲染没有明显的卡顿感，能够及时的更新展示每个文件的上传进度、成功数量等进度信息，同时不会影响页面其他部分的更新渲染、网络请求、事件响应，保证较好的用户体验；本专利技术还支持对批量上传后失败文件的重传操作和批量上传时的取消操作。
附图说明
[0017]图1为本专利技术实施例的方法步骤流程图。
具体实施方式
[0018]下面将结合说明书附图对本专利技术的实施例进行详细说明。
[0019]一种基于web worker的PC端文件上传方法，包括主线程和worker线程的双线程，其中worker线程用于上传发起文件上传操作，可以释放主线程资源，后续没有同步任务堆积在eventLoop中，保证了页面其他功能的可用性。
[0020]如图1所示：一、主线程负责前期任务，具体为：在用户上传文件时，主线程调用ant的upload组件，批量选择文件。
[0021]重写upload组件的beforeUpload方法，对选择的文件进行预处理，同时记录选择的文件数量。
[0022]预处理过程为：对单个文件的大小和文件名长度进行限制；通知页面在右下角展示出文件队列上传进度的浮窗；当有多个任务浮窗时将当前任务的浮窗置于最上方的位置。
[0023]重写upload组件的onChange，设置组件为受控模式，方便后续进行重传和清空操作；当载入文件并触发onchange时，进行计数，在所有文件刚开始载入和都载入到fileList之后更新视图，即保证了视图对于用户上传操作的及时响应，又保证了upload组件在本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于web worker的PC端文件上传方法，其特征在于，包括以下步骤：S1：初始化worker线程；S2：在主线程中调用antd提供的upload组件用于批量选择文件；S3：在主线程中重写upload组件的beforeUpload方法，在上传前对文件进行预处理，记录文件的数量；S4：在主线程中载入文件至fileList，更新视图；S5：在主线程中调用postMessage通知worker线程发起文件上传操作，并向worker线程传输数据；S6：在worker线程中获取对应的oss上传地址，接收文件流的读取，将文件流推送到oss地址上，并注册推送请求的取消事件；S7：文件开始上传，在文件上传请求过程中，在worker线程中调用postMessage通知主线程执行相应的操作；S8：主线程接收worker线程推送的上传文件状态变更通知后，更新文件上传进度和结果，变动部分文件列表的存档，定期手动把存档的变动部分更新到视图中的fileList中。2.根据权利要求1所述的基于web worker的PC端文件上传方法，其特征在于，所述步骤S3中预处理的过程包括对单个文件的大小和文件名长度进行限制，通知页面在右下角展示出文件队列上传进度的浮窗，当有多个任务浮窗时将当前任务的浮窗置于最上方的位置。3.根据权利要求1所述的基于web worker的PC端文件上传方法，其特征在于，所述步骤S4中在载入待上传文件前还包括步骤：重写upload组件的onChange，设置组件为受控模式；当载入待上传文件并触发onchange时，进行计数。4.根据权利要求1所述的基于web worker的PC端文件上传方法，其特征在于...

【专利技术属性】
技术研发人员：戴泓，
申请(专利权)人：浙江百应科技有限公司，
类型：发明
国别省市：