java從前端到後端上傳大文件流程,親測可用
1、前期準備
java框架:servelet原生框架或者spring boot框架,其他框架我沒測,不知道效果,但應該都可以。此文以spring boot爲例。其運行在tomcat下。
前端:普普通通html+jquery即可
服務器:上傳的目標文件夾必須具有可讀可寫權限
2、開始幹活——首先我們解決後端的問題
爲了簡便,我把所有代碼都寫到一個文件裏面了,都在controller裏面,具體看代碼:
@RequestMapping("/uploadFile")
public int uploadFile(@RequestParam("uploadFile") MultipartFile file){
//1、判斷文件是否爲空
if(file.isEmpty()){
return null;
}
//2、存儲的時候添上時間,防止文件名重複
Date date = new Date();
SimpleDateFormat dateFormat= new SimpleDateFormat("yyyyMMddhhmmss");
String fileName = dateFormat.format(date) + "_" + file.getOriginalFilename();
//文件實際存儲地址,以linux系統爲標杆
String filePath = "/javaweb/tomcat/apache-tomcat-8.5.41/webapps/resources/";
//可供下載的鏈接地址,將ip替換爲你自己的ip即可,resources文件夾的位置很重要,不同的位置,可供下載的鏈接地址也就不一樣。,可參考文件實際存儲地址來設。
String fileLink = "http://0.0.0.0:8080/resources/" + fileName;
File dest = new File(filePath + fileName);
try {
file.transferTo(dest);
}catch (IOException e){
e.printStackTrace();
return "500";
}
return "200"
}
3、然後我們解決前端問題
html我們採用input標籤,指定file類型來瀏覽上傳文件,通過accept屬性來限制上傳的文件類型。
html部分:
<div>
<input type="file" accept=".ppt, .pptx, .txt" id="myFile">
<button onclick="upload()">點擊上傳</button>
</div>
javascript最重要的就是採用了FormData()來作爲承載數據的小船,帶我們穿越茫茫大海通向遠方的港口。
對應的javascript部分:
function upload() {
var formData = new FormData();
formData.append("uploadFile",$("#myFile")[0].files[0]);
//還可以按照如下方式添加其他數據
//formData.append("projectID",projectID);
//formData.append("reportType",type);
$.ajax({
type:"post",
url:"此處填寫剛纔controller的請求地址",
data:formData,
dataType:"json",
async:false,
processData : false, // 使數據不做處理
contentType : false, // 不要設置Content-Type請求頭
success:function(data){
// 成功拿到結果放到這個函數 data就是拿到的結果
console.log(data);
if(data == "200"){
alert("上傳報告成功!");
}else{
alert("上傳失敗");
}
},
})
}
4、解決文件上傳大小限制
此時,恭喜你,你已經可以上傳文件啦!但很遺憾的是,此時的上傳文件是有大小限制的,超過1MB還是2MB的時候就上傳失敗,爲什麼呢?是因爲spring還是tomcat做了文件限制(其實我忘了,但反正就是他倆其中一個),我們想完成大文件的上傳,就必須更改下配置。下面,跟我來一起翻越這座高山。
(1)首先我們更改配置文件——application.properties
在配置文件下,添加如下語句:
#配置文件傳輸
spring.servlet.multipart.enabled =true
spring.servlet.multipart.file-size-threshold =0
#單個數據的大小
multipart.max-file-size = 100Mb
#總數據的大小
multipart.max-request-size=100Mb
(2)然後我們更改spring boot啓動類
什麼?你不知道啓動類是哪個?那我可幫不了你了,多看看spring boot基礎吧。
廢話不多少,直接上代碼。
首先,我們給啓動類添加一個註解@Configuration
然後,在啓動類裏面添加一個@Bean方法,配置上傳文件大小
代碼如下:
@Configuration
@SpringBootApplication
public class ApiApplication {
public static void main(String[] args) {
SpringApplication.run(ApiApplication.class, args);
}
/**
* 配置上傳文件大小的配置
* @return
*/
@Bean
public MultipartConfigElement multipartConfigElement() {
MultipartConfigFactory factory = new MultipartConfigFactory();
// 單個數據大小
factory.setMaxFileSize("100MB");
/// 總上傳數據大小
factory.setMaxRequestSize("100MB");
return factory.createMultipartConfig();
}
}