技術標籤：springbootaxiosvuevue.jshtmljavascript

總體流程：

用input 輸入框選擇檔案，選擇之後拿到選中的檔案通過axios呼叫介面，把檔案當作請求引數傳送給後端，後端拿到之後存到本地。

前端部分：

1：前端怎麼拿到圖片、文件等檔案？

答：還記不記得當時學h5時有一個input表單？<input type="file">用這個就可以
就是這個：

選擇檔案之後會觸發onchange事件，然後在觸發事件呼叫的函式裡面用js獲取即可。
vue程式碼：

<template>
    <div>
        <
 
input id="input" type="file" @change="fileUpload()">
    </div>
</template>

<script>
export default {
    methods: {
        fileUpload () {
            var file = document.getElementById("input").files[0];  //因為檔案可能有多個，這裡獲得的是個檔案陣列，選擇第一個檔案的話後面加個[
 
0]即可
             console.log(files);
        }
    },
}
</script>

2：拿到之後怎麼傳給後端呢？

答：

  			var params = new FormData();
            params.append('file', file)
            console.log(params.get("file"));
          	axios({
                url: "http://localhost:9090/api/image/",
                method: "post"
 
,
                data: params,
                headers: { 'Content-Type': 'multipart/form-data' }
            })

你可能會想了，為什麼不直接傳給後端，而是先裝到FormData裡面？axios請求時為什麼要在請求引數裡面加入 headers: { 'Content-Type': 'multipart/form-data' }？
答：平常資料介面傳參用json，傳檔案用formdata。用formdata傳檔案的話要把Content-Type:改為multipart/form-data。

貼張一我查的資料：

解決完這兩個疑惑我們前端檔案上傳程式碼就完成了：

<template>
    <div>
        <h4>檔案上傳測試</h4>
        <input id="input" type="file" @change="fileUpload()">
    </div>
</template>

<script>
export default {
    methods: {
        fileUpload () {
            var files = document.getElementById("input").files;
            var params = new FormData();
            params.append('file', files[0])
            console.log(params.get("file"));
            this.$axios({
                url: "http://localhost:9090/api/image/",
                method: "post",
                data: params,
                headers: { 'Content-Type': 'multipart/form-data' }
            })
        }
    },
}
</script>

<style  scoped>
</style>

頁面內容：

後端部分：

後端比較簡單，這裡就直接貼程式碼吧：

 @PostMapping("/")
    public void getBlogger(@RequestParam("file") MultipartFile file){
        try {
            file.transferTo(new java.io.File("G:\\Desktop\\檔案上傳測試地址\\"+file.getOriginalFilename()));
        } catch (IOException e) {
            e.printStackTrace();
        }
       System.out.println("已上傳");
    }

接收檔案：

接收檔案和接收普通引數一樣，都是用@RequestParam註解接收，引數型別為MultipartFile 。

存到本地：

接收到檔案之後封裝成為MultipartFile的物件中，MultipartFile類裡面有獲得檔名、獲得檔案型別、獲得檔案大小、判斷是否為空等各種方法。

想要存到本地也很簡單，一行程式碼即可實現：

 file.transferTo(new java.io.File("path"+file.getOriginalFilename()));