使用Springboot+Vue实现文件上传和下载功能
更新时间：2024年09月24日 09:26:34 作者：等雨停、
本文介绍了如何使用Springboot结合Vue进行图书信息管理系统开发,包括数据库表的创建,实体类、Dao层、Service层和Controller层的编写,重点讲解了文件上传和下载功能的实现,感兴趣的朋友跟随小编一起看看吧
图书信息管理的增删改查
创建数据库表
CREATE TABLE `book` (
`id` int(10) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '图书名称',
`price` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '图书价格',
`author` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '图书作者',
`press` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '图书出版社',
`img` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '图书封面',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;创建实体类Book.java
@Table(name = "book")
public class Book {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
@Column(name = "name")
private String name;
@Column(name = "price")
private String price;
@Column(name = "author")
private String author;
@Column(name = "press")
private String press;
@Column(name = "img")
private String img;
}BookDao.java BookMapper.xml
import com.example.entity.Book;
import com.example.entity.Params;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
import tk.mybatis.mapper.common.Mapper;
import java.util.List;
@Repository
public interface BookDao extends Mapper<Book> {
List<Book> findBySearch(@Param("params") Params params);
}<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.dao.BookDao">
<select id="findBySearch" resultType="com.example.entity.Book">
select * from book
<where>
<if test="params != null and params.name != null and params.name != ''">
and name like concat('%', #{ params.name }, '%')
</if>
<if test="params != null and params.author != null and params.author != ''">
and author like concat('%', #{ params.author }, '%')
</if>
</where>
</select>
</mapper>BookService.java
import com.example.dao.BookDao;
import com.example.entity.Book;
import com.example.entity.Params;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.List;
@Service
public class BookService {
@Resource
private BookDao bookDao;
public PageInfo<Book> findBySearch(Params params) {
// 开启分页查询
PageHelper.startPage(params.getPageNum(), params.getPageSize());
// 接下来的查询会自动按照当前开启的分页设置来查询
List<Book> list = bookDao.findBySearch(params);
return PageInfo.of(list);
}
public void add(Book book) {
bookDao.insertSelective(book);
}
public void update(Book book) {
bookDao.updateByPrimaryKeySelective(book);
}
public void delete(Integer id) {
bookDao.deleteByPrimaryKey(id);
}
}BookController.java
import com.example.common.Result;
import com.example.entity.Book;
import com.example.entity.Params;
import com.example.service.BookService;
import com.github.pagehelper.PageInfo;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
@CrossOrigin
@RestController
@RequestMapping("/book")
public class BookController {
@Resource
private BookService bookService;
@GetMapping("/search")
public Result findBySearch(Params params) {
PageInfo<Book> info = bookService.findBySearch(params);
return Result.success(info);
}
@PostMapping
public Result save(@RequestBody Book book) {
if (book.getId() == null) {
bookService.add(book);
} else {
bookService.update(book);
}
return Result.success();
}
@DeleteMapping("/{id}")
public Result delete(@PathVariable Integer id) {
bookService.delete(id);
return Result.success();
}
}图书封面文件上传
FileController.java
package com.example.controller;
import cn.hutool.core.io.FileUtil;
import cn.hutool.core.util.StrUtil;
import com.example.common.Result;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletResponse;
import java.io.OutputStream;
import java.net.URLEncoder;
import java.util.List;
/**
* 文件上传接口
*/
@RestController
@RequestMapping("/files")
public class FileController {
// 文件上传存储路径
private static final String filePath = System.getProperty("user.dir") + "/file/";
/**
* 文件上传
*/
@PostMapping("/upload")
public Result upload(MultipartFile file) {
synchronized (FileController.class) {
String flag = System.currentTimeMillis() + "";
String fileName = file.getOriginalFilename();
try {
if (!FileUtil.isDirectory(filePath)) {
FileUtil.mkdir(filePath);
}
// 文件存储形式：时间戳-文件名
FileUtil.writeBytes(file.getBytes(), filePath + flag + "-" + fileName);
System.out.println(fileName + "--上传成功");
Thread.sleep(1L);
} catch (Exception e) {
System.err.println(fileName + "--文件上传失败");
}
return Result.success(flag);
}
}
/**
* 获取文件
*/
@GetMapping("/{flag}")
public void avatarPath(@PathVariable String flag, HttpServletResponse response) {
if (!FileUtil.isDirectory(filePath)) {
FileUtil.mkdir(filePath);
}
OutputStream os;
List<String> fileNames = FileUtil.listFileNames(filePath);
String avatar = fileNames.stream().filter(name -> name.contains(flag)).findAny().orElse("");
try {
if (StrUtil.isNotEmpty(avatar)) {
response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(avatar, "UTF-8"));
response.setContentType("application/octet-stream");
byte[] bytes = FileUtil.readBytes(filePath + avatar);
os = response.getOutputStream();
os.write(bytes);
os.flush();
os.close();
}
} catch (Exception e) {
System.out.println("文件下载失败");
}
}
}上传下载接口不能拦截，需要放行
// 加自定义拦截器JwtInterceptor，设置拦截规则
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(jwtInterceptor).addPathPatterns("/api/**")
.excludePathPatterns("/api/files/**")
.excludePathPatterns("/api/admin/login")
.excludePathPatterns("/api/admin/register");
}BookView.vue
el-upload：Element - The world's most popular Vue UI framework
<el-form-item label="图书封面" label-width="20%"> <el-upload action="http://localhost:8080/api/files/upload" :on-success="successUpload"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> </el-form-item>
successUpload(res) {
this.form.img = res.data;
},图书封面预览、下载
el-image：Element - The world's most popular Vue UI framework
<el-table-column label="图书封面"> <template v-slot="scope"> <el-image style="width: 70px; height: 70px; border-radius: 50%" :src="'http://localhost:8080/api/files/' + scope.row.img" :preview-src-list="['http://localhost:8080/api/files/' + scope.row.img]"> </el-image> </template> </el-table-column> <el-button type="primary" @click="down(scope.row.img)">下载</el-button>
down(flag) {
location.href = 'http://localhost:8080/api/files/' + flag
}到此这篇关于使用Springboot+Vue实现文件上传和下载的文章就介绍到这了,更多相关Springboot Vue文件上传和下载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于使用JAVA命令运行JAR包以及日志输出的相关资料,文中通过代码示例介绍的非常详细,对大家学习或者使用java具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
java8 对象转Map时重复 key Duplicate key xxxx的解决
这篇文章主要介绍了java8 对象转Map时重复 key Duplicate key xxxx的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-09-09
这篇文章主要介绍了Maven的安装配置详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-10-10
使用@Validated和@Valid 解决list校验的问题
这篇文章主要介绍了使用@Validated和@Valid 解决list校验的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-10-10
最近有位细心的朋友在阅读笔者的文章时，对java类的生命周期问题有一些疑惑，笔者打开百度搜了一下相关的问题，看到网上的资料很少有把这个问题讲明白的，主要是因为目前国内java方面的教材大多只是告诉你“怎样做”，但至于“为什么这样做”却不多说2016-01-01
SpringBoot分页的实现与long型id精度丢失问题的解决方案介绍
在以后的开发中，当全局唯一id的生成策略生成很长的Long型数值id之后会超过JS对Long型数据处理的能力范围，可能发生精度丢失而造成后端方法失效，我们要学会解决。分页功能虽然简单但是非常重要，对于刚接触项目的人一定要重点注意2022-10-10
在web项目中，显示数据一般采用分页显示的，在分页的同时，用户可能还有搜索的需求，也就是模糊查询，所以，我们要在dao写一个可以分页并且可以动态加条件查询的方法。接下来通过本文给大家介绍下2017-02-02
这篇文章主要介绍了Java中的final关键字深入理解的相关资料,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了java实现投票程序设计，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-12-12
本篇文章给大家详细分析了Java的static与final关键字知识点以及相关代码分享，有需要的读者跟着学习下吧。2018-03-03
最新评论