SpringBoot系列——附件管理:整合業務表單實現上傳、回顯、下載
阿新 • • 發佈:2021-09-17
前言
日常開發中,大多數專案都會涉及到附件上傳、回顯、下載等功能,本文記錄封裝通用附件管理模組,並與業務模組進行整合實現上傳、回顯、下載
我們之前已經對檔案上傳下載有過記錄,傳送門:基於“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:https://github.com/huanzi-qch/springBoot
碼雲:https://gitee.com/huanzi-qch/springBoot
版權宣告
作者:huanzi-qch 出處:https://www.cnblogs.com/huanzi-qch 若標題中有“轉載”字樣,則本文版權歸原作者所有。若無轉載字樣,本文版權歸作者所有,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出原文連結,否則保留追究法律責任的權利.AD廣告位(長期招租,如有需要請私信)
阿里雲伺服器(ECS)等,高效能伺服器,就選阿里雲虛機+伺服器,獨享虛機服務 1c1g 3M頻寬
雲伺服器,企業級雲伺服器特惠5折
全民雲端計算,1核1G僅需293元/年
雲伺服器,低至323元/年
雲伺服器,十倍效能提升,最佳價效比
捐獻、打賞
請注意:作者五行缺錢,如果喜歡這篇文章,請隨意打賞!支付寶
微信
QQ群交流群
QQ群交流群有事請加群,有問題進群大家一起交流!