java從前臺到後臺上傳文件流程,親測可用

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();
    }
}

噹噹噹!至此解決!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章