Sketch项目文件上传预览方法、系统、设备及介质与流程

本发明涉及文件处理领域，特别涉及一种sketch项目文件上传预览方法、系统、设备及介质。

背景技术：

sketch(素描)是一款针对界面设计的矢量绘图软件，其简单易学、功能丰富，在图形设计公司、互联网公司等普遍使用，但是sketch软件目前只适用于macos(苹果电脑系统)平台，其设计稿原文件只能在macos平台使用sketch软件打开，这样就给没有购置苹果电脑或未采购sketch软件的人士查看稿件带来困难，在需要多位同事协同设计的公司中尤其不方便。

随着各设计团队sketch文件越来越多，这些大文件的存储都比较分散，不利于统一管理。这些sketch文件的上传方式是基于传统ftp(filetransferprotocol，文件传输协议)的模式上传到存储平台，不能在sketch软件中直接完成，这种文件上传方式会直接覆盖同名文件，无法保存版本信息，且存储平台文件无法直接预览。

技术实现要素：

本发明要解决的技术问题是为了克服现有技术中需要协同设计的无macos平台同事无法打开sketch设计稿、且存储平台文件无法直接预览的缺陷，提供一种sketch项目文件的上传预览方法、系统、电子设备及存储介质。

本发明是通过下述技术方案来解决上述技术问题：

本发明提供一种sketch项目文件的上传预览方法，所述方法包括以下步骤：

在sketch插件客户端将sketch项目文件上传并存入存储系统；

sketch插件生成所述sketch项目文件的版本识别号，所述存储系统返回所述sketch项目文件的文件识别号；

根据所述sketch项目文件的所述文件识别号和所述版本识别号生成所述sketch项目文件的在线预览地址；

在浏览器中访问所述在线预览地址，预览所述sketch项目文件。

较佳地，在将sketch项目文件上传并存入存储系统之前，对所述sketch项目文件进行导出标注、切片、打包和压缩；

所述sketch项目文件包括sketch文件、标注稿json(javascriptobjectnotation，js对象简谱)文件、切片json文件和所述sketch文件生成的图片文件中的至少一种；

在浏览器中访问所述在线预览地址时，获取所述sketch文件、所述标注稿json文件、所述切片json文件和所述sketch文件生成的图片文件中的至少一种，加载生成所述sketch项目文件的预览页；

在生成所述sketch项目文件的所述在线预览地址之后，自动打开浏览器，跳转到所述在线预览地址，预览所述sketch项目文件。

较佳地，所述存储系统包括系统数据库和ceph(一种开源存储软件)分布式存储系统；

在将sketch项目文件上传并存入存储系统时，所述ceph分布式存储系统按照sketch.uuid＝a的命名方式存储所述sketch文件，所述ceph分布式存储系统按照a.pages.json的命名方式存储所述标注稿json文件，所述ceph分布式存储系统按照a.slices.json的命名方式存储所述切片json文件，所述ceph分布式存储系统按照a.p.png的命名方式存储所述图片文件；其中a代表所述版本识别号，p代表图片文档标识，所述图片文档标识通过解析所述标注稿json文件和所述切片json文件得到；

所述存储系统返回所述sketch项目文件的文件识别号时，所述系统数据库返回所述sketch项目文件的文件识别号。

较佳地，在将sketch项目文件上传并存入存储系统之前，验证请求上传的客户端的用户权限；

和/或，在浏览器中访问所述在线地址之前，验证请求预览的客户端的用户权限。

本发明还提供一种sketch项目文件的上传预览系统，所述系统包括文件上传模块、识别号生成模块、地址生成模块和预览模块；

所述文件上传模块用于在sketch插件客户端将sketch项目文件上传至存储系统；

所述识别号生成模块用于在sketch插件中生成所述sketch项目文件的版本识别号，所述识别号生成模块还用于从所述存储系统返回所述sketch项目文件的文件识别号；

所述地址生成模块用于根据所述sketch项目文件的文件识别号和版本识别号生成所述sketch项目文件的在线预览地址；

