SpringBoot+Vue.js實現前後端分離的檔案上傳

逗貓攻城獅發表於2018-06-25

原文地址: luoliangDSGA's blog
部落格地址: luoliangdsga.github.io
歡迎轉載，轉載請註明作者及出處，謝謝！

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>
  <div 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>
  </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>
複製程式碼