Vue+SpringBoot实现前后端分离的文件上传

SpringBoot

发布日期: 2018-04-18

文章字数: 968

阅读时长: 4 分

阅读次数:

原文地址: luoliangDSGA’s blog
博客地址: https://luoliangdsga.github.io
欢迎转载，转载请注明作者及出处，谢谢！

Vue+SpringBoot实现前后端分离的文件上传

这篇文章需要一定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 &#123;
    @Value("$&#123;prop.upload-folder&#125;")
    private String UPLOAD_FOLDER;
    private Logger logger = LoggerFactory.getLogger(UploadController.class);

    @PostMapping("/singlefile")
    public Object singleFileUpload(MultipartFile file) &#123;
        logger.debug("传入的文件参数：&#123;&#125;", JSON.toJSONString(file, true));
        if (Objects.isNull(file) || file.isEmpty()) &#123;
            logger.error("文件为空");
            return "文件为空，请重新上传";
        &#125;

        try &#123;
            byte[] bytes = file.getBytes();
            Path path = Paths.get(UPLOAD_FOLDER + file.getOriginalFilename());
            //如果没有files文件夹，则创建
            if (!Files.isWritable(path)) &#123;
                Files.createDirectories(Paths.get(UPLOAD_FOLDER));
            &#125;
            //文件写入指定路径
            Files.write(path, bytes);
            logger.debug("文件写入成功...");
            return "文件上传成功";
        &#125; catch (IOException e) &#123;
            e.printStackTrace();
            return "后端异常...";
        &#125;
    &#125;
&#125;

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>&#123;&#123; msg &#125;&#125;</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 &#123;
    name: 'HelloWorld',
    data() &#123;
      return &#123;
        msg: 'Welcome to Your Vue.js App',
        file: ''
      &#125;
    &#125;,
    methods: &#123;
      getFile: function (event) &#123;
        this.file = event.target.files[0];
        console.log(this.file);
      &#125;,
      submit: function (event) &#123;
        //阻止元素发生默认的行为
        event.preventDefault();
        let formData = new FormData();
        formData.append("file", this.file);
        axios.post('http://localhost:8082/upload/singlefile', formData)
          .then(function (response) &#123;
            alert(response.data);
            console.log(response);
            window.location.reload();
          &#125;)
          .catch(function (error) &#123;
            alert("上传失败");
            console.log(error);
            window.location.reload();
          &#125;);
      &#125;
    &#125;
  &#125;
</script>