Springboot ：
1、編寫application.properties配置文件
#thymeleaf
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/ // 配置視圖解析器前綴路徑
spring.thymeleaf.check-template-location=true
spring.thymeleaf.suffix=.html // 配置視圖解析器后綴
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.mode=HTML5
#修改tomcat post提交時的文件大小限制
spring.servlet.multipart.enabled=true
spring.servlet.multipart.max-file-size=300MB // 配置上傳文件大小和請求文件最大
spring.servlet.multipart.max-request-size=215MB
#配置文件上傳路徑
File.UpliadFilePath=C:\\UploadFiles\\ // 服務器文件保存路徑
2、配置文件對應的實體類，后面配置文件中的參數信息獲取直接從該類屬性而來
package com.tsht.suma.config;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;
@Component
public class FileConfig {
@Value("${File.UpliadFilePath}")
public String UpliadFilePath;
public String getUpliadFilePath() {
return UpliadFilePath;
}
public void setUpliadFilePath(String upliadFilePath) {
UpliadFilePath = upliadFilePath;
}
}
// 為多文件上傳
3、編寫Controller
@Controller
public class UploadController {
@Autowired
FileConfig fileConfig;
@RequestMapping("/multiUpload")
@ResponseBody
public String multiUpload(HttpServletRequest request,HttpServletResponse response){
List<String> lists = new ArrayList<>();
// 從配置文件中獲取上傳到服務器的路徑
String filePath = fileConfig.getUpliadFilePath();
//System.out.println(filePath);
MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest)request;
MultiValueMap<String,MultipartFile> multiValueMap = multipartHttpServletRequest.getMultiFileMap();
for(MultiValueMap.Entry<String,List<MultipartFile>> entry: multiValueMap.entrySet()){
List<MultipartFile> multipartFiles = entry.getValue();
for(MultipartFile multipartFile:multipartFiles){
String filename = multipartFile.getOriginalFilename();
try {
multipartFile.transferTo(new File(filePath + filename));
lists.add(filePath + filename);
System.out.println("上傳成功");
}catch (IOException e){
System.out.println(e.getMessage());
}
}
}
return "";
}
Vue + elementUI:
4、index.heml
引入下載在本地的樣式文件和js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Springboot文件上傳</title>
<link rel="stylesheet" href="element\css\index.css"/>
<link rel="stylesheet" href="element\css\element.css"/>
<script type="text/javascript" src="vue\vue.min.js"></script>
<script type="text/javascript" src="element\js\index.js"></script>
<script type="text/javascript" src="element\js\element.js"></script>
</head>
<body>
<div id="app" v-cloak>
<el-tabs :tab-position="tabPosition" class="tabs">
<el-tab-pane label="文件上傳">
<el-container class="main">
<div class="upload">
<template>
<!-- 采用elementUI的文件上傳組件，選擇本地文件后自動上傳，並顯示上傳進度和文件List -->
<el-upload class="upload-demo"
ref="upload"
name="uploadFile"
action="/multiUpload"
:multiple ="true"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-change="handleChange"
:file-list="fileList"
:auto-upload="true"
:show-file-list="true">
<el-button class="selectBtn" slot="trigger" size="small" round >選取本地文件</el-button>
<!--用自定義的文件夾上傳按鈕來代替自帶的文件上傳按鈕-->
<el-button id="upload" style="margin-left: 10px;display: none" size="small" type="success" @click="submitUpload()">上傳到服務器</el-button>
<div slot="tip" v-show="fileList.length>0" class="el-upload__tip">文件列表</div>
</el-upload>
</template>
</div>
</el-container>
</el-tab-pane>
</div>
</body>
<script>
var Files = [];
var vue = new Vue({
el: '#app',
data: {
fileList: Files
},
methods:{
indexMethod: indexMethod,
selectFiles:selectFiles,
submitUpload:submitUpload,
handleRemove:handleRemove,
handlePreview:handlePreview,
handleChange:handleChange
},
created: function () {
}
});
function handleChange(file, fileList) {
Files = fileList;
}
//移除文件時
function handleRemove(file, fileList) {
console.log(file, fileList);
}
//添加文件時
function handlePreview(file) {
console.log(file);
}
function submitUpload(){
}
}
</script>