springboot中怎么實現文件上傳

springboot中怎么實現文件上傳，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

第一步編寫上傳的前段頁面

<p>  <button type="button" class="btn btn-primary" ng-click="openAddModal()" data-toggle="modal"    data-target="#documentOprModal" >    單個文件上傳  </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" >    <p class="modal-content">      <p class="modal-header">        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span            aria-hidden="true">&times;</span></button>        <h5 class="modal-title" id="myModalLabel"> 文檔入庫</h5>      </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" >          <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中怎么實現文件上傳問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。