Springboot實現文件的下載與上傳
最近一段時間要學習一下springboot爲後臺的文件上傳也下載,前端部分我使用uniapp來寫
一.springboot後臺部分
注意Java文件類以抽象的方式代表文件名和目錄路徑名。該類主要用於文件和目錄的創建、文件的查找和文件的刪除等。File對象代表磁盤中實際存在的文件和目錄 點此學習JAVA文件類
- controller實現上傳單個文件(主要看註解)
@RequestMapping("/file")
@RestController
public class FileController {
/**
* 上傳單個文件
* @param file
* @return
*/
@PostMapping("/upload")
public String uploadFile(@RequestParam("file")MultipartFile file){
if(file.isEmpty()){ //若文件選擇爲空,就上傳失敗
return "上傳失敗,請選擇文件!";
}
String fileName=file.getOriginalFilename();//獲取文件上傳的文件名
String filePath = "E:/fileSource"; //指定到上傳的文件路徑
File dir = new File(filePath);
if (!dir.exists()) { //若路徑不存在,則創建一個這樣的文件夾
dir.mkdir();
}
try {
File file1 = new File(filePath, fileName); //創建了一個File對象，名字是file1 ，路徑是filePath，名字是fileName。
//然後就可以調用這個對象的相關方法完成文件創建，刪除，讀取，寫入等操作
file.transferTo(file1); //將上傳的文件寫入創建好的文件中
return ("上傳成功!文件路徑爲:"+filePath+"/"+fileName);
} catch (IOException e) {
e.printStackTrace();
}
return "上傳失敗!";
}
}
- 實現多個文件的上傳(主要看註解),未進行測試
- 我這裏返回了一個通用類CommonReturnType ,直接往裏面注入object就可
/**
* 多文件上傳
* @param request
* @return
*/
@PostMapping("/uploadFiles")
public CommonReturnType uploadFiles(HttpServletRequest request){
List successUploadFiles=new ArrayList(); //返回上傳成功的文件名list給前端
List<MultipartFile> files = ((MultipartHttpServletRequest) request).getFiles("file"); //創建一個list接受前端發送的文件
String filePath = "E:/fileSource"; //指定上傳的路徑
File dir = new File(filePath);
if (!dir.exists()) { //若創建文件不存在則創建文件夾
dir.mkdir();
}
for (MultipartFile m:files) { //用foreach處理list列表中的file
if (m.isEmpty()) { //若某個文件爲空則上傳失敗
return CommonReturnType.creat("上傳文件名爲:"+m.getOriginalFilename()+"失敗!");
}
String fileName = m.getOriginalFilename();//獲取某個上傳文件的文件名
File dest = new File(filePath + "/"+fileName);
try {
m.transferTo(dest); //寫入文件流
successUploadFiles.add(m.getOriginalFilename()); //增加到返回文件list中
} catch (IOException e) {
e.printStackTrace();
}
}
return CommonReturnType.creat(successUploadFiles);//返回list
}
- 配置文件上傳的大小
application.properties配置文件添加：
# 上傳文件總的最大值
spring.servlet.multipart.max-request-size=10000MB
# 單個文件的最大值
spring.servlet.multipart.max-file-size=10000MB
二.uniapp前端部分
這裏用了uniapp來寫前端部分
- 調用了uniapp組件處理選擇文件
- 調用函數實現單個文件或多個文件的上傳
<template>
<view class="content">
<button @click="upload">上傳</button>
</view>
</template>
<script>
export default {
data() {
return {
text:"11",
fileDatas:''
}
},
methods: {
upload:function(){
var that=this
uni.chooseImage({
success: function (chooseImageRes) {
const tempFilePaths = chooseImageRes.tempFilePaths; //這裏用數組保存選擇的單個或多個文件
for (var i = 0; i < tempFilePaths.length; i++) {
uni.uploadFile({ //循環調用上傳單個文件的接口,實現多文件上傳
url: 'http://127.0.0.1:8093/file/upload', //僅爲示例，非真實的接口地址
filePath: tempFilePaths[i],
name: 'file',
success: function (uploadFileRes) {
console.log(uploadFileRes);
}
});
}
},fail:function(chooseImageRes){
console.log("用戶取消上傳文件")
}
});
},
serachFiles:function(){
console.log("all datas")
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
- 用了for循環,調用單文件上傳的接口來處理多文件上傳,即選擇多個文件後,保存到數組中,for每次上傳第i個文件,簡單的實現多文件上傳~~
- uniapp跨域問題未解決,剛上手,會的大佬教我一手~
製作不易,轉載請標註~~
