SpringBoot和Vue.js實作前後端分離的檔案上傳功能-js教程-PHP中文網

SpringBoot和Vue.js實作前後端分離的檔案上傳功能

不言

發布： 2018-06-30 09:47:33

原創

6644 人瀏覽過

這篇文章主要介紹了SpringBoot Vue.js實現前後端分離的文件上傳功能,需要的朋友可以參考下

這篇文章需要一定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")
@CrossOrigin
public 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>
 <p class="hello">
 <h1>{{ msg }}</h1>
 <form>
  <input type="file" @change="getFile($event)">
  <button class="button button-primary button-pill button-small" @click="submit($event)">提交</button>
 </form>
 </p>
</template>
<script>
 import axios from &#39;axios&#39;;
 export default {
 name: &#39;HelloWorld&#39;,
 data() {
  return {
  msg: &#39;Welcome to Your Vue.js App&#39;,
  file: &#39;&#39;
  }
 },
 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(&#39;http://localhost:8082/upload/singlefile&#39;, 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