通过elementui-vue上传文件到本地服务器

article/2025/6/21 0:52:57

1.文件上传原理

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

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

4.上传到oss阿里云的服务器

4.1申请oss文件服务

4.2在oss界面上操作文件上传

4.3申请阿里云的密钥

1.文件上传原理

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

(1)引入文件上传的依赖

 <dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.4</version></dependency>

(2)创建一个页面

<%--Created by IntelliJ IDEA.User: AdministratorDate: 2022/6/10Time: 8:40To change this template use File | Settings | File Templates.
--%>
<%@ 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-data:可以包含文件数据input的类型必须为file类型，而且必须有name属性--%>
<form method="post" action="upload01" enctype="multipart/form-data"><input type="file" name="myfile"/><input type="submit" value="提交"/>
</form></body>
</html>

（3）在springmvc中配置文件上传解析器

<!--id的名称必须叫multipartResolver-->
<bean class="org.springframework.web.multipart.commons.CommonsMultipartResolver" id="multipartResolver"><property name="maxUploadSize" value="10485760"/></bean>

(4)创建upload接口方法

@Controller
public class UploadController {@RequestMapping("/upload01")public String upload(MultipartFile myfile, HttpServletRequest request) throws Exception{//得到本地服务地址String path = request.getSession().getServletContext().getRealPath("upload");//判断路径是否存在File file = new File(path);if (file.exists()){file.mkdirs();}//吧myfile保存到本地服务中某个文件夹下String filename = UUID.randomUUID().toString().replace("-","")+myfile.getOriginalFilename();File target = new File(path+"/"+filename);myfile.transferTo(target);return "";}

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

(1)页面的查询

<%--Created by IntelliJ IDEA.User: AdministratorDate: 2022/6/9Time: 20:44To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><!--引入element得css样式--><link type="text/css" rel="stylesheet" href="css/index.css"/><!--引入vue得js文件 这个必须在element之前引入--><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/axios.min.js"></script><!--element得js文件--><script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="app"><%--action：文件上传的路径--%><el-uploadclass="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><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>
</html>

（2）后台的接口

@RequestMapping("/upload02")@ResponseBodypublic Map upload02(MultipartFile file,HttpServletRequest request){try {//获取上传到服务器的文件夹路径String path = request.getSession().getServletContext().getRealPath("upload");File file1 = new File(path);//判断指定的目录是否存在if (!file1.exists()) {file1.mkdirs();}//设置上传后的文件名称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/upload/"+filename);return map;}catch (Exception e){e.printStackTrace();}Map map = new HashMap();map.put("code",5000);map.put("msg","上传失败");return map;}