一种基于webworker的PC端文件上传方法与流程

一种基于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组件在受控模式下filelist属性的及时性，避免后续更新filelist时无法找到对应文件项而无法更新。
[0024]
worker线程的通信数据不支持函数，因此需要在主线程中注册上传文件的回调事件，对应upload组件暴露的onprogress、onsuccess、onerror。
[0025]
在主线程中调用postmessage通知worker线程发起文件上传操作，传递数据包括文件对象、队列标识等。
[0026]
二、worker线程收到通知和传递的数据后，开始进行文件上传，具体为：在worker线程中获取对应的oss上传地址，接收文件流的读取，然后将文件流推送到oss地址上，并注册推送请求的取消事件，开始文件上传。
[0027]
在文件上传请求过程中，worker线程中调用postmessage通知主线程执行相应的操作，比如请求进度更新时通知主线程调用onprogress、上传成功时调用onsuccess、上传报错时调用onerror，以便视图中有正确的状态展示。
[0028]
单个文件的上传过程中，会一直调用自身的onprogress方法来返回上传进度百分比的值并在页面上展示，然后在上传成功之后会调用onsuccess方法来返回上传成功后生成的文件oss地址，在页面上展示文件上传成功的提示，并结束这个文件的上传过程；如果文件在上传文件过程中发生异常，会调用onerror方法来返回报错信息，在页面上展示文件上传出错的提示，并结束这个文件的上传过程。
[0029]
三、worker线程通知主线程后，主线程的具体操作为：主线程接收worker线程推送的上传文件状态变更通知后，将变动部分存档，并定期手动把变动部分更新到视图中的filelist。在上传过程中，文件状态变更是高频操作，若设置每次变动都通知视图更新，会极大的占用主线程资源，甚至造成假死的现象。
[0030]
四、在上传过程中，如果用户主动取消上传，则通知worker调用之前注册的上传队列对应的取消事件，中断本次上传。
[0031]
本发明还提供了一种一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现所述基于web worker的pc端文件上传方法的步骤。
[0032]
本发明还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现所述基于web worker的pc端文件上传方法的步骤。
[0033]
最后应说明的是：以上所述实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围。都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。