我们在之前已经做好了我们的登录和注册，以及能通过登录然后进入到我们项目的某一个界面，我们之前做的演示就是拿的我们的用户来进行我们的增删改查功能。
那么我们在写项目的功能的时候，有时候会用到我们通过上传文件来进行某些功能，比如我们通过上传用户信息表来做到我们的批量导入用户信息，那么我们现在就来实现这一功能。
1. md5简介
md5的全称是md5信息摘要算法（英文：MD5 Message-Digest Algorithm ），一种被广泛使用的密码散列函数，可以产生一个128位（16字节，1字节8位）的散列值（常见的是用32位的16进制表示，比如：0caa3b23b8da53f9e4e041d95dc8fa2c），用于确保信息传输的完整一致。
2. md5原理
md5将整个文件当做一个大文本信息，通过不可逆的字符串变换算法，产生一个唯一的MD5信息摘要。文件的md5类似于人的指纹，在世界上是独立无二的，如果任何人对文件做了任何改动，其md5的值也就是对应的“数字指纹”都会发生变化。
对MD5算法简要的叙述可以为：MD5以512位分组来处理输入的信息，且每一分组又被划分为16个32位子分组，经过了一系列的处理后，算法的输出由四个32位分组组成，将这四个32位分组级联后将生成一个128位散列值。
md5与对称和非对称加密算法不同，这两种密码是防止信息被窃取，而摘要算法的目标是用于证明原文的完整性。
3. md5特性
(1).不可逆
没有系统有办法知道md5原来的文字是什么。
(2).具有高度的离散性
md5码具有高度的散列性，没有规律可循，哪怕原信息只有一点点的变化，比如多个空格，那么就会导致md5发生巨大变化，也可以说产生的md5码是不可预测的。
(3).压缩性
任意长度的数据，算出的md5值得长度都是固定的。
(4).弱碰撞性
已知原数据和其md5的值，想找到一个具有相同md5值得数据（即伪造数据）是非常困难的。
4. md5的用途
我们要实现我们用户数据的批量导入，我们需要在我们的数据库里面新建一个表，用来存放我们上传的表格以及其他的文件，也可以用来存放我们的图片。
存放文件的SQL：file
CREATE TABLE `file` (
`id` int NOT NULL AUTO_INCREMENT COMMENT 'ID',
`name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '文件名称',
`type` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '文件类型',
`size` bigint DEFAULT NULL COMMENT '文件大小(kb)',
`url` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '下载链接',
`md5` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '文件md5',
`creat_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '时间',
`is_delete` tinyint(1) DEFAULT '0' COMMENT '是否删除',
PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=158 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;1.新建我们的Files.Java
我们要在我们的后台进行类的书写，以及一定的方法。
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
@Data
@TableName("file")
public class Files {
@TableId(type = IdType.AUTO)
private Integer id;
private String name;
private String type;
private Long size;
private String url;
private String md5;
private Boolean isDelete;
}2.基础配置
设置我们的上传到磁盘的文件存放的路径，虽然我们存放的数据是在数据库，但是当我们在使用的时候，我们要去进行一定的审视，即我们需要将我们文件存放的磁盘地址进行一定的注明。
此还需要在我们的基础配置里面进行配置
3.文件上传
然后就是我们进行文件上传的接口了，我们需要在上传的时候给我们的文件定义一个唯一标识码，为的是当我们上传多个统一的文件，我们只显示一个文件，就大大的减少了我们的数据。然后我们将我们的文件上传到磁盘的某一个位置上去，并且获取我们这个文件的MD5，如果上传的文件出现重复，就删除多余的，就只显示一个文件，最后就设置我们文件的大小，类型以及我们的路径和md5唯一标识，将以上信息存放到我们的数据库里面。
4.文件下载
我们进行文件下载的时候，我们需要根据文件的唯一标识码获取文件，获取到我们的文件之后，需要设置我们文件的输出格式，然后读取字节流进行放行和文件关闭。
5.文件查询
我们需要通过遍历我们的files表来识别我们文件的md5唯一标识码，最后通过这个唯一标识码来进行我们文件的查询。
6.缓存
7.源码
import cn.hutool.core.io.FileUtil;
import cn.hutool.core.util.IdUtil;
import cn.hutool.core.util.StrUtil;
import cn.hutool.crypto.SecureUtil;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.demo.common.Constants;
import com.example.demo.common.Result;
import com.example.demo.entity.Files;
import com.example.demo.mapper.FileMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.annotation.Resource;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.net.URLEncoder;
import java.util.List;
@RestController
@RequestMapping("/file")
public class FileController {
@Value("${files.upload.path}")
private String fileUploadPath;
@Value("${server.ip}")
private String serverIp;
@Resource
private FileMapper fileMapper;
@Autowired
private StringRedisTemplate stringRedisTemplate;
@PostMapping("/upload")
public String upload(@RequestParam MultipartFile file) throws IOException {
String originalFilename = file.getOriginalFilename();
String type = FileUtil.extName(originalFilename);
long size = file.getSize();
// 定义一个文件唯一的标识码
String fileUUID = IdUtil.fastSimpleUUID() + StrUtil.DOT + type;
File uploadFile = new File(fileUploadPath + fileUUID);
// 判断配置的文件目录是否存在，若不存在则创建一个新的文件目录
File parentFile = uploadFile.getParentFile();
//判断目录是否存在，不存在就新建
if (!parentFile.exists()) {
parentFile.mkdirs();
}
String url;
// 获取文件的md5
String md5 = SecureUtil.md5(file.getInputStream());
// 从数据库查询是否存在相同的记录
Files dbFiles = getFileByMd5(md5);
if (dbFiles != null) {
url = dbFiles.getUrl();
} else {
// 上传文件到磁盘
file.transferTo(uploadFile);
// 数据库若不存在重复文件，则不删除刚才上传的文件
url = "http://" + serverIp + ":9090/file/" + fileUUID;
}
//存储到数据库
Files saveFile = new Files();
saveFile.setName(originalFilename);
saveFile.setType(type);
saveFile.setSize(size/1024);
saveFile.setUrl(url);
saveFile.setMd5(md5);
fileMapper.insert(saveFile);
return url;
}
@GetMapping("/{fileUUID}")
public void download(@PathVariable String fileUUID, HttpServletResponse response) throws IOException {
// 根据文件的唯一标识码获取文件
File uploadFile = new File(fileUploadPath + fileUUID);
// 设置输出流的格式
ServletOutputStream os = response.getOutputStream();
response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileUUID, "UTF-8"));
response.setContentType("application/octet-stream");
// 读取文件的字节流
os.write(FileUtil.readBytes(uploadFile));
os.flush();
os.close();
}
/**
* 通过文件的md5查询文件
* @param md5
* @return
*/
private Files getFileByMd5(String md5) {
// 查询文件的md5是否存在
QueryWrapper<Files> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("md5", md5);
List<Files> filesList = fileMapper.selectList(queryWrapper);
return filesList.size() == 0 ? null : filesList.get(0);
}
// @CachePut(value = "files", key = "'frontAll'")
@PostMapping("/update")
public Result update(@RequestBody Files files) {
fileMapper.updateById(files);
flushRedis(Constants.FILES_KEY);
return Result.success();
}
@GetMapping("/detail/{id}")
public Result getById(@PathVariable Integer id) {
return Result.success(fileMapper.selectById(id));
}
//清除一条缓存，key为要清空的数据
// @CacheEvict(value="files",key="'frontAll'")
@DeleteMapping("/{id}")
public Result delete(@PathVariable Integer id) {
Files files = fileMapper.selectById(id);
files.setIsDelete(true);
fileMapper.updateById(files);
flushRedis(Constants.FILES_KEY);
return Result.success();
}
@PostMapping("/del/batch")
public Result deleteBatch(@RequestBody List<Integer> ids) {
// select * from sys_file where id in (id,id,id...)
QueryWrapper<Files> queryWrapper = new QueryWrapper<>();
queryWrapper.in("id", ids);
List<Files> files = fileMapper.selectList(queryWrapper);
for (Files file : files) {
file.setIsDelete(true);
fileMapper.updateById(file);
}
return Result.success();
}
/**
* 分页查询接口
* @param pageNum
* @param pageSize
* @param name
* @return
*/
@GetMapping("/page")
public Result findPage(@RequestParam Integer pageNum,
@RequestParam Integer pageSize,
@RequestParam(defaultValue = "") String name) {
QueryWrapper<Files> queryWrapper = new QueryWrapper<>();
// 查询未删除的记录
queryWrapper.eq("is_delete", false);
queryWrapper.orderByDesc("id");
if (!"".equals(name)) {
queryWrapper.like("name", name);
}
return Result.success(fileMapper.selectPage(new Page<>(pageNum, pageSize), queryWrapper));
}
// 设置缓存
private void setCache(String key, String value) {
stringRedisTemplate.opsForValue().set(key, value);
}
// 删除缓存
private void flushRedis(String key) {
stringRedisTemplate.delete(key);
}
}
我们做的是我们的用户数据的批量导入和用户信息表导出，也就是我们的上传功能和导出功能，那么我们就需要在我们用户的Controller里面去写我们的接口出来，然后提供给前端进行调用。
源码：
/**
* 导出接口
*/
@GetMapping("/export")
public void export(HttpServletResponse response) throws Exception {
//从数据库查询出所有的数据
List<User> list = userService.list();
//通过工具类创建writer 写出到磁盘路径
//ExcelWriter writer = ExcelUtil.getWriter(filesUploadPath + "/用户信息.xlsx");
//在内存操作，写出到浏览器
ExcelWriter writer = ExcelUtil.getWriter(true);
//自定义标题别名
writer.addHeaderAlias("username", "用户名");
writer.addHeaderAlias("password", "密码");
writer.addHeaderAlias("nickname", "昵称");
writer.addHeaderAlias("sex", "性别");
writer.addHeaderAlias("phone", "联系方式");
writer.addHeaderAlias("address", "地址");
writer.addHeaderAlias("email", "邮箱");
writer.addHeaderAlias("createTime", "创建时间");
writer.addHeaderAlias("avatarUrl", "头像");
writer.addHeaderAlias("role", "身份");
//一次性写出list类的对象到excel，使用默认样式，强制输出标题
writer.write(list, true);
response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");
String fileName = URLEncoder.encode("用户详情","UTF-8");
response.setHeader("Content-Disposition", "attachment;filename=" + fileName +".xlsx");
ServletOutputStream out = response.getOutputStream();
writer.flush(out, true);
out.close();
writer.close();
}
/**
* excel导入
* @param
* @throws Exception
*/
@PostMapping("/import")
public Result imp(MultipartFile file) throws Exception {
InputStream inputStream = file.getInputStream();
ExcelReader reader = ExcelUtil.getReader(inputStream);
//通过JavaBean的方式读取Excel内的对象，但要求表头必须是英文，跟JavaBean的属性要对应
List<User> list = reader.readAll(User.class);
userService.saveBatch(list);
return Result.success(true);
}1.分析
我们需要实现的是我们的导入和导出功能，那么我们就需要去调用我们的接口进行功能实现
我们直接来调用我们的组件实现我们的上传功能 
2.实现
<el-upload action="http://localhost:9090/user/import" :show-file-list="false" accept=".xlsx"
:on-success="handleExcelImportSuccess" style="display: inline-block">
<el-button type="primary" class="ml-5"><i class="el-icon-upload" />导入</el-button>
</el-upload>
<el-button type="primary" class="ml-5" @click="exp"><i class="el-icon-download" />导出</el-button>我们给我们的这个导入和导出分别写上一个方法，用来实现我们的功能，我们的导入是直接写在我们的组件之上，而我们的导出是进行方法命名，打开我们的路径，来实现我们数据的导出。
methods: {
// 用户信息文件导出
exp() {
window.open("http://localhost:9090/user/export")
},
// 文件导入成功
handleExcelImportSuccess() {
this.$message.success("文件导入成功")
this.load()
},
}七、功能展示
导入
导出
以上就是对从0开始写Vue项目-Vue实现用户数据批量上传和数据导出简单的概述，后面会陆续更新其他的代码，请持续关注！！！
如果这篇文章有帮助到你，希望可以给作者点个赞