所述预览模块用于在浏览器中访问所述在线预览地址，预览所述sketch项目文件。

较佳地，所述sketch项目文件的上传预览系统还包括预处理模块；

在将sketch项目文件上传并存入存储系统之前，所述预处理模块用于对sketch项目文件进行导出标注、切片、打包和压缩；

所述sketch项目文件包括sketch文件、标注稿json文件、切片json文件和所述sketch文件生成的图片文件中的至少一种；

在浏览器中访问所述在线地址时，所述预览模块还获取sketch文件、所述标注稿json文件、所述切片json文件和所述sketch文件生成的图片文件中的至少一种，加载生成所述sketch项目文件的预览页；在生成所述sketch项目文件的在线预览地址之后，所述预览模块还用于自动打开浏览器，跳转到所述在线预览地址，预览所述sketch项目文件。

较佳地，所述存储系统包括系统数据库和ceph分布式存储系统；

所述sketch项目文件的上传预览系统还包括存储模块；在将sketch项目文件上传并存入所述ceph存储系统时，所述存储模块按照sketch.uuid＝a的命名方式存储所述sketch文件，所述存储模块按照a.pages.json的命名方式存储所述标注稿json文件，所述存储模块按照a.slices.json的命名方式存储所述切片json文件，所述存储模块按照a.p.png的命名方式存储所述图片文件；其中a代表所述版本识别号，p代表图片文档标识，所述图片文档标识通过解析所述标注稿json文件和所述切片json文件得到；

所述存储系统返回所述sketch项目文件的文件识别号时，所述识别号生成模块从所述系统数据库返回所述sketch项目文件的文件识别号。

较佳地，所述sketch项目文件的上传预览系统还包括权限验证模块；在将sketch项目文件上传并存入存储系统之前，所述权限验证模块验证请求上传的客户端的用户权限；

和/或，在浏览器中访问所述在线地址之前，所述权限验证模块验证请求预览的客户端的用户权限。

本发明还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行计算机程序时实现前述的sketch项目文件的上传预览方法。

本发明还提供一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现前述的sketch项目文件的上传预览方法的步骤。

在符合本领域常识的基础上，上述各优选条件，可任意组合，即得本发明各较佳实例。

本发明的积极进步效果在于：本发明在sketch软件中通过一个sketch插件一键上传sketch项目文件，文件上传后web(全球广域网)应用可以通过与项目文件识别号和版本识别号相关联的唯一的在线预览地址预览sketch文件。进一步地，该在线预览地址只有经过授权的用户可以访问，既保证了项目文件的机密性，又为不同团队成员查看设计稿文件提供了便利，大幅简化了设计工作流程，提高工作效率。并且预览sketch文件时可以查看其历史修改版本，使设计工作更快捷方便。

附图说明

图1为本发明实施例1的sketch项目文件的上传预览方法的流程图。

图2为本发明实施例2的sketch项目文件的上传预览方法的流程图。

图3为本发明实施例2的sketch项目文件的上传预览方法的历史版本界面图。

图4为本发明实施例3的sketch项目文件的上传预览系统的模块示意图。

图5为本发明实施例4的sketch项目文件的上传预览系统的模块示意图。

图6为本发明实施例5的实现sketch项目文件的上传预览方法的电子设备的结构示意图。

具体实施方式

下面通过实施例的方式进一步说明本发明，但并不因此将本发明限制在所述的实施例范围之中。

实施例1

本实施例提供一种sketch项目文件的上传预览方法。如图1所示，该方法包括以下步骤：

s11、在sketch插件客户端将sketch项目文件上传并存入存储系统。

设计师完成一个sketch项目文件设计时，sketch插件客户端中通过sktech插件与sketch软件的交互，获取当前的文件数据，在上传设置中选择要上传的页面，设置好其他选项即可调用api(applicationprogramminginterface，应用程序接口)接口服务进行上传操作，将选中的sketch项目文件上传并存入存储系统。

s12、sketch插件生成sketch项目文件的版本识别号，存储系统返回sketch项目文件的文件识别号。

上传成功后，sketch插件会生成sketch项目文件的版本识别号，存储系统会返回sketch项目文件的文件识别号，并将生成的文件识别号和版本识别号写到系统数据库中。

s13、根据sketch项目文件的文件识别号和版本识别号生成sketch项目文件的在线预览地址。

sketch插件根据返回的sketch项目文件的文件识别号和版本识别号生成sketch项目文件的在线预览地址。如某sketch项目文件的文件识别号为5e96fadfa91e5b00692a1a8e，版本识别号为69e869a6-83ba-3fc2-bca8-7fd2b72cb237，那么该sketch项目文件的在线预览地址就为https://网站域名/sketch/5e96fadfa91e5b00692a1a8e/69e869a6-83ba-3fc2-bca8-7fd2b72cb237。

s14、在浏览器中访问在线预览地址，预览sketch项目文件。

在浏览器中sktech插件通过url(uniformresourcelocator，统一资源定位符)路由直接打开web应用的sketch项目文件的在线预览地址，即可预览该sketch项目文件。

本实施例通过创建api接口服务，在sketch软件中通过一个sketch插件一键上传sketch项目文件，文件上传后web应用可以通过与项目文件的文件识别号和版本识别号相关联的唯一的在线预览地址预览sketch文件。本实施例建立了一种新的sketch设计稿交付开发的流程和一个可视化的sketch文件在线预览平台，有效解决了sketch大文件分散化的管理难题，使设计师在插件端一键上传，大大提升了导出和交付稿件的效率，直接在线预览标注稿更是降低了开发环节的时间成本和沟通成本。

实施例2

本实施例是在实施例1的基础上的进一步优化。如图2所示，本实施例的sketch项目文件的上传和预览方法包括如下步骤：

s21、对sketch项目文件进行导出标注、切片、打包和压缩。

设计师完成一个sketch项目文件设计时，首先使用sktech插件对sketch项目文件进行导出标注、切片、打包和压缩，整合成包括sketch文件、标注稿json文件、切片json文件和sketch文件生成的图片文件中的至少一种，以便在后续浏览查看过程中可以重新整合成sketch项目文件。

s22、验证请求上传的客户端的用户权限。

在将sketch项目文件进行整合之后，api接口服务通过token(令牌)验证客户端的用户权限，以确保只有经过认证的用户才能上传文件至存储系统，保障项目的机密性。

s23、在sketch插件客户端将sketch项目文件上传并存入ceph分布式存储系统。

与实施例1的步骤s11类似，本实施例在将sketch项目文件进行整合之后，在sketch插件客户端中通过sktech插件与sketch软件的交互，将包括sketch文件、标注稿json文件、切片json文件和sketch文件生成的图片上传至ceph分布式存储系统。分布式存储系统ceph具有开放api形式，可以很好的直接与sketch对接，并且很适合在企业内部部署。

s24、sketch插件生成sketch项目文件的版本识别号，系统数据库返回sketch项目文件的文件识别号。

本实施例中存储系统包括系统数据库和ceph分布式存储系统，其中系统数据库用于保存文件识别号、版本识别号、项目名称、文件名等信息的数据存储，ceph分布式存储系统用于大文件的物理存储。在将sketch项目文件上传并存入存储系统时，ceph分布式存储系统接收数据并按规则名称存储接收到的文件，并将文件名、文件识别号等信息保存至系统数据库，然后系统数据库返回sketch项目文件的文件识别号f。sketch插件在将文件上传完成后，生成版本识别号a，并将版本识别号a写到系统数据库中。其中文件识别号f用于标识sketch项目文件的存储信息，版本识别号a用于标识该sketch项目文件的不同版本。

ceph分布式存储系统按照sketch.uuid＝a的命名方式存储sketch文件，按照a.pages.json的命名方式存储标注稿json文件，按照a.slices.json的命名方式存储切片json文件，按照a.p.png的命名方式存储图片文件；其中p代表通过解析标注稿json文件和切片json文件得到的图片文档标识。

