springboot實現檔案上傳步驟解析
阿新 • • 發佈:2020-01-07
這篇文章主要介紹了springboot實現檔案上傳步驟解析,文中通過示例程式碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
第一步編寫上傳的前段頁面
<div> <button type="button" class="btn btn-primary" ng-click="openAddModal()" data-toggle="modal" data-target="#documentOprModal" style="margin-left: 10px;float:left"> 單個檔案上傳 </button> </div> <!-- 點選單個檔案上傳彈出的模態框 --> <div class="modal fade" id="documentOprModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-lg" role="document" style="width: 600px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel"> 文件入庫</h4> </div> <div class="modal-body"> <!--開發--> <form name="docForm" id="docForm"> <div class="form-group"> <label for="jhText">井號:</label> <input type="text" class="form-control" id="jhText" ng-model="document.jh"> </div> <!-- 作者 --> <div class="form-group"> <label for="authorText">作者:</label> <input type="text" class="form-control" id="authorText" ng-model="document.author"> </div> <!-- 單位 --> <div class="form-group"> <label for="unitText">單位:</label> <input type="text" class="form-control" id="unitText" ng-model="document.unit"> </div> <!-- 日期 --> <div class="form-group"> <label for="writeDate">寫作日期:</label> <input type="date" class="form-control" id="writeDate" ng-model="document.writeDate"> </div> <!-- 簡介 --> <div class="form-group"> <label for="introductionTextArea">簡介:</label> <textarea class="form-control" id="introductionTextArea" ng-model="document.introduction" rows="5" cols="60"></textarea> </div> <!-- 可能的查詢關鍵字 --> <div class="form-group"> <label for="keyPackageTextArea">可能的查詢關鍵字:</label> <textarea class="form-control" id="keyPackageTextArea" ng-model="document.keyPackage" rows="5" cols="60"></textarea> </div> <!-- 檔案 --> <div class="form-group"> <div id="inputContent"> <input id="importFile" type="file" name="file" class="file-loading"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" ng-click="submitFileInfo()"> <i class="fa fa-check"></i>儲存 </button> <button type="button" class="btn btn-default" data-dismiss="modal" style="margin: 0px 20px;"> <i class="fa fa-ban"></i>取消 </button> </div> </div> </div> </div>
第二步寫對應的js頁面
/** * @Name:historyStorageCtrl,井史資料入庫 * @Date:2019-06-19 * @Author:huofenwei */ (function (angular) { 'use strict'; angular.module('Lujing').controller('historyStorageCtrl',['$scope','$http','ToastService','$compile','$timeout','HttpService','$filter',function ($scope,$http,ToastService,$compile,$timeout,HttpService,$filter) { $scope.fileInvalid = false; var $fileInput = initFileInput("importFile",'/server/search/upload'); /** *初始化檔案上傳 */ function initFileInput(ctrlName,uploadUrl) { var control = $('#' + ctrlName); control.fileinput({ language: 'zh',uploadUrl: uploadUrl,//上傳的地址 allowedFileExtensions: ['doc','docx','xls','xlsx','ppt','pptx','pdf','mp4','avi','wmv','asf','asx','rm','rmvb','3gp','mov','m4v','dat','mkv','flv','vob'],showUpload: true,//是否顯示上傳按鈕 showCaption: true,//是否顯示標題 showPreview: false,//是否顯示預覽區域 browseClass: "btn btn-primary",//按鈕樣式 previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",}).on('fileuploaderror',fileuploaderror).on("fileuploaded",function (event,data,previewId,index) { // console.log(data);.on('fileselect',fileselect) $scope.$apply(function () { $scope.fileId = data.response.fileId; // 未執行 $scope.document.fileName = data.files[0].name; }); }).on("filecleared",msg) { $scope.$apply(function () { $scope.fileInvalid = false; }); }); return control; } /** * 清空輸入框 */ function importClearFunc() { if ($fileInput) $fileInput.fileinput('clear'); $scope.fileInvalid = false; } /** * 檔案上傳錯誤 **/ function fileuploaderror(event,msg) { $scope.fileInvalid = true; $scope.$apply(); $('.modal-body .kv-upload-progress').css('display','none'); if (!(data.jqXHR.responseJSON)) { //檔案型別驗證錯誤 $('#fileError').html(msg); } else { //上傳錯誤 console.log(data); var statusCode = data.jqXHR.responseJSON.message; var errorMsg = HTTP_ERROR_MAP['' + statusCode]; $('#fileError').html(errorMsg); } } /** * add 開啟新增模態框 */ $scope.openAddModal = function () { $scope.document = {}; $scope.document.classificationId = 1; $scope.document.starGrade = 5; $timeout(importClearFunc); // openModeldialog(); }; /** * 表單驗證 * @returns {boolean} */ function formVlidate() { if (!$scope.document.introduction) { return false; } if (!$scope.document.keyPackage) { return false; } return true; } /** * 提交表單資訊 */ $scope.submitFileInfo = function () { if (!$scope.fileId) { // ToastService.alert("提示","先上傳檔案,再提交表單","info"); console.error("先上傳檔案,再提交表單"); return; } if (!formVlidate()) { // ToastService.alert("提示","請填充表單","info"); console.error("請填充表單"); return; } $scope.params = { 'introduction': $scope.document.introduction,//簡介 'keyPackage': $scope.document.keyPackage,//可能查詢的關鍵字 'starGrade': $scope.document.starGrade,//星級 'classificationId': $scope.document.classificationId,//檔案的id 'filePath': $scope.fileId,//檔案的路徑 'docName': $scope.document.fileName,//檔案的名字 'author':$scope.document.author,'unit':$scope.document.unit,'writeDate':$scope.document.writeDate?$scope.document.writeDate.format("yyyy-MM-dd hh:mm:ss"):$scope.document.writeDate,'jh': $scope.document.jh,'id': $scope.document.id }; HttpService.post("/server/search/submit",$scope.params).then(function (data) { $('#documentOprModal').modal('hide'); // $("#contTable").bootstrapTable('refresh'); console.error("提交檔案資訊成功"); },function (response) { // ToastService.alert("提示","提交檔案資訊出錯","warning"); console.error("提交檔案資訊出錯"); }); } } ]) })(angular);
第三部編寫後臺上傳檔案和提交表單的程式碼
package com.shiwen.yitihui.server.controller; import java.io.File; import java.util.Date; import java.util.HashMap; import java.util.Map; import java.util.UUID; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; import com.shiwen.yitihui.common.Snowflake; import com.shiwen.yitihui.domain.DocClassification; import com.shiwen.yitihui.domain.DocType; import com.shiwen.yitihui.domain.DocumentFile; import com.shiwen.yitihui.domain.FileEntity; import com.shiwen.yitihui.server.service.DocumentFileService; /** * @author wangjie: * @version 建立時間:2019年8月26日 上午11:54:22 * @Description 類描述: */ @RestController @RequestMapping("/search") public class UploadFileController { @Autowired private DocumentFileService dfservice; private String uploadPath="E://file"; /** * 上傳檔案 * @param file * @return */ @PostMapping("/upload") public Map<String,Object> uploadFile(MultipartFile file){ Map<String,Object> map = new HashMap<String,Object>(); try { //檔案的物件 FileEntity fEntity = new FileEntity(); String uuid = UUID.randomUUID().toString(); //檔案的id fEntity.setId(uuid.replaceAll("-",""));//String.valueOf(Snowflake.getNextKey())); //檔案的名字 fEntity.setFileName(file.getOriginalFilename()); //上傳檔案的時間 fEntity.setUploadTime(new Date()); //上傳者 fEntity.setUploadBy("admin"); //檔案的字尾 String suffix = fEntity.getFileName().substring(fEntity.getFileName().indexOf(".")); //檔案存放的完整路徑 fEntity.setFinePathName(uploadPath + File.separator + fEntity.getId() + suffix); //檔案的型別 fEntity.setDocType(new DocType()); //設定檔案的型別 fEntity.getDocType().setId(getDocTypeId(fEntity.getFileName())); //建立檔案的物件 File newFile = new File(fEntity.getFinePathName()); //上傳檔案 file.transferTo(newFile); map.put("result","success"); map.put("fileId",fEntity.getId()); }catch(Exception e) { // e.printStackTrace(); map.put("result","fail"); } return map; } /** * 提交表單 * @param df * @return */ @PostMapping("/submit") public Map<String,Object> submitFileInfo(@RequestBody DocumentFile df) { Map<String,Object>(); try { if (df.getId() == null || df.getId().isEmpty() || df.getId() == "") { df.setId(String.valueOf(Snowflake.getNextKey())); } String suffix = df.getDocName().substring(df.getDocName().indexOf(".")); df.setFilePath(uploadPath + File.separator + df.getFilePath() + suffix); df.setUploadBy("admin");// 使用者名稱稱 df.setUploadTime(new java.util.Date()); df.setUploadTime(new Date()); df.setDownloadNumber(0L); df.setHeat(0L); df.setRelated(20); df.setDocType(new DocType()); df.getDocType().setId(getDocTypeId(suffix)); df.setClassification(new DocClassification()); df.getClassification().setId(df.getClassificationId()); dfservice.save(df); map.put("result","success"); } catch (Exception e) { //e.printStackTrace(); map.put("result","fail"); } return map; } private Integer getDocTypeId(String fileName) { if (fileName.contains(".doc")) { return 1; } else if (fileName.contains(".xls")) { return 2; } else if (fileName.contains(".pdf")) { return 3; } else if (fileName.contains(".ppt")) { return 4; }else { return 5; } } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。