CN111984596B - 一种ui框架的文件上传分组管理方法、装置、设备和介质 - Google Patents

一种ui框架的文件上传分组管理方法、装置、设备和介质 Download PDF

Info

Publication number
CN111984596B
CN111984596B CN202010650857.3A CN202010650857A CN111984596B CN 111984596 B CN111984596 B CN 111984596B CN 202010650857 A CN202010650857 A CN 202010650857A CN 111984596 B CN111984596 B CN 111984596B
Authority
CN
China
Prior art keywords
file
information
grouping
name
files
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202010650857.3A
Other languages
English (en)
Other versions
CN111984596A (zh
Inventor
黄家昌
李文集
杨辉
邱道椿
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Fujian Ecan Information Technology Co ltd
Original Assignee
Fujian Ecan Information Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Fujian Ecan Information Technology Co ltd filed Critical Fujian Ecan Information Technology Co ltd
Priority to CN202010650857.3A priority Critical patent/CN111984596B/zh
Publication of CN111984596A publication Critical patent/CN111984596A/zh
Application granted granted Critical
Publication of CN111984596B publication Critical patent/CN111984596B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/10File systems; File servers
    • G06F16/16File or folder operations, e.g. details of user interfaces specifically adapted to file systems
    • G06F16/168Details of user interfaces specifically adapted to file systems, e.g. browsing and visualisation, 2d or 3d GUIs
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/50Information retrieval; Database structures therefor; File system structures therefor of still image data
    • G06F16/54Browsing; Visualisation therefor
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04LTRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00Network arrangements or protocols for supporting network services or applications
    • H04L67/01Protocols
    • H04L67/06Protocols specially adapted for file transfer, e.g. file transfer protocol [FTP]

Abstract

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

Description

一种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框架为基础结合了可拍摄仪器的硬件,对已有的功能进行整合以及优化,不仅可选择直接调用拍摄仪器拍摄图片还可以直接选择本地文件上传,从而实现了多来源的文件上传功能,而且对上传后的文件提供可视化的管理,比如在文件上传上传到客户端后,可在文件的概览区域显示文件的缩略图以及文件的分组情况,供用户对文件的进行预览、上传、下载、查看、删除以及文件管理。
实施例一
本实施例提供一种UI框架的文件上传分组管理方法,该方法用于客户端的控件,如图1所示,包括下述步骤:
S1、选择直接调用拍摄仪器拍摄图片或是本地文件上传至本客户端,如图2所示,控件页面可以设置拍摄控键或本地上传控键供用户进行选择;
如图3所示,若选择直接调用拍摄仪器拍摄图片上传,则将拍摄的图片生成的base64码转成文件流并存入文件列表,将文件信息存入文件的分组信息列表,文件信息包括文件的唯一ID,显示的缩略图地址即base64码;以高拍仪为例,接入高拍仪时,在控件初始化时调用高拍仪初始化的方法将摄像头调起,可在拍摄时进行摄像头的远近调整以及画面旋转,并设置文件名(若不设置则自动生成),点击拍摄会控键生成图片的base64码,然后转成文件流;
若选择本地文件上传,则根据文件类型设置对应的预置图标地址、分组名和图片的旋转角度,若没有分组名则将分组名设置为空,若文件类型为非图片时则设置为空;
S2、上传完毕后,如图4所示,在文件的概览区域显示文件的缩略图以及文件的分组情况,供文件的预览、上传、下载、查看、删除以及文件管理;
文件预览时,点击预览文件的图标即可查看文件,若文件为图片,如图5所示,将图片的base64码浮层显示,供用户对图片进行缩放或旋转操作,并将对应的缩放旋转信息作为文件信息保存;若文件为非图片文件,则调用后台的预览文件的工程,传入文件的唯一ID找到对应的文件存储路径进行读取提供在线预览;
如图6所示,文件上传时,将文件流中的文件名拼接上文件信息的唯一ID作为文件名后将文件流及文件信息提交到服务端;具体是:客户端将文件流中的文件名拼接上文件信息的唯一ID作为文件名后将文件流及文件信息提交到服务端;由服务端接收到后根据唯一ID找到对应的文件信息,根据文件信息中的分组信息以及缩放旋转信息,在指定的路径下生成文件,并做对应的缩放旋转操作,将生成文件映射的FTP地址设置到文件信息存储到数据库中后,将文件信息返回到客户端;客户端根据返回的文件信息修改客户端文件信息的地址。
文件下载时,对于已上传到服务端的文件直接进行下载,未上传至服务端的文件不提供下载功能(不显示下载的图标);
文件查看时,提交需要查看的分组文件信息的唯一ID给服务端,并根据服务端返回的包含分组结构的文件信息进行展示;
文件删除时,将对应的文件信息移出文件的分组信息列表,调用接口删除服务端的文件,对未上传到服务端的文件,则删除文件列表中的文件流;
所述文件管理包括:点击文件的名称对文件的名称进行修改,拖动文件的缩略图对文件的顺序以及分组进行调整,文件的拖动基于H5的拖放API实现。所有的文件缩略图都保存在一个虚拟的分组容器元素下,在将第一文件拖入第二文件的分组容器时,触发拖入事件将第一文件合并到第二文件的分组容器下,然后删除第一文件的虚拟分组以及修改第一文件的分组信息,并生成一个默认但可修改的分组名,点击分组名可进行修改,再如图4所示,第一文件和第二文件的缩略图会显示在同一分组中,当鼠标移入分组点击分组的预览,会显示分组内如图7所示的文件信息;若第一文件在移出后原分组内仅剩一个文件时,会将原分组的分组信息重置为空,再生成虚拟的分组容器元素。
基于同一发明构思,本申请还提供了与实施例一中的方法对应的装置,详见实施例二。
实施例二
如图8所示,在本实施例中提供了一种UI框架的文件上传分组管理装置,包括:
上传模块,用于选择直接调用拍摄仪器拍摄图片或是本地文件上传至本客户端;
如图3所示,若选择直接调用拍摄仪器拍摄图片上传,则将拍摄的图片生成的base64码转成文件流并存入文件列表,将文件信息存入文件的分组信息列表,文件信息包括文件的唯一ID,显示的缩略图地址即base64码;以高拍仪为例,接入高拍仪时,在控件初始化时调用高拍仪初始化的方法将摄像头调起,可在拍摄时进行摄像头的远近调整以及画面旋转,并设置文件名(若不设置则自动生成),点击拍摄会控键生成图片的base64码,然后转成文件流;
若选择本地文件上传,则根据文件类型设置对应的预置图标地址、分组名和图片的旋转角度,若没有分组名则将分组名设置为空,若文件类型为非图片时则设置为空;
显示模块,用于在文件的概览区域显示文件的缩略图以及文件的分组情况,如图4所示,在文件的概览区域显示文件的缩略图以及文件的分组情况,供文件的预览、上传、下载、查看、删除以及文件管理;
文件预览模块,用于文件预览,且在文件预览时,点击预览文件的图标即可查看文件,若文件为图片,如图5所示,将图片的base64码浮层显示,供缩放或旋转操作,并将对应的缩放旋转信息作为文件信息保存;若文件为非图片文件,则调用后台的预览文件的工程,传入文件的唯一ID找到对应的文件存储路径进行读取提供在线预览;
文件上传模块,用于文件上传,且在文件上传时,将文件流中的文件名拼接上文件信息的唯一ID作为文件名后将文件流及文件信息提交到服务端;具体是:
如图6所示,客户端将文件流中的文件名拼接上文件信息的唯一ID作为文件名后将文件流及文件信息提交到服务端;由服务端接收到后根据唯一ID找到对应的文件信息,根据文件信息中的分组信息以及缩放旋转信息,在指定的路径下生成文件,并做对应的缩放旋转操作,将生成文件映射的FTP地址设置到文件信息存储到数据库中后,将文件信息返回到客户端;客户端根据返回的文件信息修改客户端文件信息的地址。
文件下载模块,用于文件下载,且在文件下载时,对于已上传到服务端的文件直接进行下载,未上传至服务端的文件不提供下载功能(不显示下载的图标);
文件查看模块,用于文件查看,且在文件查看时,提交需要查看的分组文件信息的唯一ID给服务端,并根据服务端返回的包含分组结构的文件信息进行展示;
文件删除模块,用于文件删除,且在文件删除时,将对应的文件信息移出文件的分组信息列表,调用接口删除服务端的文件,对未上传到服务端的文件,则删除文件列表中的文件流;
文件管理模块,用于文件管理,包括:点击文件的名称对文件的名称进行修改,拖动文件的缩略图对文件的顺序以及分组进行调整。
如图7所示,分组进行调整具体是:将所有的文件缩略图都保存在一个虚拟的分组容器元素下,在将第一文件拖入第二文件的分组容器时,触发拖入事件将第一文件合并到第二文件的分组容器下,然后删除第一文件的虚拟分组以及修改第一文件的分组信息,并生成一个默认但可修改的分组名,第一文件和第二文件的缩略图会显示在同一分组中;若第一文件在移出后原分组内仅剩一个文件时,会将原分组的分组信息重置为空,再生成虚拟的分组容器元素。
由于本发明实施例二所介绍的装置,为实施本发明实施例一的方法所采用的装置,故而基于本发明实施例一所介绍的方法,本领域所属人员能够了解该装置的具体结构及变形,故而在此不再赘述。凡是本发明实施例一的方法所采用的装置都属于本发明所欲保护的范围。
基于同一发明构思,本申请提供了实施例一对应的电子设备实施例,详见实施例三。
实施例三
本实施例提供了一种电子设备,如图8所示,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,处理器执行计算机程序时,可以实现实施例一中任一实施方式。
由于本实施例所介绍的电子设备为实施本申请实施例一中方法所采用的设备,故而基于本申请实施例一中所介绍的方法,本领域所属技术人员能够了解本实施例的电子设备的具体实施方式以及其各种变化形式,所以在此对于该电子设备如何实现本申请实施例中的方法不再详细介绍。只要本领域所属技术人员实施本申请实施例中的方法所采用的设备,都属于本申请所欲保护的范围。
基于同一发明构思,本申请提供了实施例一对应的存储介质,详见实施例四。
实施例四
本实施例提供一种计算机可读存储介质,如图9所示,其上存储有计算机程序,该计算机程序被处理器执行时,可以实现实施例一中任一实施方式。
本申请实施例中提供的技术方案,至少具有如下技术效果或优点:本发明实施例中提供的一个或多个技术方案,至少具有如下技术效果或优点:以ant-design-vue的UI框架为基础结合了可拍摄仪器的硬件,对已有的功能进行整合以及优化,不仅可选择直接调用拍摄仪器拍摄图片还可以直接选择本地文件上传,从而实现了多来源的文件上传功能,而且对上传后的文件提供可视化的管理,比如文件上传上传到客户端后,可在文件的概览区域显示文件的缩略图以及文件的分组情况,供用户对文件的进行预览、上传、下载、查看、删除以及文件管理;大大提升了文件操作的便利性,使功能更为丰富。本领域内的技术人员应明白,本发明的实施例可提供为方法、装置或***、或计算机程序产品。因此,本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(***)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
虽然以上描述了本发明的具体实施方式,但是熟悉本技术领域的技术人员应当理解,我们所描述的具体的实施例只是说明性的,而不是用于对本发明的范围的限定,熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化,都应当涵盖在本发明的权利要求所保护的范围内。

Claims (8)

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码转成文件流并存入文件列表,将文件信息存入文件的分组信息列表,文件信息包括文件的唯一ID,显示的缩略图地址即base64码;
若选择本地文件上传,则根据文件类型设置对应的预置图标地址、分组名和图片的旋转角度,若没有分组名则将分组名设置为空,若文件类型为非图片时则设置为空;
显示模块,用于在文件的概览区域显示文件的缩略图以及文件的分组情况,供文件的预览、上传、下载、查看、删除以及文件管理;
文件预览模块,用于文件预览,且在文件预览时,若文件为图片,将图片的base64码浮层显示,供缩放或旋转操作,并将对应的缩放旋转信息作为文件信息保存;若文件为非图片文件,则调用后台的预览文件的工程,传入文件的唯一ID找到对应的文件存储路径进行读取提供在线预览;
文件上传模块,用于文件上传,且在文件上传时,将文件流中的文件名拼接上文件信息的唯一ID作为文件名后将文件流及文件信息提交到服务端;
文件下载模块,用于文件下载,且在文件下载时,对于已上传到服务端的文件直接进行下载;
文件查看模块,用于文件查看,且在文件查看时,提交需要查看的分组文件信息的唯一ID给服务端,并根据服务端返回的包含分组结构的文件信息进行展示;
文件删除模块,用于文件删除,且在文件删除时,将对应的文件信息移出文件的分组信息列表,调用接口删除服务端的文件,对未上传到服务端的文件,则删除文件列表中的文件流;
文件管理模块,用于文件管理,包括:点击文件的名称对文件的名称进行修改,拖动文件的缩略图对文件的顺序以及分组进行调整。
5.根据权利要求4所述的一种UI框架的文件上传分组管理装置,其特征在于:所述文件管理是将所有的文件缩略图都保存在一个虚拟的分组容器元素下,在将第一文件拖入第二文件的分组容器时,触发拖入事件将第一文件合并到第二文件的分组容器下,然后删除第一文件的虚拟分组以及修改第一文件的分组信息,并生成一个默认但可修改的分组名,第一文件和第二文件的缩略图会显示在同一分组中;
若第一文件在移出后原分组内仅剩一个文件时,会将原分组的分组信息重置为空,再生成虚拟的分组容器元素。
6.根据权利要求4所述的一种UI框架的文件上传分组管理装置,其特征在于:所述文件上传模块在文件上传时,具体是:
将文件流中的文件名拼接上文件信息的唯一ID作为文件名后将文件流及文件信息提交到服务端;由服务端接收到后根据唯一ID找到对应的文件信息,根据文件信息中的分组信息以及缩放旋转信息,在指定的路径下生成文件,并做对应的缩放旋转操作,将生成文件映射的FTP地址设置到文件信息存储到数据库中后,将文件信息返回到客户端;
根据返回的文件信息修改客户端文件信息的地址。
7.一种电子设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,其特征在于,所述处理器执行所述程序时实现如权利要求1至3任一项所述的方法。
8.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,该程序被处理器执行时实现如权利要求1至3任一项所述的方法。
CN202010650857.3A 2020-07-08 2020-07-08 一种ui框架的文件上传分组管理方法、装置、设备和介质 Active CN111984596B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010650857.3A CN111984596B (zh) 2020-07-08 2020-07-08 一种ui框架的文件上传分组管理方法、装置、设备和介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010650857.3A CN111984596B (zh) 2020-07-08 2020-07-08 一种ui框架的文件上传分组管理方法、装置、设备和介质

Publications (2)

Publication Number Publication Date
CN111984596A CN111984596A (zh) 2020-11-24
CN111984596B true CN111984596B (zh) 2022-05-10

Family

ID=73438227

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010650857.3A Active CN111984596B (zh) 2020-07-08 2020-07-08 一种ui框架的文件上传分组管理方法、装置、设备和介质

Country Status (1)

Country Link
CN (1) CN111984596B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113721813A (zh) * 2021-08-20 2021-11-30 武汉虹信技术服务有限责任公司 基于移动设备的图片文档混合上传或展示方法及***

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2001357010A (ja) * 2000-04-10 2001-12-26 Mitsubishi Corp インターネット上のWebサーバにおいてファイルを受託管理する方法およびこの方法に用いるファイル受託管理装置
CN102508864A (zh) * 2011-10-10 2012-06-20 深圳中兴网信科技有限公司 一种基于Tapestry框架的图片实时预览方法
CN106506676A (zh) * 2016-11-24 2017-03-15 武汉理工大学 文件传输处理方法及辅助***
CN108875085A (zh) * 2018-07-18 2018-11-23 平安科技(深圳)有限公司 混合应用的图片处理方法、装置、计算机设备及存储介质
CN110688595A (zh) * 2019-09-09 2020-01-14 上海凯京信达科技集团有限公司 一种文件在线预览方法、装置、设备和存储介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2001357010A (ja) * 2000-04-10 2001-12-26 Mitsubishi Corp インターネット上のWebサーバにおいてファイルを受託管理する方法およびこの方法に用いるファイル受託管理装置
CN102508864A (zh) * 2011-10-10 2012-06-20 深圳中兴网信科技有限公司 一种基于Tapestry框架的图片实时预览方法
CN106506676A (zh) * 2016-11-24 2017-03-15 武汉理工大学 文件传输处理方法及辅助***
CN108875085A (zh) * 2018-07-18 2018-11-23 平安科技(深圳)有限公司 混合应用的图片处理方法、装置、计算机设备及存储介质
CN110688595A (zh) * 2019-09-09 2020-01-14 上海凯京信达科技集团有限公司 一种文件在线预览方法、装置、设备和存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
《springboot快速搭建文件管理***_IT加载中的博客-CSDN博客_springboot文件管理***》;IT加载中;《https://blog.csdn.net/JinglongSource/article/details/88544115》;20190313;第1-5页 *

Also Published As

Publication number Publication date
CN111984596A (zh) 2020-11-24

Similar Documents

Publication Publication Date Title
US11354022B2 (en) Multi-directional and variable speed navigation of collage multi-media
US8365092B2 (en) On-demand loading of media in a multi-media presentation
US8566732B2 (en) Synchronization of widgets and dashboards
US20070162953A1 (en) Media package and a system and method for managing a media package
US20100005417A1 (en) Position editing tool of collage multi-media
US20060155672A1 (en) Systems and methods for single input installation of an application
US20080072157A1 (en) System for controlling objects in a recursive browser system: ZSpace sharing
CN112862927B (zh) 用于发布视频的方法、装置、设备和介质
JP2013543606A (ja) デジタル画像及びビデオの操作及び転送のためのシステム及び方法
US20090019370A1 (en) System for controlling objects in a recursive browser system: forcefield
CN111984596B (zh) 一种ui框架的文件上传分组管理方法、装置、设备和介质
US20190250784A1 (en) Sharing groups for capturing digital media
US20150254212A1 (en) Position editing tool of collage multi-media
US20060156238A1 (en) Systems and methods for providing loops
JP2004128570A (ja) コンテンツ作成実演システム及びコンテンツ作成実演方法
CN112162805A (zh) 截图方法、装置和电子设备
WO2023207981A1 (zh) 配置文件生成方法、装置、电子设备、介质及程序产品
JP2001142565A (ja) 情報処理装置
US11949730B2 (en) Context-aware interface layer for remote applications
US11069091B2 (en) Systems and methods for presentation of and interaction with immersive content
US8176285B2 (en) Importing media content items
US20060155763A1 (en) Systems and methods for providing an interface for interacting with a loop
JP2001142753A (ja) 情報処理装置、情報処理方法及び情報処理プログラムを記録した記録媒体
JP2001142597A (ja) 情報処理装置、情報処理方法及び情報処理プログラムを記録した記録媒体
JP2022546614A (ja) 画像記念品生成

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant