CN115834567B - 一种vue组件的图片上传方法及系统 - Google Patents

一种vue组件的图片上传方法及系统 Download PDF

Info

Publication number
CN115834567B
CN115834567B CN202211392492.4A CN202211392492A CN115834567B CN 115834567 B CN115834567 B CN 115834567B CN 202211392492 A CN202211392492 A CN 202211392492A CN 115834567 B CN115834567 B CN 115834567B
Authority
CN
China
Prior art keywords
picture
signature
request
vue
axios
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
CN202211392492.4A
Other languages
English (en)
Other versions
CN115834567A (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.)
Sichuan Qiruike Technology Co Ltd
Original Assignee
Sichuan Qiruike 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 Sichuan Qiruike Technology Co Ltd filed Critical Sichuan Qiruike Technology Co Ltd
Priority to CN202211392492.4A priority Critical patent/CN115834567B/zh
Publication of CN115834567A publication Critical patent/CN115834567A/zh
Application granted granted Critical
Publication of CN115834567B publication Critical patent/CN115834567B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Information Transfer Between Computers (AREA)

Abstract

本发明提供了一种vue组件的图片上传方法及系统，包括以下步骤：步骤1：为vue的template绑定图片上传方法；步骤2：发送封装登录信息的axios请求到后端服务器；步骤3：后端服务器接收步骤2中的请求，验证请求头中的登录信息是否有效；步骤4：验证有效，则后端服务器接收请求，生成签名保存到redis，同时返回文件名；步骤5：vue中将签名、文件名以及文件用一个新的axios请求发送到图片存储服务器；步骤6：图片存储服务器连接redis验证签名是否正确；如果验证正确，则按文件名存储图片，返回图片的url链接地址；步骤7：导出vue组件，实现多个位置的组件复用。

Description

