SpringMvc(三)文件上传

Naaaaa.a

已于 2022-06-10 08:33:47 修改

阅读量104

点赞数

分类专栏： java 文章标签： java

于 2022-06-09 21:49:08 首次发布

本文链接：https://blog.csdn.net/qq_44189274/article/details/125210857

版权

java 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

1.文件上传的原理

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

引入文件上传依赖

    <!--文件上传依赖-->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.4</version>
    </dependency>

创建upload(上传)页面

<%--
     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="myfile01"/><br/>
    <input type="submit" value="提交">
</form>

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

 <!--
     id的名称必须叫multipartResolver
     -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--这里的单位为字节10M*1024K*1024  = 10485760-->
        <property name="maxUploadSize" value="10485760"/>
    </bean>

创建upload01接口方法

    @RequestMapping("upload01")
    @ResponseBody
    public String upload01(MultipartFile myfile01, HttpServletRequest request) throws Exception{
        //获取上传到本地服务的目录地址
        String path = request.getSession().getServletContext().getRealPath("upload");
        System.out.println(path);

        //判断该目录是否存在
        File file1 = new File(path);
        if(!file1.exists()){
            file1.mkdirs();
        }
        //把myfile01保存到本地服务中某个文件夹下。
        String filename = UUID.randomUUID().toString().replace("-", "") + myfile01.getOriginalFilename();
        File target = new File(path+"/"+filename);
        myfile01.transferTo(target);//把myfile01转移到目标目录下

        return "";
    }

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

设计页面布局

<%@ 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">
    <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>

<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>

<script>
    var app = new Vue({
        el:"#app",
        data() {
            return {
                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>
</body>
</html>

后台接口

    @RequestMapping("upload02")
    @ResponseBody
    public Map upload02(MultipartFile myfile02,HttpServletRequest request){
        try{
            //获取上传到服务器的文件夹路径
            String path = request.getSession().getServletContext().getRealPath("upload");
            //判断目录是否存在
            File file2 = new File(path);
            if(!file2.exists()){
                file2.mkdirs();
            }
            //设置上传后的文件名称
            String filename2 = UUID.randomUUID().toString().replace("-", "") + myfile02.getOriginalFilename();
            File target = new File(path+"/"+filename2);
            myfile02.transferTo(target);
            Map map = new HashMap();
            map.put("code",200);
            map.put("msg","登录成功");
            //通过访问服务器地址来访问图片
            map.put("data","http://localhost:8080/springmvc_16/upload"+filename2);
            return map;
        }catch (Exception e){
            e.printStackTrace();
        }
        Map map = new HashMap();
        map.put("code",500);
        map.put("msg","登录失败");
        return map;
    }