一种UI框架的文件上传分组管理方法、装置、设备和介质制造方法及图纸

本发明专利技术提供一种UI框架的文件上传分组管理方法、装置、设备和介质，方法包括：S1、选择直接调用拍摄仪器拍摄图片或是本地文件上传至本客户端；S2、在文件的概览区域显示文件的缩略图以及文件的分组情况，供文件的预览、上传、下载、查看、删除以及文件管理；文件预览时，浮层显示图片文件的base64码，供缩放或旋转操作，并将对应的缩放旋转信息做为文件信息保存；或调用后台的预览文件的工程，传入非图片文件的唯一ID找到对应得文件存储路径进行读取提供在线预览；文件管理包括点击文件的名称对文件的名称进行修改，拖动文件的缩略图对文件的顺序以及分组进行调整。本发明专利技术基于Ant‑design‑vue的UI框架，多来源的文件上传功能，极大的丰富了上传文件控件的功能及操作文件的便利性。

【技术实现步骤摘要】
一种UI框架的文件上传分组管理方法、装置、设备和介质
本专利技术涉及计算机
，特别涉及一种UI框架的文件上传分组管理方法、装置、设备和介质。
技术介绍
目前，随着时代的发展，前端的技术以及UI框架不断的更新，人们对于界面的美观，组件交互的易用性以及功能多样性的要求越来越高，仅仅提供基础的文件上传功能的控件有时不再满足当前时代下功能的的需要，在新形式下要求对现有的文件上传控件进行优化。现有的文件上传控件来源都较为单一，大部分都为本地文件上传，缺少灵活性，且对上传后的文件没有一个比较可视化的管理。
技术实现思路
本专利技术要解决的技术问题，在于提供一种UI框架的文件上传分组管理方法、装置、设备和介质，基于Ant-design-vue的UI框架，多来源的文件上传功能，极大的丰富了上传文件控件的功能及操作文件的便利性。第一方面，本专利技术提供了一种UI框架的文件上传分组管理方法，包括下述步骤：S1、选择直接调用拍摄仪器拍摄图片或是本地文件上传至本客户端；若选择直接调用拍摄仪器拍摄图片上传，则将拍摄的图片生成的base64码转成文件流并存入文件列表，将文件信息存入文件的分组信息列表，文件信息包括文件的唯一ID，显示的缩略图地址即base64码；若选择本地文件上传，则根据文件类型设置对应的预置图标地址、分组名和图片的旋转角度，若没有分组名则将分组名设置为空，若文件类型为非图片时则设置为空；S2、在文件的概览区域显示文件的缩略图以及文件的分组情况，供文件的预览、上传、下载、查看、删除以及文件管理；文件预览时，若文件为图片，将图片的base64码浮层显示，供缩放或旋转操作，并将对应的缩放旋转信息做为文件信息保存；若文件为非图片文件，则调用后台的预览文件的工程，传入文件的唯一ID找到对应得文件存储路径进行读取提供在线预览；文件上传时，将文件流中的文件名拼接上文件信息的唯一ID作为文件名后将文件流及文件信息提交到服务端；文件下载时，对于已上传到服务端的文件直接进行下载；文件查看时，提交需要查看的分组文件信息的唯一ID给服务端，并根据服务端返回的包含分组结构的文件信息进行展示；文件删除时，将对应的文件信息移出文件的分组信息列表，调用接口删除服务端的文件，对未上传到服务端的文件，则删除文件列表中的文件流；所述文件管理包括：点击文件的名称对文件的名称进行修改，拖动文件的缩略图对文件的顺序以及分组进行调整。第二方面，本专利技术提供了一种UI框架的文件上传分组管理装置，包括：上传模块，用于选择直接调用拍摄仪器拍摄图片或是本地文件上传至本客户端；若选择直接调用拍摄仪器拍摄图片上传，则将拍摄的图片生成的base64码转成文件流并存入文件列表，将文件信息存入文件的分组信息列表，文件信息包括文件的唯一ID，显示的缩略图地址即base64码；若选择本地文件上传，则根据文件类型设置对应的预置图标地址、分组名和图片的旋转角度，若没有分组名则将分组名设置为空，若文件类型为非图片时则设置为空；显示模块，用于在文件的概览区域显示文件的缩略图以及文件的分组情况，供文件的预览、上传、下载、查看、删除以及文件管理；文件预览模块，用于文件预览，且在文件预览时，若文件为图片，将图片的base64码浮层显示，供缩放或旋转操作，并将对应的缩放旋转信息做为文件信息保存；若文件为非图片文件，则调用后台的预览文件的工程，传入文件的唯一ID找到对应得文件存储路径进行读取提供在线预览；文件上传模块，用于文件上传，且在文件上传时，将文件流中的文件名拼接上文件信息的唯一ID作为文件名后将文件流及文件信息提交到服务端；文件下载模块，用于文件下载，且在文件下载时，对于已上传到服务端的文件直接进行下载；文件查看模块，用于文件查看，且在文件查看时，提交需要查看的分组文件信息的唯一ID给服务端，并根据服务端返回的包含分组结构的文件信息进行展示；文件删除模块，用于文件删除，且在文件删除时，将对应的文件信息移出文件的分组信息列表，调用接口删除服务端的文件，对未上传到服务端的文件，则删除文件列表中的文件流；文件管理模块，用于文件管理，包括：点击文件的名称对文件的名称进行修改，拖动文件的缩略图对文件的顺序以及分组进行调整。第三方面，本专利技术提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现第一方面所述的方法。第四方面，本专利技术提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现第一方面所述的方法。本专利技术实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：以ant-design-vue的UI框架为基础结合了可拍摄仪器的硬件，对已有的功能进行整合以及优化，不仅可选择直接调用拍摄仪器拍摄图片还可以直接选择本地文件上传，从而实现了多来源的文件上传功能，而且对上传后的文件提供可视化的管理，比如文件上传上传到客户端后，可在文件的概览区域显示文件的缩略图以及文件的分组情况，供用户对文件的进行预览、上传、下载、查看、删除以及文件管理；大大提升了文件操作的便利性，使功能更为丰富。上述说明仅是本专利技术技术方案的概述，为了能够更清楚了解本专利技术的技术手段，而可依照说明书的内容予以实施，并且为了让本专利技术的上述和其它目的、特征和优点能够更明显易懂，以下特举本专利技术的具体实施方式。附图说明下面参照附图结合实施例对本专利技术作进一步的说明。图1为本专利技术实施例一中方法的整体流程图；图2为本专利技术各实施例所应用的控件的一界面示意图；图3为本专利技术各实施例中上传过程的流程图；图4为本专利技术各实施例中概览区域显示文件的缩略图以及文件的分组情况示意图；图5为本专利技术各实施例中显示图片的base64码浮层状态的示意图；图6为本专利技术各实施例中上传文件及分组信息到服务端的流程图；图7为本专利技术各实施例中点击分组的预览时所显示分组内的文件信息状态的示意图；图8为本专利技术实施例二中装置的结构示意图；图9为本专利技术实施例三中电子设备的结构示意图；图10为本专利技术实施例四中介质的结构示意图。具体实施方式本申请实施例通过提供一种UI框架的文件上传分组管理方法、装置、设备和介质，基于Ant-design-vue的UI框架，多来源的文件上传功能，极大的丰富了上传文件控件的功能及操作文件的便利性。本申请实施例中的技术方案，总体思路如下：设计一个客户端控件，该客户端控件以ant-design-vue的UI框架为基础结合了可拍摄仪器的硬件，对已有的功能进行整合以及优化，不仅可选择直接调用拍摄仪器拍摄图片还可以直接选择本地文件上传，从而实现了多来源的文件上传功能，而且对上传后的文件提供可视化的管理，比如在文件上传上传到客户端后，可在文件的概览区域显示文件的缩略图以及文件的分组情况，供用户本文档来自技高网...

