前言

　　日常開發中，大多數專案都會涉及到附件上傳、回顯、下載等功能，本文記錄封裝通用附件管理模組，並與業務模組進行整合實現上傳、回顯、下載

　　我們之前已經對檔案上傳下載有過記錄，傳送門：基於“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