本文实例为大家分享了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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部