基于SpringBoot+vue2+SpringSecurity图片上传

这是我在学习图片上传功能的时候自己总结出来的,希望对朋友你有所帮助

前端vue2中的问题上传图片

<el-upload
              :headers="{ 'Authorization': token }"
                class="avatar-uploader"
                action='http://localhost:8080/images/upload'
                :multiple="false"
                :show-file-list="false"
      
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>

这是要上传到后端的地址

action='http://localhost:8080/images/upload'

在 el-upload标签中定义 :headers="{ 'Authorization': token }"

但注意:token要在data的return中定义 获取token的值,这是事先将token存在了sessionStorage里边,现在可以直接获取

data() {
      return {
        token:sessionStorage.getItem('token'),
     }
}

是先存储的token在sessionStorage中,在登录逻辑的时候就存储

 sessionStorage.setItem("token",res.headers.authorization);
 sessionStorage.setItem("username",this.ruleForm.username)

后端逻辑再学习中,请耐性等待....

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
# 项目特点 - 前台参考"Hexo"的"Butterfly"设计,美观简洁,响应式体验好。 - 后台参考"element-admin"设计,侧边栏,历史标签,面包屑自动生成。 - 采用Markdown编辑器,写法简单。 - 评论支持表情、GIF动图输入回复等,样式参考Valine。 - 前后端分离部署,适应当前潮流。 - 接入第三方登录,减少注册成本。 - 留言采用弹幕墙,更加炫酷。 - 支持代码高亮和复制,图片预览,深色模式等功能,提升用户体验。 - 搜索文章支持高亮分词,响应速度快。 - 新增文章目录、推荐文章等功能,优化用户体验。 - 新增在线聊天室,支持撤回、语音输入、统计未读数量等功能。 - 新增aop注解实现操作日志功能。 - 支持动态权限修改,采用RBAC模型,前端菜单和后台权限实时更新。 - 后台管理支持修改背景图片,博客配置等信息,操作简单,支持上相册。 - 代码支持多种搜索模式(Elasticsearch或MYSQL),支持多种上模式(OSS或本地),可支持配置。Elasticsearch占内存较高,如果服务器配置太低,不建议使用。 - 新增网站导航功能,页面优雅美观。可自行添加自己常用的网站进行分类和排序。 - 新增聊天管理功能,方便清理垃圾聊天内容。 - 新增登录日志功能,随时查看用户的登录信息。 - 前台页面重新布局重构,页面布局更加简洁,首页加载速度更快。 - 前台首页文章列表顶部新增滚动消息,超级炫酷。 - 新增了监控用户是否授权的功能、增加了用户的体验性。 - 增加图片删除后也将该路径的图片删除的功能、大大提高了文件存储的利用率。 - 将接口进行**axios**二次封装、更利于接口的请求和响应。 - 新增本博客配套的**微信小程序**,可随时用手机浏览文章。并且接入微信登录,减少注册成本。 - **微信小程序**新增每日新闻热搜功能、可随时查看热搜。 - 新增本博客配套的**App**,同时接入qq、微博登录,使用更加方便。 - 代码遵循阿里巴巴开发规范,利于开发者学习。 ## 技术介绍 **前端:** vue + vuex + vue-router + axios + vuetify + element + echarts + uniapp + uview + Html + Css + JavaScript **后端:** SpringBoot + nginx + docker + SpringSecurity + Swagger2 + MyBatisPlus + Mysql + Redis + elasticsearch + RabbitMQ + MaxWell + Websocket **其他:** 接入QQ,微博、微信第三方登录,接入腾讯云人机验证、websocket ## 运行环境 ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。
Spring Boot是一个用于简化Java开发的框架,Vue是一种流行的前端框架,Element Plus是一个基于Vue的UI组件库。要打造一个分布式存储系统,我们可以使用Spring Boot作为后端框架,Vue和Element Plus作为前端框架。 首先,我们使用Spring Boot搭建后端服务。Spring Boot提供了许多功能,如依赖管理、自动配置和快速开发等。我们可以使用Spring Boot来构建分布式存储系统的后端逻辑,包括数据存储、数据处理和业务逻辑等。Spring Boot还提供了与其他Java框架和技术的集成,如Spring Data、Spring Cloud和Spring Security等,这些可以帮助我们更轻松地构建和管理分布式存储系统。 接下来,我们使用Vue和Element Plus来构建前端界面。Vue是一个基于JavaScript的前端框架,可以帮助我们构建交互式的用户界面。Element Plus是Vue的一个组件库,提供了丰富的UI组件和样式。我们可以使用Vue和Element Plus来创建用户界面,如存储系统的文件上、文件下载和文件管理等功能。通过Vue和Element Plus的组合,我们可以快速构建出美观、实用的前端界面。 最后,我们将后端与前端进行集成。可以使用Spring Boot的REST API作为后端服务的接口,通过HTTP协议与前端进行通信。前端通过Vue和Element Plus可以发起请求并接收后端的响应,实现与后端的数据交互和处理。 综上所述,使用Spring Boot、Vue和Element Plus的组合,我们可以打造一个功能强大的分布式存储系统。Spring Boot提供了后端逻辑的开发框架,Vue和Element Plus提供了前端界面的构建工具和UI组件。通过它们的协作,我们可以实现分布式存储系统的数据管理、用户界面和数据交互等功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值