本文实例为大家分享了elementui+vue+axios实现文件上传本地服务器的具体代码,供大家参考,具体内容如下
文件上传的原理
加入文件上传的依赖
<!--文件上传的依赖--> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.4</version> </dependency>
创建一个web页面
<%-- Created by IntelliJ IDEA. User: 王磊 Date: 2022/6/9 Time: 19:19 To 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 可以包含文件数据 file 文件 input的类型必须为 file 类型 而且必须有name 属性 --%> <form method="post" action="upload01" enctype="multipart/form-data"> <input type="file" name="myfile"/><br> <input type="submit" value="提交"> </form> </body> </html>
在springmvc中配置文件上传解析器
<!-- id的名称必须叫multipartResolver --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!--这里的单位为字节10M*1024K*1024--> <property name="maxUploadSize" value="10485760"/> </bean>
创建upload01接口方法
package com.wzl.controller;/* * @author : wzl * @date : 2022/6/9 19:14 * @description: some description */ import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest; import java.io.File; import java.util.UUID; @Controller public class pictureController { @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保存到本地服务中某个文件夹下。 缺点:文件的名称 String filename= UUID.randomUUID().toString().replace("-","")+myfile.getOriginalFilename(); File target=new File(path+"/"+filename); myfile.transferTo(target); //把myfile转移到目标目录下 return ""; } }
加入web后
<%-- Created by IntelliJ IDEA. User: 王磊 Date: 2022/6/9 Time: 20:35 To 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="https://www.atool.online/article/css/index.css"> <!--引入vue的js文件--> <script type="text/javascript" src="https://www.atool.online/article/js/vue.js"></script> <script type="text/javascript" src="https://www.atool.online/article/js/qs.min.js"></script> <script type="text/javascript" src="https://www.atool.online/article/js/axios.min.js"></script> <!--element的js文件--> <script type="text/javascript" src="https://www.atool.online/article/js/index.js"></script> </head> <body> <div id="app"> <%--action:文件上传的路径--%> <el-upload class="avatar-uploader" action="/upload02" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="https://www.atool.online/article/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 isPNG = file.type === 'image/png'; 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>
后台的接口
package com.wzl.controller;/* * @author : wzl * @date : 2022/6/9 20:40 * @description: some description */ import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest; import java.io.File; import java.io.IOException; import java.util.HashMap; import java.util.Map; import java.util.UUID; @Controller
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。