Spring Boot + Vue 前后端分离,两种文件上传方式总结

return RespBean.ok(“上传成功!”);

}

这里的文件上传比较简单,上传的文件按照日期进行归类,使用 UUID 给文件重命名。

这里为了简化代码,我省略掉了异常捕获,上传结果直接返回成功,后端代码大伙可根据自己的实际情况自行修改。

Ajax 上传

==================================================================

在 Vue 中,通过 Ajax 实现文件上传,方案和传统 Ajax 实现文件上传基本上是一致的,唯一不同的是查找元素的方式。

<el-button @click=“importData” type=“success” size=“mini” icon=“el-icon-upload2”>导入数据

在这里,首先提供一个文件导入 input 组件,再来一个导入按钮,在导入按钮的事件中来完成导入的逻辑。

importData() {

let myfile = this.$refs.myfile;

let files = myfile.files;

let file = files[0];

var formData = new FormData();

formData.append(“file”, file);

this.uploadFileRequest(“/system/basic/jl/import”,formData).then(resp=>{

if (resp) {

console.log(resp);

}

})

}

关于这段上传核心逻辑,解释如下:

  1. 首先利用 Vue 中的 $refs 查找到存放文件的元素。

  2. type 为 file 的 input 元

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Spring BootVue.js是两个非常流行的技术,可以用于实现前后端分离的歌单应用。 首先,Spring Boot是一个用于快速开发Java应用程序的框架,它提供了一种简化的方式来构建独立的、生产级别的Spring应用程序。它具有自动配置和约定优于配置的特性,可以帮助开发者快速搭建后端服务。 Vue.js是一个用于构建用户界面的渐进式JavaScript框架,它专注于视图层,可以与任何后端技术结合使用。Vue.js具有简单易学、灵活高效的特点,可以帮助开发者构建交互性强、响应式的前端应用。 在前后端分离的歌单应用中,可以将Spring Boot作为后端提供RESTful API接口,处理歌单的增删改查等操作。而Vue.js作为前端框架,负责展示歌单列表、歌曲详情、用户登录等页面。 具体实现步骤如下: 1. 后端开发:使用Spring Boot搭建后端服务,包括定义实体类、编写控制器、服务层和数据访问层等。 2. 前端开发:使用Vue.js创建前端项目,包括设计页面布局、编写组件、处理用户交互等。 3. 前后端通信:通过RESTful API接口实现前后端数据传输和交互,可以使用Axios等工具库进行网络请求。 4. 数据库操作:使用Spring Data JPA或者MyBatis等框架进行数据库的增删改查操作,存储歌单信息。 5. 用户认证:可以使用Spring Security等安全框架实现用户登录、注册和权限控制等功能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值