SpringBoot+Vue.js實現先後端分離的文件上傳

時間 2019-11-24

標籤 springboot+vue.js springboot vue 實現後端分離文件上傳欄目 Spring 简体版

原文原文鏈接

原文地址: luoliangDSGA's blog
博客地址: luoliangdsga.github.io
歡迎轉載，轉載請註明做者及出處，謝謝！javascript

SpringBoot+Vue.js實現先後端分離的文件上傳

這篇文章須要必定Vue和SpringBoot的知識，分爲兩個項目，一個是前端Vue項目，一個是後端SpringBoot項目。html

後端項目搭建

我使用的是SpringBoot1.5.10+JDK8+IDEA 使用IDEA新建一個SpringBoot項目，一直點next便可前端

項目建立成功後，maven的pom配置以下java

<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接口node

@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+Vue2ios

本地須要安裝node環境，且安裝Vue-cli，使用Vue-cli生成一個Vue項目。git

項目建立成功以後，用WebStorm打開，就能夠寫一個簡單的上傳例子了，主要代碼以下：github

<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>
複製代碼