SpringBoot + Vue.js怎么实现前后端分离的文件上传功能

　　介绍

小编给大家分享一下SpringBoot + Vue。js怎么实现前后端分离的文件上传功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

为什么要使用Vue

Vue是一款友好的,多用途且高性能的JavaScript框架,使用Vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用Vue。

<强>后端项目搭建

我使用的是SpringBoot1.5.10 + JDK8 +想法使用新概念建一个SpringBoot项目,一直点下即可

项目创建成功后,maven的pom配置如下

& lt; dependencies> 　　& lt;才能dependency> 　　,,& lt; groupId> org.springframework.boot 　　,,& lt; artifactId> spring-boot-starter 　　& lt;才能/dependency> 　　& lt;才能!——加入网络模块——比; 　　& lt;才能dependency> 　　,,& lt; groupId> org.springframework.boot 　　,,& lt; artifactId> spring-boot-starter-web 　　& lt;才能/dependency> 　　& lt;才能dependency> 　　,,& lt; groupId> org.springframework.boot 　　,,& lt; artifactId> spring-boot-starter-test 　　,,& lt; scope> test 　　& lt;才能/dependency> 　　& lt;才能dependency> 　　,,& lt; groupId> com.alibaba 　　,,& lt; artifactId> fastjson 　　,,& lt; version> 1.2.39 　　& lt;才能/dependency> 　　,& lt;/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 文件),{ 　　logger.debug才能(“传入的文件参数:{},,,JSON.toJSONString(文件,,真的)); 　　if 才能;(Objects.isNull(文件),| |,file.isEmpty ()), { 　　,,logger.error(“文件为空“); 　　,,return “文件为空,请重新上传“; 　　,,} 　　try {才能 　　,,byte [], bytes =, file.getBytes (); 　　,,Path  Path =, Paths.get(时间+ UPLOAD_FOLDER  file.getOriginalFilename ()); 　　,,//如果没有文件文件夹,则创建 　　,,if  (! Files.isWritable(路径)),{ 　　,,,Files.createDirectories (Paths.get (UPLOAD_FOLDER)); 　　,,} 　　,,//文件写入指定路径 　　,,Files.write(路径,字节); 　　,,logger.debug(“文件写入成功…“); 　　,,return “文件上传成功“; 　　,,},catch  (IOException  e), { 　　,,e.printStackTrace (); 　　,,return “后端异常…“; 　　,,} 　　,} 　　}

CrossOrigin注解:解决跨域问题,因为前后端完全分离,跨域问题在所难免,加上这个注解会让控制器支持跨域,如果去掉这个注解,前端Ajax请求不会到后端。这只是跨域的一种解决方法,还有其他解决方法这篇文章先不涉及。
MultipartFile: SpringMVC的MultipartFile对象,用于接收前端请求传入的FormData。

PostMapping是Spring4.3以后引入的新注解,是为了简化HTTP方法的映射,相当于我们常用的@RequestMapping (value=https://www.yisu.com/zixun/?xx”,方法=RequestMethod.POST)。

后端至此已经做完了,很简单。

<强>前端项目搭建

我使用的是Node8 + Webpack3 + Vue2

本地需要安装节点环境,且安装Vue-cli,使用Vue-cli生成一个Vue项目。

SpringBoot + Vue.js怎么实现前后端分离的文件上传功能”>,</p> <p>项目创建成功之后,用WebStorm打开,就可以写一个简单的上传例子了,主要代码如下:</p> <pre类= & lt; template> 　　,& lt; div 类=癶ello"比; 　　,& lt; h2> {{, msg }} & lt;/h2> 　　,& lt; form> 　　& lt;才能input 类型=癴ile", @change=癵etFile(事件),在 　　& lt;才能button 类=癰utton  button-primary  button-pill  button-small", @click=疤峤?事件)美元“祝辞提交& lt;/button> 　　,& lt;/form> 　　,& lt;/div> 　　& lt;/template> 　　& lt; script> 　　,import  axios 得到& # 39;axios& # 39;; 　　,export  default  { 　　,名字:& # 39;helloworld # 39; 　　,数据(){ 　　return {才能 　　,,味精:& # 39;Welcome 用Your  Vue.js 应用# 39; 　　,,文件:& # 39;& # 39; 　　,,} 　　}, 　　,方法:{ 　　,,getFile: function (事件),{ 　　时间=this.file 才能;event.target.files [0]; 　　console.log才能(this.file); 　　,,}, 　　提交:才能,function (事件),{//才能阻止元素发生默认的行为 　　event.preventDefault才能(); 　　let 才能;formData =, new  FormData (); 　　formData.append才能(“file",, this.file); 　　axios.post才能(& # 39;http://localhost: 8082/上传/singlefile& # 39;,, formData) 　　,,不要犹豫(function (反应),{ 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

SpringBoot + Vue.js怎么实现前后端分离的文件上传功能