【技术保护点】
1.一种UI框架的文件上传分组管理方法，其特征在于：包括下述步骤：/nS1、选择直接调用拍摄仪器拍摄图片或是本地文件上传至本客户端；/n若选择直接调用拍摄仪器拍摄图片上传，则将拍摄的图片生成的base64码转成文件流并存入文件列表，将文件信息存入文件的分组信息列表，文件信息包括文件的唯一ID，显示的缩略图地址即base64码；/n若选择本地文件上传，则根据文件类型设置对应的预置图标地址、分组名和图片的旋转角度，若没有分组名则将分组名设置为空，若文件类型为非图片时则设置为空；/nS2、在文件的概览区域显示文件的缩略图以及文件的分组情况，供文件的预览、上传、下载、查看、删除以及文件管理；/n文件预览时，若文件为图片，将图片的base64码浮层显示，供缩放或旋转操作，并将对应的缩放旋转信息做为文件信息保存；若文件为非图片文件，则调用后台的预览文件的工程，传入文件的唯一ID找到对应得文件存储路径进行读取提供在线预览；/n文件上传时，将文件流中的文件名拼接上文件信息的唯一ID作为文件名后将文件流及文件信息提交到服务端；/n文件下载时，对于已上传到服务端的文件直接进行下载；/n文件查看时，提交需要查看的分组文件信息的唯一ID给服务端，并根据服务端返回的包含分组结构的文件信息进行展示；/n文件删除时，将对应的文件信息移出文件的分组信息列表，调用接口删除服务端的文件，对未上传到服务端的文件，则删除文件列表中的文件流；/n所述文件管理包括：点击文件的名称对文件的名称进行修改，拖动文件的缩略图对文件的顺序以及分组进行调整。/n...