一种vue组件的图片上传方法及系统
技术领域
本发明涉及信息技术领域，具体涉及一种vue组件的图片上传方法及系统。
背景技术
作为一种组件化开发的前端框架，vue越来越受到前端开发者的欢迎，组件化带来了良好的代码复用，使得开发的代码量大大减少。对于图片上传功能的各类vue组件都是在开发者提供图片文件和上传地址后发送post请求直接上传图片，后端服务器既要处理各类业务逻辑又要对图片进行存储，这样的方式导致后端服务器承载压力过大，并且即使无权限的用户在获得上传地址后也能直接向后端服务器上传图片，造成不必要的服务器资源浪费。
发明内容
本发明的目的在于提供一种vue组件的图片上传方法及系统，以期解决背景技术中存在的问题。
为了实现上述目的，本发明采用以下技术方案：
一种vue组件的图片上传方法，包括以下步骤：
步骤1：为vue的template绑定图片上传方法；
步骤2：发送封装登录信息的axios请求到后端服务器；
步骤3：后端服务器接收步骤2中的请求，验证请求头中的登录信息是否有效；
步骤4：验证有效，则后端服务器接收请求，生成签名保存到redis，同时返回文件名；
步骤5：vue中将签名、文件名以及文件用一个新的axios请求发送到图片存储服务器；
步骤6：图片存储服务器连接redis验证签名是否正确；如果验证正确，则按文件名存储图片，返回图片的url链接地址；
步骤7：导出vue组件，实现多个位置的组件复用。
在一些实施例中，所述步骤2：发送封装登录信息的axios请求到后端服务器；包括：在图片上传方法中发送axios的get请求，并使用axios的全局拦截器在请求头中封装用户的登录信息。
在一些实施例中，所述步骤4：验证有效，则后端服务器接收请求，生成签名保存到redis，同时返回文件名；包括：后端服务器验证登录信息有效则返回一个唯一签名，并将签名保存到redis，同时以请求参数加uuid作为图片文件名进行返回。
在一些实施例中，所述步骤5：vue中将签名、文件名以及文件用一个新的axios请求发送到图片存储服务器；包括：axios处理返回结果，将图片名、签名和文件数据再次使用一个新的axios的post请求发送到图片存储服务器中。
在一些实施例中，所述步骤7：导出vue组件，实现多个位置的组件复用，包括：vue组件中使用img标签和v-model绑定步骤6返回的url地址从而实现图片上传后的回显，然后将组件默认导出并注册在vue组件中，实现多个位置的组件复用。
在一些实施例中，所述步骤4和步骤6中任一信息验证失败则阻止图片上传。
本实施例还提供了一种vue组件的图片上传系统，包括：
图片存储服务器，所述图片存储服务器用于接收前端的图片显示需求；
后端服务器，所述后端服务器用于接收前端除了图片显示需求以外的需求；后端服务器使用redis保存唯一性签名作为验证用途提供给图片存储服务器使用；图片存储服务器从redis中获取签名以验证，若验证成功则将签名从redis中删除，保证签名的唯一性和可靠性。
本申请所提供的一种vue组件的图片上传方法及系统具有的有益效果包括但不限于：
本发明通过两次不同请求地址的图片上传请求，采取后端服务器与图片存储服务器分离的方式，使用后端服务器对图片上传请求进行鉴权，并将代码封装为vue组件以复用，从而解决传统vue图片上传组件带来的服务器承载压力大的问题。
附图说明
图1是发明实施例的一种vue组件的图片上传方法流程图。
图2是发明实施例的一种vue组件的图片上传系统示意图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
相反，本申请涵盖任何由权利要求定义的在本申请的精髓和范围上做的替代、修改、等效方法以及方案。进一步，为了使公众对本申请有更好的了解，在下文对本申请的细节描述中，详尽描述了一些特定的细节部分。对本领域技术人员来说没有这些细节部分的描述也可以完全理解本申请。
以下将结合图1-2对本申请实施例所涉及的一种vue组件的图片上传方法及系统进行详细说明。值得注意的是，以下实施例仅仅用于解释本申请，并不构成对本申请的限定。
如图1所示，一种vue组件的图片上传方法，包括：
步骤1：初始化vue工程，准备vue组件化环境，编写图片上传单击时间绑定的方法，配置axios请求拦截器全局拦截请求以封装登录信息；
步骤2：使用axios的get请求给后端服务器发送请求，获取图片上传所需的签名；
步骤3：后端服务器接收请求，验证登录信息合法后，生成唯一签名保存到redis，并将当前时间拼接uuid作为图片名，和签名一起返回；
对于上述步骤3，若验证登录信息不合法，则返回错误信息，前端接收后给出提示；
步骤4：前端接收返回数据，将签名、图片名和图片文件使用axios的post请求发送到图片存储服务器；
步骤5：图片存储服务器接收请求，连接redis以验证签名的正确性，验证成功则将签名从redis中删除，并返回图片的url链接地址；
对于上述步骤5，若签名验证失败，则不进行图片存储操作，并返回错误信息，前端接收后给出提示；
步骤6：前端接收数据，使用url链接地址获取图片以进行回显；
步骤7：将图片上传的代码作为单独组件导出，并注册到vue组件中，而后可在多个不同位置进行使用。
本发明还提供一种vue组件的图片上传系统，如图2所示，包括：
图片存储服务器，所述图片存储服务器用于接收前端的图片显示需求；
后端服务器，所述后端服务器用于接收前端除了图片显示需求以外的需求；后端服务器使用redis保存唯一性签名作为验证用途提供给图片存储服务器使用；图片存储服务器从redis中获取签名以验证，若验证成功则将签名从redis中删除，保证签名的唯一性和可靠性。
其中，设置两台不同性能的服务器，一台计算性能好的作为后端服务器，另一台存储空间大的作为图片存储服务器；前端有图片显示需求时，直接请求图片存储服务器，有其它需求时则请求后端服务器。
开启redis服务，并将后端服务器和图片存储服务器与之连接，后端服务器可以生成唯一签名，将其保存到redis；图片存储服务器可以从redis中获取签名以验证，若验证成功则将签名从redis中删除，保证签名的唯一性和可靠性。
在本发明实施例中所述服务器包括但不限于实体服务器、虚拟机服务器及云服务器等。
在本发明实施例中通过服务器分离，redis验签并封装vue组件的方式，降低了图片上传对服务器的资源消耗，图片存储服务器可以作为单独的请求图片服务器服务于不同项目中，扩大了服务器的应用范围。
本发明通过一次验证请求和一次上传请求，并且将后端服务器与图片存储服务器分离以及将具体代码在vue中组件化，从而减少了图片上传时服务器的承载压力并增加了服务器的应用范围。
以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (3)

