layui+SpringBoot上传文件，分页列表，下载、搜索一站式

能够帮到你们的话，就给我留个言，给我一点信心记录更多有用的东西

成品页面

pom.xml

<!--Fastdfs 分布式文件系统FDFS--> <dependency> <groupId>com.github.tobato</groupId> <artifactId>fastdfs-client</artifactId> <version>1.26.1-RELEASE</version> </dependency> <!--excel工具--> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>4.0.1</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>4.0.1</version> </dependency>

html页面

<!--附件上传--> <div class="layui-tab-item"> <div class="layui-row"> <form class="layui-form layui-col-md12 x-so"> <div class="layui-input-inline"> <input type="text" value="" id="fileName" placeholder="附件名称" class="layui-input"> </div> <a class="layui-btn search_btn"><i class="layui-icon">&#xe615;</i></a> <button type="button" class="layui-btn layui-btn-sm" id="fileUpload"><i class="layui-icon"></i>上传文件 </button> </form> </div> <table class="layui-table" id="hjTable" lay-filter="hjFilter"></table> <div class="page" id="pageDiv"></div> </div> <!-- 工具栏模板 --> <div class="tool_template" type="text/html" id="toolBar"> <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="download">下载</a> </div>

js

var busId = parent.pkId; fileTableIns = table.render({ //设置表头 cols: [[ {type: 'numbers', title: '序号', fixed: 'left'}, { field: 'fileName', title: '附件名称', align: 'center', minWidth: 180, templet: '<div>{{d.fileName==""?"-":d.fileName}}</div>' }, { field: 'fileSize', title: '附件大小', minWidth: 180, align: 'center', templet: '<div>{{(d.fileSize / 1024).toFixed(1)}}kb</div>' }, {field: 'opt', title: '操作', fixed: 'right', width: 260, align: 'center', toolbar: '#toolBar'} ]], url: "back/hj/queryListPage", contentType: 'application/json',//加此参数传参方式为 json method: 'POST', where: { //设定异步数据接口的额外参数，任意设 condition: { "busId": busId, "fileName": $("#fileName").val() } }, request: { pageName: 'current', //页码的参数名称，默认：page limitName: 'size' //每页数据量的参数名，默认：limit }, response: { statusCode: 200, //成功的状态码，默认：0 msgName: 'message' //状态信息的字段名称，默认：msg }, elem: '#hjTable', page: { elem: 'pageDiv', limit: 10, } }); //监听行单击事件（双击事件为：rowDouble） table.on('row(hjFilter)', function (obj) { //标注选中样式 // obj.tr.addClass('layui-bg-green').siblings().removeClass('layui-bg-green'); obj.tr.addClass('layui-bg-light-green').siblings().removeClass('layui-bg-light-green'); // console.log(obj.tr) //得到当前行元素对象 // console.log(obj.data) //得到当前行数据 //obj.del(); //删除当前行 //obj.update(fields) //修改当前行数据 }); //监听工具条 table.on('tool(hjFilter)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值" var data = obj.data; var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值） if (layEvent === 'download') { //下载 layer.confirm('您确定要下载 ' + data.fileName + ' 吗？', {icon: 3, title: '下载提示'}, function () { index = top.layer.msg('文件加载中，请稍候', {icon: 16, time: false, shade: 0.8}); window.location.href = requestLink + "back/hj/download?id=" + data.id; layer.closeAll('dialog'); top.layer.close(index); }); } }); //查询 $(".search_btn").click(function () { fileTableIns.reload({ where: { //设定异步数据接口的额外参数，任意设 condition: { "busId": busId, "fileName": $("#fileName").val() } }, page: { curr: 1 //重新从第 1 页开始 } }); }); //文件上传 upload.render({ elem: '#fileUpload', size: 1024 * 50, url: 'back/hj/uploading?busId=' + busId, accept: 'file',//普通文件 exts: 'docx|docm|dotx|dotm|xlsx|xlsm|xltx|xltm|xlsb|xlam|pptx|pptm|ppsx|ppsx|potx|potm|ppam|pdf|PNG|JPEG|JPG|GIF', before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。 index = top.layer.msg('文件上传中，请稍候', {icon: 16, time: false, shade: 0.8}); }, progress: function (n, elem) {//文件上传进度的回调 var percent = n + '%' //获取进度百分比 // element.progress('demo', percent); //可配合 layui 进度条元素使用 //以下系 layui 2.5.6 新增 // console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。 console.log(percent); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。 }, done: function (res) { top.layer.close(index); if (res.code == "200") { layer.msg('上传成功', {icon: 1}); fileTableIns.reload({page: {curr: 1}}); } else { layer.msg(res.message, {icon: 2}); } }, error: function (index, upload) { top.layer.close(index); layer.msg("系统异常", {icon: 2}); } });

后台控制器

package com.soa.ump.server.controllerBack; import com.soa.common.core.constant.Constant; import com.soa.common.core.constant.SysConstant; import com.soa.common.core.model.PageModel; import com.soa.common.web.model.ResultModel; import com.soa.common.web.util.ResultUtil; import com.soa.common.web.util.ReturnUtilServer; import com.soa.ump.server.message.CommonFileUtil; import io.swagger.annotations.Api; import io.swagger.annotations.ApiImplicitParam; import io.swagger.annotations.ApiImplicitParams; import io.swagger.annotations.ApiOperation; import org.apache.poi.util.IOUtils; import org.springframework.web.bind.annotation.*; import com.soa.common.web.BaseController; import com.soa.bus.model.HjAccessory; import com.soa.bus.rpc.api.IHjAccessoryService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.*; import java.util.Arrays; import java.util.Map; /** * <p> * 文件表前端控制器 * </p> * * @author Xing * @since 2020-06-15 */ @RestController @RequestMapping("/back/hj") @Api(value = "HjController", description = "附件上传下载管理Api") public class HjController extends BaseController { @Autowired private CommonFileUtil commonFileUtil; private static final String PREFIXED = "http://192.168.1.1/";//上传IP地址 @ApiOperation(value = "上传附件", notes = "上传附件") @ApiImplicitParams({ @ApiImplicitParam(name = "busId", value = "业务Id", dataType = "String", required = true, paramType = "query"), }) @PostMapping(value = "/uploading") public Map<String, Object> saveTfAttachment(@RequestParam("file") MultipartFile attachmentFile, Long busId) { try { long size = attachmentFile.getSize(); if (size > (1024 * 1024 * 50)) { return returnUtil.returnMess(Constant.OPERATION_FAILURE, "无法上传，单文件最大可上传50MB"); } String attachmentOriginalName = attachmentFile.getOriginalFilename();//文件源名 System.out.println("文件大小:" + attachmentFile.getSize()); System.out.println("文件源名:" + attachmentOriginalName); System.out.println("type:" + busType); //FastDFS上传 String filePath = this.commonFileUtil.uploadFile(attachmentFile); //新增附件信息 执行新增方法 Hj accessory = this.service.add(new HjAccessory(busId, attachmentOriginalName, filePath, PREFIXED, size, super.getCurrentUserId())); if (accessory != null) { return returnUtil.returnMess(accessory.getId()); } else { return returnUtil.returnMess(Constant.OPERATION_FAILURE); } } catch (Exception e) { e.printStackTrace(); return returnUtil.returnMess(Constant.DATA_ERROR); } } /** * 附件下载 * * @param id 文件ID * @param request * @param response * @return void * @author Xing * @date 2020-05-10 */ @GetMapping("/download") public void getDownload(Long id, HttpServletRequest request, HttpServletResponse response) { HjAccessory entity = service.selectById(id); try { String headerKey = "Content-Disposition"; String filename = new String(entity.getFileName().getBytes(), "ISO-8859-1"); String headerValue = String.format("attachment; filename=" + filename); /*String fullPath = entity.getFilePath() + entity.getFileNName();//得到文件路径 File downloadFile = new File(fullPath); ServletContext context = request.getServletContext(); String mimeType = context.getMimeType(fullPath); if (mimeType == null) { mimeType = "application/octet-stream"; } response.setContentType(mimeType); response.setContentLength((int) downloadFile.length());*/ response.setHeader(headerKey, headerValue); byte[] download = this.commonFileUtil.download(entity.getFilePath()); InputStream myStream = new ByteArrayInputStream(download); IOUtils.copy(myStream, response.getOutputStream()); response.flushBuffer(); } catch (IOException e) { e.printStackTrace(); } }

工具类

package com.soa.ump.server.message; import com.github.tobato.fastdfs.domain.MateData; import com.github.tobato.fastdfs.domain.StorePath; import com.github.tobato.fastdfs.exception.FdfsUnsupportStorePathException; import com.github.tobato.fastdfs.proto.storage.DownloadByteArray; import com.github.tobato.fastdfs.proto.storage.DownloadFileWriter; import com.github.tobato.fastdfs.service.FastFileStorageClient; import com.soa.common.tools.StringUtil; import org.apache.commons.io.FilenameUtils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletResponse; import java.io.*; import java.nio.charset.Charset; import java.util.Set; /** * FastFDS文件上传工具类 * * @author Xing * @date 2020-06-01 */ @Component public class CommonFileUtil { @Autowired private FastFileStorageClient fastFileStorageClient; // private static final String PREFIXED = "http://47.96.226.188"; /** * MultipartFile类型的文件上传ַ * * @param file * @return * @throws IOException */ public String uploadFile(MultipartFile file) throws IOException { StorePath storePath = fastFileStorageClient.uploadFile(file.getInputStream(), file.getSize(), FilenameUtils.getExtension(file.getOriginalFilename()), null); return getResAccessUrl(storePath); } /** * 普通的文件上传 * * @param file * @return * @throws IOException */ public String uploadFile(File file) throws IOException { FileInputStream inputStream = new FileInputStream(file); StorePath path = fastFileStorageClient.uploadFile(inputStream, file.length(), FilenameUtils.getExtension(file.getName()), null); return getResAccessUrl(path); } /** * 带输入流形式的文件上传 * * @param is * @param size * @param fileName * @return */ public String uploadFileStream(InputStream is, long size, String fileName) { StorePath path = fastFileStorageClient.uploadFile(is, size, fileName, null); return getResAccessUrl(path); } /** * 将一段文本文件写到fastdfs的服务器上 * * @param content * @param fileExtension * @return */ public String uploadFile(String content, String fileExtension) { byte[] buff = content.getBytes(Charset.forName("UTF-8")); ByteArrayInputStream stream = new ByteArrayInputStream(buff); StorePath path = fastFileStorageClient.uploadFile(stream, buff.length, fileExtension, null); return getResAccessUrl(path); } /** * 返回文件上传成功后的地址名称ַ * * @param storePath * @return */ private String getResAccessUrl(StorePath storePath) { return storePath.getGroup() + "/" + storePath.getPath(); } /** * 删除文件 * * @param filePath */ public void deleteFile(String filePath) { if (StringUtil.isEmpty(filePath)) { return; } try { String group = filePath.substring(0, filePath.indexOf("/")); String path = filePath.substring(filePath.indexOf("/") + 1); StorePath storePath = new StorePath(group, path); fastFileStorageClient.deleteFile(storePath.getGroup(), storePath.getPath()); } catch (FdfsUnsupportStorePathException e) { System.out.println("error" + e.getMessage()); } } /** * 文件下载 * * @param filePath * @return byte[] * @author Xing * @date 2020-06-01 */ public byte[] download(String filePath) { String group = filePath.substring(0, filePath.indexOf("/")); String path = filePath.substring(filePath.indexOf("/") + 1); DownloadByteArray downloadByteArray = new DownloadByteArray(); byte[] bytes = this.fastFileStorageClient.downloadFile(group, path, downloadByteArray); return bytes; } }