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

这篇文章需要一定某视频剪辑软件和回弹的知识，分为两个项目，一个是前端某视频剪辑软件项目，一个是后端回弹项目。

后端项目搭建

我使用的是回弹1.5.10 JDK8 IDEA使用想法新建一个回弹项目，一直点然后即可

项目创建成功后马文的砰的一声配置如下

依赖关系依赖关系groupIdorg.springframework.boot/groupId artifactId spring-boot-starter/artifactId/dependency！-加入网模块-相关性groupIdorg.springframework.boot/groupId人工智能春季-启动-启动-网络/人工智能/依赖相关性groupIdorg.springframework.boot/groupId artifactId spring-boot-starter-test/artifactId作用域测试/作用域/依赖项相关性groupIdcom.alibaba/groupId artifactIdfastjson/artifactId版本1。2 .39/版本/依赖项/依赖项接下来编写上传的应用程序接口接口

@ rest controller @请求映射('/UPLOAD ')@ crossorigininput公共类上传控制器{ @ Value($ { prop。UPLOAD-FOLDER } ')私有字符串上传文件夹私有记录器记录器=记录器工厂。getlogger(uploadcontroller。类)；@后期映射("/单个文件")公共对象singleFileUpload(多部分文件文件){ logger.debug('传入的文件参数：{} '，JSON.toJSONString(file，true))；if(objects。为空(文件)| |文件。isempty()){ logger。错误(“”文件为空');"返回"文件为空，请重新上传；}请尝试{ byte[]bytes=file。getbytes()；路径路径=路径。get(UPLOAD _ FOLDER)文件。getoriginalfilename())；//如果没有文件文件夹，则创建if(！Files.isWritable(路径)){文件。createdirectory(路径。get(UPLOAD _ FOLDER))；} //文件写入指定路径Files.write(路径，字节);logger.debug('文件写入成功.');"返回"文件上传成功；} catch(IOexception e){ e . print stack trace()；"返回"后端异常.'；} }}CrossOrigin注解：解决跨域问题，因为前后端完全分离，跨域问题在所难免，加上这个注解会让控制器支持跨域，如果去掉这个注解，前端埃阿斯请求不会到后端。这只是跨域的一种解决方法，还有其他解决方法这篇文章先不涉及多部分文件：SpringMVC的多部分文件对象，用于接收前端请求传入的表单数据。

邮政映射是Spring4.3以后引入的新注解，是为了简化超文本传送协议方法的映射，相当于我们常用的@RequestMapping(值='/xx '，方法=RequestMethod .开机自检)。

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

前端项目搭建

我使用的是Node8 Webpack3 Vue2

本地需要安装结节环境，且安装Vue-cli，使用脚手架生成一个某视频剪辑软件项目。

项目创建成功之后，用开发工具打开，就可以写一个简单的上传例子了，主要代码如下：

模板div class=' hello ' h1 { { msg } }/h1表单输入类型=' file ' @ change=' getFile($ event)' button class=' button-primary button-pill button-small ' @ click=' submit($ event)'提交/按钮/表单/div/模板脚本从“axios”导入axios导出默认{ name: 'HelloWorld '，data(){ return { msg : }欢迎使用您的Vue.js App '、file: '' }、methods : { getfile : function(event){ this。文件=事件。目标。文件[0]；控制台。日志(这个。文件)；}，submit:函数（事件){ //阻止元素发生默认的行为事件。prevent default()；让formData=new formData()；formData.append('file ')，这个。文件)；axios。post(' http://localhost :8082/上传/单文件'，formData).然后（函数（响应){ alert(响应。数据)；console.log(响应);窗户。位置。重载()；}) .捕捉(函数（错误){ alert('上传失败');console.log(错误);窗户。位置。重载()；});} } }/脚本使用爱可信向后端发送埃阿斯请求，使用H5的上传对象封装图片数据

测试

启动服务端，直接运行BootApplication类的主要的方法，端口8082

启动前端，端口默认8080，cd到前端目录下，分别执行：

npm安装npm运行开发成功启动后，请访问localhost:8080

选择一张图片上传，可以看到上传成功后，在后端的指定目录中也有一个图片文件

摘要

至此，前端和后端分离的上传演示完成。本文是一个简单的演示，只能处理小文件的上传。后面我会在SpringBoot Vue上写一篇文章，实现大文件的分块上传，敬请期待。附上源代码，欢迎使用star:boot-上传。