1.一种vue组件的图片上传方法，其特征在于，包括以下步骤：
步骤1：为vue的template绑定图片上传方法；
步骤2：发送封装登录信息的axios请求到后端服务器；
步骤3：后端服务器接收步骤2中的请求，验证请求头中的登录信息是否有效；
步骤4：验证有效，则后端服务器接收请求，生成签名保存到redis，同时返回文件名；
步骤5：vue中将签名、文件名以及文件用一个新的axios请求发送到图片存储服务器；
步骤6：图片存储服务器连接redis验证签名是否正确；如果验证正确，则按文件名存储图片，返回图片的url链接地址；
步骤7：导出vue组件，实现多个位置的组件复用；
所述步骤2：发送封装登录信息的axios请求到后端服务器；包括：在图片上传方法中发送axios的get请求，并使用axios的全局拦截器在请求头中封装用户的登录信息；
所述步骤4：验证有效，则后端服务器接收请求，生成签名保存到redis，同时返回文件名；包括：后端服务器验证登录信息有效则返回一个唯一签名，并将签名保存到redis，同时以请求参数加uuid作为图片文件名进行返回；
所述步骤5：vue中将签名、文件名以及文件用一个新的axios请求发送到图片存储服务器；包括：axios处理返回结果，将图片名、签名和文件数据再次使用一个新的axios的post请求发送到图片存储服务器中；
所述步骤7：导出vue组件，实现多个位置的组件复用，包括：vue组件中使用img标签和v-model绑定步骤6返回的url地址从而实现图片上传后的回显，然后将组件默认导出并注册在vue组件中，实现多个位置的组件复用。
2.根据权利要求1所述的一种vue组件的图片上传方法，其特征在于，所述步骤4和步骤6中任一信息验证失败则阻止图片上传。
3.一种vue组件的图片上传系统，其特征在于，用于实现权利要求1-2任一所述的方法，包括：
图片存储服务器，所述图片存储服务器用于接收前端的图片显示需求；
后端服务器，所述后端服务器用于接收前端除了图片显示需求以外的需求；后端服务器使用redis保存唯一性签名作为验证用途提供给图片存储服务器使用；图片存储服务器从redis中获取签名以验证，若验证成功则将签名从redis中删除，保证签名的唯一性和可靠性。
CN202211392492.4A 2022-11-08 2022-11-08 一种vue组件的图片上传方法及系统 Active CN115834567B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202211392492.4A CN115834567B (zh) 2022-11-08 2022-11-08 一种vue组件的图片上传方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211392492.4A CN115834567B (zh) 2022-11-08 2022-11-08 一种vue组件的图片上传方法及系统

Publications (2)

Publication Number Publication Date
CN115834567A CN115834567A (zh) 2023-03-21
CN115834567B true CN115834567B (zh) 2024-05-31

Family

ID=85527146

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211392492.4A Active CN115834567B (zh) 2022-11-08 2022-11-08 一种vue组件的图片上传方法及系统

Country Status (1)

Country Link
CN (1) CN115834567B (zh)

