這篇文章需要一定Vue和SpringBoot的知識，分為兩個項目，一個是前端Vue項目，一個是後端SpringBoot項目。
後端項目搭建
我使用的是SpringBoot1.5.10+JDK8+IDEA 使用IDEA新建一個SpringBoot項目，一直點next即可
項目創建成功後，maven的pom配置如下
<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId> </dependency> <!--加入web模塊--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.39</version> </dependency> </dependencies>
接下來編寫上傳的API接口
@RestController@RequestMapping("/upload")@CrossOriginpublic class UploadController { @Value("${prop.upload-folder}") private String UPLOAD_FOLDER; private Logger logger = LoggerFactory.getLogger(UploadController.class); @PostMapping("/singlefile") public Object singleFileUpload(MultipartFile file) { logger.debug("傳入的文件參數：{}", JSON.toJSONString(file, true)); if (Objects.isNull(file) || file.isEmpty()) { logger.error("文件為空"); return "文件為空，請重新上傳"; } try { byte[] bytes = file.getBytes(); Path path = Paths.get(UPLOAD_FOLDER + file.getOriginalFilename()); //如果沒有files文件夾，則創建if (!Files.isWritable(path)) { Files.createDirectories(Paths.get(UPLOAD_FOLDER)); } //文件寫入指定路徑Files.write(path, bytes); logger.debug("文件寫入成功..."); return "文件上傳成功"; } catch (IOException e) { e.printStackTrace(); return "後端異常..."; } }} CrossOrigin註解：解決跨域問題，因為前後端完全分離，跨域問題在所難免，加上這個註解會讓Controller支持跨域，如果去掉這個註解，前端Ajax請求不會到後端。這只是跨域的一種解決方法，還有其他解決方法這篇文章先不涉及。
MultipartFile：SpringMVC的multipartFile對象，用於接收前端請求傳入的FormData。
PostMapping是Spring4.3以後引入的新註解，是為了簡化HTTP方法的映射，相當於我們常用的@RequestMapping(value = "/xx", method = RequestMethod.POST).
後端至此已經做完了，很簡單。
前端項目搭建
我使用的是Node8+Webpack3+Vue2
本地需要安裝node環境，且安裝Vue-cli，使用Vue-cli生成一個Vue項目。
項目創建成功之後，用WebStorm打開，就可以寫一個簡單的上傳例子了，主要代碼如下：
<template> <div> <h1>{{ msg }}</h1> <form> <input type="file" @change="getFile($event)"> <button @click="submit($event)">提交</button> </form> </div></template><script> import axios from 'axios'; export default { name: 'HelloWorld', data() { return { msg: 'Welcome to Your Vue.js App', file: '' } }, methods: { getFile: function (event) { this.file = event.target.files[0]; console.log(this.file); }, submit: function (event) { //阻止元素發生默認的行為event.preventDefault(); let formData = new FormData(); formData.append("file", this.file); axios.post('http://localhost:8082/upload/singlefile', formData) .then(function (response) { alert(response.data); console.log(response); window.location.reload(); }) .catch(function (error) { alert("上傳失敗"); console.log(error); window.location.reload(); }); } } }</script>使用Axios向後端發送Ajax請求，使用H5的FormData對象封裝圖片數據
測試
啟動服務端，直接運行BootApplication類的main方法，端口8082
啟動前端，端口默認8080，cd到前端目錄下，分別執行：
npm installnpm run dev
啟動成功後訪問localhost:8080
選擇一張圖片上傳，可以看到，上傳成功之後，後端指定目錄下也有了圖片文件
總結
到這裡，一個前後端分離的上傳demo就做完了，本篇文章是一個簡單的demo，只能應對小文件的上傳，後面我將會寫一篇SpringBoot+Vue實現大文件分塊上傳，敬請期待。 附上源碼，歡迎star：boot-upload 。