本文实例为大家分享了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测试数据mons.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="css/index.css">
? ? <!--引入vue的js文件-->
? ? <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-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 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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
查看更多关于elementui+vue+axios实现文件上传本地服务器的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did122179