这篇文章主要介绍了springboot实现文件上传步骤解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
第一步编写上传的前段页面
<p> <button type="button" class="btn btn-primary" ng-click="openAddModal()" data-toggle="modal" data-target="#documentOprModal" style="margin-left: 10px;float:left"> 单个文件上传 </button></p> <!-- 点击单个文件上传弹出的模态框 --><p class="modal fade" id="documentOprModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"data-backdrop="static" data-keyboard="false"> <p class="modal-dialog modal-lg" role="document" style="width: 600px;"> <p class="modal-content"> <p 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> </p> <p class="modal-body"> <!--开发--> <form name="docForm" id="docForm"> <p class="form-group"> <label for="jhText">井号：</label> <input type="text" class="form-control" id="jhText" ng-model="document.jh"> </p> <!-- 作者 --> <p class="form-group"> <label for="authorText">作者：</label> <input type="text" class="form-control" id="authorText" ng-model="document.author"> </p> <!-- 单位 --> <p class="form-group"> <label for="unitText">单位：</label> <input type="text" class="form-control" id="unitText" ng-model="document.unit"> </p> <!-- 日期 --> <p class="form-group"> <label for="writeDate">写作日期：</label> <input type="date" class="form-control" id="writeDate" ng-model="document.writeDate"> </p> <!-- 简介 --> <p class="form-group"> <label for="introductionTextArea">简介：</label> <textarea class="form-control" id="introductionTextArea" ng-model="document.introduction" rows="5" cols="60"></textarea> </p> <!-- 可能的查询关键字 --> <p class="form-group"> <label for="keyPackageTextArea">可能的查询关键字:</label> <textarea class="form-control" id="keyPackageTextArea" ng-model="document.keyPackage" rows="5" cols="60"></textarea> </p> <!-- 文件 --> <p class="form-group"> <p id="inputContent"> <input id="importFile" type="file" name="file" class="file-loading"> </p> </p> </form> </p> <p 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> </p> </p> </p></p>
第二步写对应的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", function (event, data, msg) { $scope.$apply(function () { $scope.fileInvalid = false; }); }); return control; } /** * 清空输入框 */ function importClearFunc() { if ($fileInput) $fileInput.fileinput('clear'); $scope.fileInvalid = false; } /** * 文件上传错误 **/ function fileuploaderror(event, data, 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 {@Autowiredprivate 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();//文件的idfEntity.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> map = new HashMap<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;}}}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
本文标题: springboot实现文件上传步骤解析
以上就上有关springboot实现文件上传步骤解析的全部内容，学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。