s25、根据sketch项目文件的文件识别号和版本识别号生成sketch项目文件的在线预览地址。

该步骤与实施例1的步骤s13相同，此处不再赘述。生成sketch项目文件的在线预览地址之后，有两种预览方式，分别为步骤s26的自动预览方式和步骤s27的日常预览方式，步骤s27包括步骤s2701和步骤s2702。

s26、自动打开浏览器，跳转到在线预览地址，预览sketch项目文件。

在生成sketch项目文件的在线预览地址之后，自动打开一个默认浏览器并通过url路由直接打开web应用的该在线预览地址，加载sketch预览页，预览该sketch项目文件。

s2701、验证请求预览的客户端的用户权限。

在日常工作需要查看sketch项目文件时，web应用通过http请求获取到sketch项目文件的文件识别号，通过http协议向api服务端发送预览请求，api接口服务通过token验证请求预览的客户端的用户权限，确保只有经过认证的用户才能进行预览，保障项目文件的机密性。

s2702、在浏览器中访问所述在线预览地址，预览sketch项目文件。

api服务端查询系统数据库，拿到文件存储的版本识别号，再调用ceph系统接口，获取项目相关的大文件，包括sketch文件、标注稿json文件、切片json文件和sketch文件生成的图片中的至少一种，并返回给web客户端；web前端应用通过api服务端获取的标注稿数据、图片、切片信息，在浏览器中sktech插件通过url路由直接打开sketch项目文件的在线预览地址，加载生成sketch项目文件的预览页，用户即可预览该sketch项目文件。同时，如图3所示还可显示该sketch项目文件的历史版本，方便查看以前版本的文件。

本实施例通过创建api接口服务，在sketch软件中通过一个sketch插件一键上传sketch项目文件，文件上传后web应用可以通过与项目文件的文件识别号和版本识别号相关联的唯一的在线预览地址预览sketch文件；该在线预览地址只有经过授权的用户可以访问，既保证了项目文件的机密性，又为不同团队成员查看设计稿文件提供了便利，大幅简化了设计工作流程，提高工作效率。并且预览sketch文件时可以查看其历史修改版本，使设计工作更快捷方便。

实施例3

本实施例提供一种sketch项目文件的上传预览系统，如图4所示，该系统包括文件上传模块1、识别号生成模块2、地址生成模块3和预览模块4。

设计师完成一个sketch项目文件设计时，sketch插件客户端中通过sktech插件与sketch软件的交互，获取当前的文件数据，在上传设置中选择要上传的页面，设置好其他选项即可调用api接口服务进行上传操作，文件上传模块1用于将选中的sketch项目文件上传并存入存储系统。

识别号生成模块2用于在sketch插件中生成sketch项目文件的版本识别号，识别号生成模块2还用于从存储系统返回sketch项目文件的文件识别号，并将生成的文件识别号和版本识别号写到系统数据库中。

sketch插件的地址生成模块3用于根据返回的sketch项目文件的文件识别号和版本识别号生成sketch项目文件的在线预览地址。如某sketch项目文件的文件识别号为5e96fadfa91e5b00692a1a8e，版本识别号为69e869a6-83ba-3fc2-bca8-7fd2b72cb237，那么该sketch项目文件的在线预览地址就为https://网站域名/sketch/5e96fadfa91e5b00692a1a8e/69e869a6-83ba-3fc2-bca8-7fd2b72cb237。

web应用的预览模块4用于在浏览器中访问在线预览地址，预览所述sketch项目文件。

本实施例通过创建api接口服务，在sketch软件中通过一个sketch插件一键上传sketch项目文件，文件上传后web应用可以通过与项目文件的文件识别号和版本识别号相关联的唯一的在线预览地址预览sketch文件。本实施例建立了一种新的sketch设计稿交付开发的流程和一个可视化的sketch文件在线预览平台，有效解决了sketch大文件分散化的管理难题，使设计师在插件端一键上传，大大提升了导出和交付稿件的效率，直接在线预览标注稿更是降低了开发环节的时间成本和沟通成本。

