小编给大家分享一下SpringBoot+Vue.js怎么实现前后端分离的文件上传功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
在修水等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供网站制作、成都网站设计 网站设计制作按需定制制作,公司网站建设,企业网站建设,成都品牌网站建设,成都营销网站建设,外贸网站制作,修水网站建设费用合理。
为什么要使用Vue
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。
后端项目搭建
我使用的是SpringBoot1.5.10+JDK8+IDEA 使用IDEA新建一个SpringBoot项目，一直点next即可
项目创建成功后，maven的pom配置如下
org.springframework.boot
spring-boot-starter
org.springframework.boot
spring-boot-starter-web
org.springframework.boot
spring-boot-starter-test
test
com.alibaba
fastjson
1.2.39
接下来编写上传的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打开，就可以写一个简单的上传例子了，主要代码如下：
{{ msg }}
以上是“SpringBoot+Vue.js怎么实现前后端分离的文件上传功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
