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>

<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项目。