springmvc中的文件上传_最不会程序的程序猿_springmvc文件上传文章

irpas 02-07 1606

1.文件上传原理

2.文件上传到本地服务器

（1）在pom.xml中配置依赖

<dependencies> <dependency> <groupId>repMaven.org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.2.15.RELEASE</version> </dependency> <dependency> <groupId>repMaven.org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.24</version> </dependency> <dependency> <groupId>repMaven.com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.13.2.2</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>4.0.1</version> </dependency>  <dependency> <groupId>repMaven.commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.4</version> </dependency> </dependencies>

（2）在web.xml中注册DispatcherServlet

<servlet> <servlet-name>DispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:springmvc.xml</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>DispatcherServlet</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping>

(3)创建一个jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <%-- method:文件的提交方式必须为post提交 enctype:默认是application/x-www-form-urlencoded(表示提交表单数据) multipart/form-date:可以包含文件数据 type="file" 表示文件必须有name属性 --%> <form method="post" action="upload01" enctype="multipart/form-data"> <input type="file" name="myfile"/><br> <input type="submit" value="提交"> </form> </body> </html>

(4)在springmvc中配置文件上传解析器

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize" value="10485760" /> </bean>

（5）创建upload01接口的方法

@RequestMapping("/upload01") public String upload01(MultipartFile myfile, HttpServletRequest request)throws Exception{ //1.得到本地服务目录的地址 String path = request.getSession().getServletContext().getRealPath("upload"); //2.判断该目录是否存在 File file = new File(path); if(!file.exists()){ file.mkdirs(); } //3.把myfile保存到本低服务中某个文件下 //UUID.randomUUID().toString()获取随机值防止上传的文件名重复 //getOriginalFilename获得上传的文件名非getName方法 String fileName = UUID.randomUUID().toString().replace("-","") +myfile.getOriginalFilename(); File target = new File(path+"/"+fileName); myfile.transferTo(target);//把myfile转移到目标目录下 return ""; }

3.elementui+vue+axios完成文件上传

(1)使用element+vue创建前端页面

直接使用elementui官网的模板

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <link type="text/css" rel="stylesheet" href="css/index.css"/>  <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript" src="js/qs.min.js"></script>  <script type="text/javascript" src="js/index.js"></script> <style> .avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409EFF; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center; } .avatar { width: 178px; height: 178px; display: block; } </style> </head> <body> <div id="app"> <el-upload class="avatar-uploader" action="upload02" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </div> </body> <script> var app = new Vue({ el:"#app", data:{ imageUrl:"", }, methods:{ handleAvatarSuccess(res, file) { this.imageUrl = res.data; }, beforeAvatarUpload(file) { const isJPG = file.type === 'image/jpeg'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error('上传头像图片只能是 JPG 格式!'); } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); } return isJPG && isLt2M; } } }) </script> </html>

（2）后台接口

@RequestMapping("upload02") @ResponseBody public Map upload02(MultipartFile file, HttpServletRequest request){ try { //1.得到本低服务目录的地址 String path = request.getSession().getServletContext().getRealPath("upload"); //2.判断该目录是否存在 File file1 = new File(path); if (!file1.exists()) { file1.mkdirs(); } //3.把myfile保存到本低服务中某个文件下 String fileName = UUID.randomUUID().toString().replace("-", "") + file.getOriginalFilename(); File target = new File(path + "/" + fileName); file.transferTo(target); Map map = new HashMap(); map.put("code",2000); map.put("msg","上传成功"); // map.put("data","http://localhost:8080/springmvc_fileupload/upload/"+fileName); return map; }catch (Exception e){ e.printStackTrace(); } Map map = new HashMap(); map.put("code",5000); map.put("msg","上传失败"); return map; }

4.普通文件上传到OSS文件服务器

前言：可以在阿里云的oss对象存储中找到上传文件的相关代码说明

然后找到文件流上传 ---->直接复制改编代码中的值（1）导入相关依赖

dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</artifactId> <version>3.10.2</version> </dependency>

（2）测试代码

package com.wx.controller; import com.aliyun.oss.ClientException; import com.aliyun.oss.OSS; import com.aliyun.oss.OSSClientBuilder; import com.aliyun.oss.OSSException; import java.io.FileInputStream; import java.io.InputStream; public class Demo { public stat