Citations (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103731430A (zh) * 2014-01-09 2014-04-16 北京哈工大计算机网络与信息安全技术研究中心 一种基于struts2架构文件上传安全控制方法
CN105025041A (zh) * 2015-08-25 2015-11-04 北京百度网讯科技有限公司 文件上传的方法、装置和系统
WO2017114190A1 (zh) * 2015-12-30 2017-07-06 阿里巴巴集团控股有限公司 一种文件上传处理方法及装置
CN106953925A (zh) * 2017-03-30 2017-07-14 福建中金在线信息科技有限公司 一种图片数据上传方法和系统
CN110956434A (zh) * 2019-07-09 2020-04-03 深圳市中博科创信息技术有限公司 企业服务管理方法和系统
CN111858102A (zh) * 2020-07-30 2020-10-30 山东超越数控电子股份有限公司 一种基于vue和axios的Restful API请求方法及装置
CN111984596A (zh) * 2020-07-08 2020-11-24 福建亿能达信息技术股份有限公司 一种ui框架的文件上传分组管理方法、装置、设备和介质
CN113704333A (zh) * 2021-08-23 2021-11-26 贵州电网有限责任公司 一种数据报表管理方法及系统
CN114117267A (zh) * 2021-12-02 2022-03-01 挂号网（杭州）科技有限公司 一种基于图片的请求登出方法及装置、电子设备、存储介质
CN114172896A (zh) * 2021-12-08 2022-03-11 深圳前海环融联易信息科技服务有限公司 前端接收后端文件流的处理方法
CN114330231A (zh) * 2021-12-29 2022-04-12 中电福富信息科技有限公司 一种基于微服务架构下的文档在线预览及下载方法
CN114553852A (zh) * 2022-02-28 2022-05-27 傲普(上海)新能源有限公司 一种基于异步工业文件服务器的快速上传方法
US11475206B1 (en) * 2020-03-20 2022-10-18 Lead Symphony, Inc. Tool for the creation and editing of web page content

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9363274B2 (en) * 2013-03-27 2016-06-07 Tencent Technology (Shenzhen) Company Limited Methods and systems for broadcasting pictures
US20210383366A1 (en) * 2020-06-08 2021-12-09 Worldpay, Llc Systems and methods for executing ecommerce express checkout transactions
US20220345311A1 (en) * 2021-04-23 2022-10-27 Citrix Systems, Inc. Computing system and related methods providing multiple endpoint connections based upon connection leases

Patent Citations (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103731430A (zh) * 2014-01-09 2014-04-16 北京哈工大计算机网络与信息安全技术研究中心 一种基于struts2架构文件上传安全控制方法
CN105025041A (zh) * 2015-08-25 2015-11-04 北京百度网讯科技有限公司 文件上传的方法、装置和系统
WO2017114190A1 (zh) * 2015-12-30 2017-07-06 阿里巴巴集团控股有限公司 一种文件上传处理方法及装置
CN106953925A (zh) * 2017-03-30 2017-07-14 福建中金在线信息科技有限公司 一种图片数据上传方法和系统
CN110956434A (zh) * 2019-07-09 2020-04-03 深圳市中博科创信息技术有限公司 企业服务管理方法和系统
US11475206B1 (en) * 2020-03-20 2022-10-18 Lead Symphony, Inc. Tool for the creation and editing of web page content
CN111984596A (zh) * 2020-07-08 2020-11-24 福建亿能达信息技术股份有限公司 一种ui框架的文件上传分组管理方法、装置、设备和介质
CN111858102A (zh) * 2020-07-30 2020-10-30 山东超越数控电子股份有限公司 一种基于vue和axios的Restful API请求方法及装置
CN113704333A (zh) * 2021-08-23 2021-11-26 贵州电网有限责任公司 一种数据报表管理方法及系统
CN114117267A (zh) * 2021-12-02 2022-03-01 挂号网（杭州）科技有限公司 一种基于图片的请求登出方法及装置、电子设备、存储介质
CN114172896A (zh) * 2021-12-08 2022-03-11 深圳前海环融联易信息科技服务有限公司 前端接收后端文件流的处理方法
CN114330231A (zh) * 2021-12-29 2022-04-12 中电福富信息科技有限公司 一种基于微服务架构下的文档在线预览及下载方法
CN114553852A (zh) * 2022-02-28 2022-05-27 傲普(上海)新能源有限公司 一种基于异步工业文件服务器的快速上传方法

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
Hongmei Shi ; Chunfang Li ; Yanyan Wang ; Chunling Dong.Design and Implementation of Intelligent Education Platform with Film and Television Features Centered on Textbooks.《2022 IEEE/ACIS 22nd International Conference on Computer and Information Science (ICIS)》.2022,284-289页. *
建筑运维管理系统Web组态软件的开发与应用;安松;《中国优秀硕士学位论文全文数据库 工程科技Ⅱ辑》;20221016;C038-232页 *

Also Published As

Publication number Publication date
CN115834567A (zh) 2023-03-21

Similar Documents

Publication Publication Date Title
CN110147240B (zh) 基于云存储的应用程序安装方法、系统及存储介质
CN101211349A (zh) 一种生成数字电视开机门户页面的系统及其方法
CN104796491A (zh) 一种服务器和基于一次扫码的软件下载及注册方法
CN104918105A (zh) 媒体文件的多屏播放方法、设备及系统
CN113434175B (zh) 数据处理方法、装置、存储介质及设备
CN106105154A (zh) 数据上载的方法、装置及系统
CN101510870B (zh) 基于脚本和模块驱动的代码级网络协议仿真验证组织方法
CN109951318A (zh) 应用的功能配置方法及装置
CN114222256A (zh) 消息发送方法、装置及电子设备
CN112988409B (zh) 一种接口调用方法、装置、计算机设备及存储介质
US11233844B2 (en) Distribution network providing customized content at delivery
CN104348613A (zh) 用户校验方法、装置及系统
CN115834567B (zh) 一种vue组件的图片上传方法及系统
CN111327680B (zh) 认证数据同步方法、装置、系统、计算机设备和存储介质
CN113626512A (zh) 数据处理方法、装置、设备及可读存储介质
CN113515395A (zh) 一种基于多云管理平台的应用接入方法及装置
CN111857985A (zh) 浏览器插件的调用方法、装置、存储介质及终端
CN110858211B (zh) 数据存储方法、装置及系统、存储介质
CN109286692A (zh) 一种配置服务器ipmi静态ip地址的方法
CN112347046B (zh) 一种获取分布式系统中文件的创建时间的方法
CN114531289A (zh) 基于人工智能的系统交互方法及相关设备
CN110309365B (zh) 一种基于Mybatis实现的openstack数据查询方法与装置
CN104219534B (zh) 一种Linux机顶盒实现云存储代理的系统及方法
CN114374517A (zh) 基于动态时间戳的api调用方法、系统、装置及存储介质
CN111953796A (zh) 一种带内管理文件传输方法、装置、设备及可读存储介质

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