【技术特征摘要】
1.一种UI框架的文件上传分组管理方法，其特征在于：包括下述步骤：
S1、选择直接调用拍摄仪器拍摄图片或是本地文件上传至本客户端；
若选择直接调用拍摄仪器拍摄图片上传，则将拍摄的图片生成的base64码转成文件流并存入文件列表，将文件信息存入文件的分组信息列表，文件信息包括文件的唯一ID，显示的缩略图地址即base64码；
若选择本地文件上传，则根据文件类型设置对应的预置图标地址、分组名和图片的旋转角度，若没有分组名则将分组名设置为空，若文件类型为非图片时则设置为空；
S2、在文件的概览区域显示文件的缩略图以及文件的分组情况，供文件的预览、上传、下载、查看、删除以及文件管理；
文件预览时，若文件为图片，将图片的base64码浮层显示，供缩放或旋转操作，并将对应的缩放旋转信息做为文件信息保存；若文件为非图片文件，则调用后台的预览文件的工程，传入文件的唯一ID找到对应得文件存储路径进行读取提供在线预览；
文件上传时，将文件流中的文件名拼接上文件信息的唯一ID作为文件名后将文件流及文件信息提交到服务端；
文件下载时，对于已上传到服务端的文件直接进行下载；
文件查看时，提交需要查看的分组文件信息的唯一ID给服务端，并根据服务端返回的包含分组结构的文件信息进行展示；
文件删除时，将对应的文件信息移出文件的分组信息列表，调用接口删除服务端的文件，对未上传到服务端的文件，则删除文件列表中的文件流；
所述文件管理包括：点击文件的名称对文件的名称进行修改，拖动文件的缩略图对文件的顺序以及分组进行调整。


2.根据权利要求1所述的一种UI框架的文件上传分组管理方法，其特征在于：
所述步骤S2中文件管理中，所有的文件缩略图都保存在一个虚拟的分组容器元素下，在将第一文件拖入第二文件的分组容器时，触发拖入事件将第一文件合并到第二文件的分组容器下，然后删除第一文件的虚拟分组以及修改第一文件的分组信息，并生成一个默认但可修改的分组名，第一文件和第二文件的缩略图会显示在同一分组中；
若第一文件在移出后原分组内仅剩一个文件时，会将原分组的分组信息重置为空，再生成虚拟的分组容器元素。


3.根据权利要求1所述的一种UI框架的文件上传分组管理方法，其特征在于：所述步骤S2中的文件上传具体是：
将文件流中的文件名拼接上文件信息的唯一ID作为文件名后将文件流及文件信息提交到服务端；由服务端接收到后根据唯一ID找到对应的文件信息，根据文件信息中的分组信息以及缩放旋转信息，在指定的路径下生成文件，并做对应的缩放旋转操作，将生成文件映射的FTP地址设置到文件信息存储到数据库中后，将文件信息返回到客户端；
根据返回的文件信息修改客户端文件信息的地址。


4.一种UI框架的文件上传分组管理装置，其特征在于：包括：
上传模块，用于选择直接调用拍摄仪器拍摄图片或是本地文件上传至本客户端；
若选择直接调用拍摄仪器拍摄图片上传，则将拍摄的图片生成的base64码转成文件流并存入文件列...

【专利技术属性】
技术研发人员：黄家昌，李文集，杨辉，邱道椿，
申请(专利权)人：福建亿能达信息技术股份有限公司，
类型：发明
国别省市：福建;35