SpringBoot系列——附件管理:整合業務表單實現上傳、回顯、下載
- 2021 年 9 月 17 日
- 筆記
- springboot
前言
日常開發中,大多數項目都會涉及到附件上傳、回顯、下載等功能,本文記錄封裝通用附件管理模組,並與業務模組進行整合實現上傳、回顯、下載
我們之前已經對文件上傳下載有過記錄,傳送門:基於「formData批量上傳的多種實現」 的多圖片預覽、上傳的多種實現、formData批量上傳的多種實現、自定義input文件上傳樣式,這裡也是基於之前的寫一個完整例子
技術棧:layui + thymeleaf + springboot
程式碼編寫
項目結構
前端
定義模板
腳本
後端
Vo類
Controller
測試效果
test.html頁面有兩個測試表單,分別整合附件管理模組,需要引入在線jq、layui依賴,再引入我們的附件管理css、js腳本
上傳
//表單提交 function submit1() { //調用自己的保存業務 let testFormData = $("#testForm1").serializeObject(); console.log(testFormData); //上傳附件 Attachment.upload("123456"); }
上傳的文件在AttachmentVo的files數組中
回顯可編輯
//表單回顯(可編輯) function showForm1() { //回顯基礎數據 $("#testForm1").form({username:"張三",age:18}); //回顯附件 Attachment.showDndEditAttachments("123456"); }
重新編輯時,刪掉的附件在AttachmentVo的deletes數組中,新上傳的附件在files數組中
回顯不可編輯
//表單回顯(不可編輯) function showForm2() { //回顯基礎數據 $("#testForm2").form({username:"李四",age:81}); //禁用表單、以及隱藏按鈕 $("#testForm2 input").prop("disabled", true); $("#button21").remove(); $("#button22").remove(); //回顯附件 Attachment.showDndDownloadAttachments("7890"); }
不可編輯的回顯中,可以進行下載附件操作
下載
後記
不同的業務表單再也不用自己維護附件,直接引入我們通用的附件管理模組,快速實現功能、風格統一
程式碼開源
程式碼已經開源、託管到我的GitHub、碼云:
GitHub://github.com/huanzi-qch/springBoot
碼云://gitee.com/huanzi-qch/springBoot