這篇文章主要介紹了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;
		}
	}
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。