springboot實現(xiàn)文件上傳步驟解析
更新時間：2019年12月20日 10:32:27 作者：求知若渴的蝸牛
這篇文章主要介紹了springboot實現(xiàn)文件上傳步驟解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
這篇文章主要介紹了springboot實現(xiàn)文件上傳步驟解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
第一步編寫上傳的前段頁面
<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>
<!-- 點擊單個文件上傳彈出的模態(tài)框 -->
<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">
<!--開發(fā)-->
<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，井史數(shù)據(jù)入庫
* @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, //是否顯示預覽區(qū)域
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; // 未執(zhí)行
$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 打開添加模態(tài)框
*/
$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("提示", "請?zhí)畛浔韱?, "info");
console.error("請?zhí)畛浔韱?);
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 創(chuàng)建時間：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()));
//創(chuàng)建文件的對象
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;
}
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了MyBatis?Plus的條件構造器,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
Java synchronized關鍵_動力節(jié)點Java學院整理
在java中，每一個對象有且僅有一個同步鎖。這也意味著，同步鎖是依賴于對象而存在。下面通過本文給大家介紹synchronized原理 及基本規(guī)則，感興趣的朋友一起學習吧2017-05-05
這篇文章主要為大家介紹了Bean實例化之前修改BeanDefinition示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
Java實現(xiàn)在線預覽的示例代碼(openOffice實現(xiàn))
本篇文章主要介紹了Java實現(xiàn)在線預覽的示例代碼(openOffice實現(xiàn))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要為大家介紹了Spring Aware源碼設計示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
Spring Boot 開發(fā)私有即時通信系統(tǒng)（WebSocket）
本文利用Spring Boot作為基礎框架，Spring Security作為安全框架，WebSocket作為通信框架，實現(xiàn)點對點聊天和群聊天2017-04-04
這篇文章主要介紹了SpringBoot之控制器的返回值處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了Java預覽PDF時的文件名稱問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
Java @Value("${xxx}")取properties時中文亂碼的解決
這篇文章主要介紹了Java @Value("${xxx}")取properties時中文亂碼的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
這篇文章主要為大家詳細介紹了Java的分支結構與循環(huán)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02