实施例4

本实施例是在实施例3的基础上的进一步优化。如图5所示，本实施例的sketch项目文件的上传和预览系统还包括预处理模块5、权限验证模块6和存储模块7。

在文件上传模块1将sketch项目文件上传并存入存储系统之前，sketch插件的预处理模块5用于对sketch项目文件进行导出标注、切片、打包和压缩，整合成包括sketch文件、标注稿json文件、切片json文件和sketch文件生成的图片文件中的至少一种，以便在后续浏览查看过程中可以重新整合成sketch项目文件。

在将sketch项目文件进行整合之后，文件上传模块1上传文件之前，api接口服务的权限验证模块6通过token验证客户端的用户权限，以确保只有经过认证的用户才能上传文件至存储系统，保障项目的机密性。

与实施例3的文件上传模块1类似，本实施例在将sketch项目文件进行整合之后，在sketch插件客户端中通过sktech插件与sketch软件的交互，文件上传模块1将包括sketch文件、标注稿json文件、切片json文件和sketch文件生成的图片上传并存入ceph分布式存储系统。分布式存储系统ceph具有开放api形式，可以很好的直接与sketch对接，并且很适合在企业内部部署。

本实施例中存储系统包括系统数据库和ceph分布式存储系统，其中系统数据库用于保存文件识别号、版本识别号、项目名称、文件名等信息的数据存储，ceph分布式存储系统用于大文件的物理存储。在将sketch项目文件上传并存入ceph分布式存储系统时，ceph分布式存储系统接收数据并按规则名称存储接收到的文件，具体地ceph分布式存储系统的存储模块7按照sketch.uuid＝a的命名方式存储sketch文件，按照a.pages.json的命名方式存储标注稿json文件，按照a.slices.json的命名方式存储切片json文件，按照a.p.png的命名方式存储图片文件；其中a代表sketch项目文件的版本识别号，p代表通过解析标注稿json文件和切片json文件得到的图片文档标识。

ceph分布式存储系统按照上述规则存储好上传的文件后，将项目名称、文件名、文件识别号等信息保存至系统数据库，然后识别号生成模块2从系统数据库返回sketch项目文件的文件识别号f。sketch插件完成文件上传后，识别号生成模块2生成版本识别号a，并将版本识别号a写到系统数据库中。其中文件识别号f用于标识sketch项目文件的存储信息，版本识别号a用于标识该sketch项目文件的不同版本。

sketch插件的地址生成模块3用于根据生成的sketch项目文件的文件识别号和版本识别号生成sketch项目文件的在线预览地址。如某sketch项目文件的文件识别号为5e96fadfa91e5b00692a1a8e，版本识别号为69e869a6-83ba-3fc2-bca8-7fd2b72cb237，那么该sketch项目文件的在线预览地址就为https://网站域名/sketch/5e96fadfa91e5b00692a1a8e/69e869a6-83ba-3fc2-bca8-7fd2b72cb237。

在生成sketch项目文件的在线预览地址之后，有自动预览和日常预览两种预览方式。自动预览方式是在文件上传完成后，自动打开浏览器并在浏览器中预览sketch项目文件，可以检查和查看上传的文件是否符合要求。此时web应用的预览模块4自动打开一个默认浏览器并通过url路由直接打开web应用的该在线预览地址，并获取sketch文件、标注稿json文件、切片json文件和sketch文件生成的图片文件中的至少一种，加载生成sketch项目文件的预览页，预览该sketch项目文件。

