java實現文件夾上傳功能實例代碼(SpringBoot框架)
前言
有時我們後臺管理等服務可能會有這樣一個簡單需求,就是根據文件夾將整個文件夾下的所有資源都上傳到我們的服務器上,本人也是搜索瞭大量資料,最終以最簡單便捷的方式實現該功能,具體操作步驟如下
一、前端如何設置上傳組件並將資源上傳到後臺服務
這裡的項目框架為若依VUE版本,下面將核心的代碼抽離出來進行代碼示例,方便大傢快速閱讀
1)首先我們需要新建一個用來提交文件夾的form表單
1.添加一個 type=file 的 input 提交組件,添加 webkitdirectory 標識來使用文件夾上傳功能
2.添加 @change=“uploadSoundCodeFolder” 事件,當我們上傳瞭文件夾後將觸發 uploadSoundCodeFolder() 函數來處理上傳邏輯
<form id="uploadSoundCodeFolderForm" style="display: none" method="post" enctype="multipart/form-data"> <input id="fileFolder" name="fileFolder" type="file" @change="uploadSoundCodeFolder" webkitdirectory> </form>
uploadSoundCodeFolder() 實現邏輯如下
uploadSoundCodeFolder(e){ this.uploadSoundCodeLoading = true; //獲取到選中的文件夾內的所有文件 //files 為一個集合 //可通過遍歷 files 的方式獲取到每個文件的大小等數據,來實現大小限制等需求 let files = e.target.files; //中間省略大小限制等需求...... //獲取表單數據 let formData = new FormData(document.getElementById("uploadSoundCodeFolderForm")); //調用後臺服務方法來提交該表單數據 uploadSoundCode(formData).then((res)=>{ _this.$message.success("上傳成功") //上傳成功後清空表單數據 $("#fileFolder").val(''); }) }
2)然後我們添加自己框架內的一些按鈕來觸發該隱藏的表單
這樣做的好處是使用瞭form文件夾上傳的功能,卻不用使用他的UI
<!-- 首先創建一個按鈕用來觸發上傳事件 uploadSoundCodeBtn() --> <el-button v-loading="uploadSoundCodeLoading" @click="uploadSoundCodeBtn"> 上傳文件夾 </el-button>
/*上傳事件觸發的方法*/ uploadSoundCodeBtn(){ $("#fileFolder").click(); },
二、後臺如何接收處理文件夾表單數據
這裡我們使用 List fileFolde 類型來接受前端發來的文件集合,fileFolde為表單裡面的 name
@RequestMapping(value="/uploadSoundCode",method= RequestMethod.POST) public AjaxResult uploadSoundCode(List<MultipartFile> fileFolde) throws IOException { String soundCodeUrl = HereUtil.uploadSoundCode(fileFolder); return AjaxResult.success(soundCodeUrl); }
然後根據業務將文件保存到服務器就行瞭
public static String uploadSoundCode(List<MultipartFile> files) throws IOException { for (MultipartFile file : files) { String fileName = file.getOriginalFilename(); if (StrUtil.isBlank(fileName)){ continue; } //上傳後的URL全路徑 String fullFilePath = "上傳的跟路徑" + fileName; FileUtil.writeFromStream(file.getInputStream(), fullFilePath); } return ""; }
總結
到此這篇關於java實現文件夾上傳功能的文章就介紹到這瞭,更多相關springBoot實現文件夾上傳內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 使用AJAX實現上傳文件
- elementUI自定義上傳文件功能實現(前端後端超詳細過程)
- 解析element-ui中upload組件傳遞文件及其他參數的問題
- Java實現文件上傳保存
- Vue使用formData格式類型上傳文件的示例