SpringBoot+Vue.js怎么實(shí)現(xiàn)前后端分離的文件上傳功能

小編給大家分享一下SpringBoot+Vue.js怎么實(shí)現(xiàn)前后端分離的文件上傳功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

后端項(xiàng)目搭建

我使用的是SpringBoot1.5.10+JDK8+IDEA 使用IDEA新建一個(gè)SpringBoot項(xiàng)目，一直點(diǎn)next即可

項(xiàng)目創(chuàng)建成功后，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("傳入的文件參數(shù)：{}", JSON.toJSONString(file, true));
  if (Objects.isNull(file) || file.isEmpty()) {
   logger.error("文件為空");
   return "文件為空，請(qǐng)重新上傳";
  }
  try {
   byte[] bytes = file.getBytes();
   Path path = Paths.get(UPLOAD_FOLDER + file.getOriginalFilename());
   //如果沒有files文件夾，則創(chuàng)建
   if (!Files.isWritable(path)) {
    Files.createDirectories(Paths.get(UPLOAD_FOLDER));
   }
   //文件寫入指定路徑
   Files.write(path, bytes);
   logger.debug("文件寫入成功...");
   return "文件上傳成功";
  } catch (IOException e) {
   e.printStackTrace();
   return "后端異常...";
  }
 }
}

CrossOrigin注解：解決跨域問題，因?yàn)榍昂蠖送耆蛛x，跨域問題在所難免，加上這個(gè)注解會(huì)讓Controller支持跨域，如果去掉這個(gè)注解，前端Ajax請(qǐng)求不會(huì)到后端。這只是跨域的一種解決方法，還有其他解決方法這篇文章先不涉及。
MultipartFile：SpringMVC的multipartFile對(duì)象，用于接收前端請(qǐng)求傳入的FormData。

PostMapping是Spring4.3以后引入的新注解，是為了簡(jiǎn)化HTTP方法的映射，相當(dāng)于我們常用的@RequestMapping(value = "/xx", method = RequestMethod.POST).

后端至此已經(jīng)做完了，很簡(jiǎn)單。

前端項(xiàng)目搭建

我使用的是Node8+Webpack3+Vue2

本地需要安裝node環(huán)境，且安裝Vue-cli，使用Vue-cli生成一個(gè)Vue項(xiàng)目。

項(xiàng)目創(chuàng)建成功之后，用WebStorm打開，就可以寫一個(gè)簡(jiǎn)單的上傳例子了，主要代碼如下：

<template>
 <div class="hello">
 <h2>{{ msg }}</h2>
 <form>
  <input type="file" @change="getFile($event)">
  <button class="button button-primary button-pill button-small" @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) {
  //阻止元素發(fā)生默認(rèn)的行為
  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向后端發(fā)送Ajax請(qǐng)求，使用H5的FormData對(duì)象封裝圖片數(shù)據(jù)

測(cè)試

啟動(dòng)服務(wù)端，直接運(yùn)行BootApplication類的main方法，端口8082

啟動(dòng)前端，端口默認(rèn)8080，cd到前端目錄下，分別執(zhí)行：

npm install
npm run dev

啟動(dòng)成功后訪問localhost:8080

選擇一張圖片上傳，可以看到，上傳成功之后，后端指定目錄下也有了圖片文件

以上是“SpringBoot+Vue.js怎么實(shí)現(xiàn)前后端分離的文件上傳功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！