日常预览方式是在日常工作需要查看sketch项目文件时，通过用户权限验证后在浏览器中查看sketch项目文件。此时web应用的预览模块4通过http请求获取到sketch项目文件的文件识别号，通过http协议向api服务端发送预览请求，api接口服务的权限验证模块6通过token验证请求预览的客户端的用户权限，确保只有经过认证的用户才能进行预览，保障项目文件的机密性。然后api服务端查询系统数据库，拿到文件存储的版本识别号a，再调用ceph系统接口，获取项目相关的大文件，包括sketch文件、标注稿json文件、切片json文件和sketch文件生成的图片中的至少一种，并返回给web客户端；web前端应用通过api服务端获取的标注稿数据、图片、切片信息，sktech插件的预览模块4在浏览器中通过url路由直接打开sketch项目文件的在线预览地址，加载生成sketch项目文件的预览页，用户即可预览该sketch项目文件。同时，如图3所示还可显示该sketch项目文件的历史版本，方便查看以前版本的文件。

本实施例通过创建api接口服务，在sketch软件中通过一个sketch插件一键上传sketch项目文件，文件上传后web应用可以通过与项目文件的文件识别号和版本识别号相关联的唯一的在线预览地址预览sketch文件；该在线预览地址只有经过授权的用户可以访问，既保证了项目文件的机密性，又为不同团队成员查看设计稿文件提供了便利，大幅简化了设计工作流程，提高工作效率。并且预览sketch文件时可以查看其历史修改版本，使设计工作更快捷方便。

实施例5

图6为本发明实施例5提供的一种电子设备的结构示意图。所述电子设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现实施例1或2的sktech项目文件的上传预览方法。图6显示的电子设备50仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图6所示，电子设备50可以以通用计算设备的形式表现，例如其可以为服务器设备。电子设备50的组件可以包括但不限于：上述至少一个处理器51、上述至少一个存储器52、连接不同系统组件(包括存储器52和处理器51)的总线53。

总线53包括数据总线、地址总线和控制总线。

存储器52可以包括易失性存储器，例如随机存取存储器(ram)521和/或高速缓存存储器522，还可以进一步包括只读存储器(rom)523。

存储器52还可以包括具有一组(至少一个)程序模块524的程序/实用工具525，这样的程序模块524包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

处理器51通过运行存储在存储器52中的计算机程序，从而执行各种功能应用以及数据处理，例如本发明实施例1或2的sktech项目文件的上传预览方法。

电子设备50也可以与一个或多个外部设备54(例如键盘、指向设备等)通信。这种通信可以通过输入/输出(i/o)接口55进行。并且，模型生成的设备30还可以通过网络适配器56与一个或者多个网络(例如局域网(lan)，广域网(wan)和/或公共网络，例如因特网)通信。如图6所示，网络适配器56通过总线53与模型生成的设备50的其它模块通信。应当明白，尽管图中未示出，可以结合模型生成的设备50使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理器、外部磁盘驱动阵列、raid(磁盘阵列)系统、磁带驱动器以及数据备份存储系统等。

应当注意，尽管在上文详细描述中提及了电子设备的若干单元/模块或子单元/模块，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本发明的实施方式，上文描述的两个或更多单元/模块的特征和功能可以在一个单元/模块中具体化。反之，上文描述的一个单元/模块的特征和功能可以进一步划分为由多个单元/模块来具体化。

实施例6

本实施例提供了一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现实施例1或2的sktech项目文件的上传预览方法中的步骤。

其中，可读存储介质可以采用的更具体可以包括但不限于：便携式盘、硬盘、随机存取存储器、只读存储器、可擦拭可编程只读存储器、光存储器件、磁存储器件或上述的任意合适的组合。

在可能的实施方式中，本发明还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行实现实施例1或2的sktech项目文件的上传预览方法中的步骤。

其中，可以以一种或多种程序设计语言的任意组合来编写用于执行本发明的程序代码，所述程序代码可以完全地在用户设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户设备上部分在远程设备上执行或完全在远程设备上执行。

虽然以上描述了本发明的具体实施方式，但是本领域的技术人员应当理解，这仅是举例说明，本发明的保护范围是由所附权利要求书限定的。本领域的技术人员在不背离本发明的原理和实质的前提下，可以对这些实施方式做出多种变更或修改，但这些变更和修改均落入本发明的保护范围。