SpringBoot和Vue.js实现前后端分离的文件上传功能-JS 튜토리얼-php.cn

这篇文章主要介绍了SpringBoot+Vue.js实现前后端分离的文件上传功能,需要的朋友可以参考下

这篇文章需要一定Vue和SpringBoot的知识，分为两个项目，一个是前端Vue项目，一个是后端SpringBoot项目。

后端项目搭建

我使用的是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项目。