SpringMVC补充

最新推荐文章于 2024-07-26 20:46:33 发布

hzk_niubi1313

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量303

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/hzk_niubi1313/article/details/125228315

版权

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

（1）因为文件上传的依赖。

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

(2) 创建一个页面

<%--
  Created by IntelliJ IDEA.
  Date: 2022/6/10
  Time: 18:40
  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:可以包含文件数据

      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>

在这里插入图片描述
（3）在springmvc中配置文件上传解析器

 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="10455568"/>
    </bean>

(4)创建upload01接口方法

//注意:MultipartFile 参数名必须和<input type="file" name="myfile"/>中name属性相同
    @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 "";
    }

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

（1）页面布局

<%--
  Created by IntelliJ IDEA.
  Date: 2022/6/10
  Time: 13:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <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>
    <script type="text/javascript" src="js/index.js"></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>
</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>
</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>
</html>

（2）后台的接口

 @RequestMapping("/upload02")
    @ResponseBody
    public Map upload02(MultipartFile file, HttpServletRequest request) {
        try {
            //1.获取上传到服务器的文件夹路径
            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/upload/"+filename);
            return map;
        }catch (Exception e){
            e.printStackTrace();
        }
        Map map=new HashMap();
        map.put("code",5000);
        map.put("msg","上传失败");
        return map;
    }

3. 普通的文件上传到OSS文件服务器

（1）引入阿里云依赖
在这里插入图片描述
（2）代码的书写。

package com.hzk.utils;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.springframework.web.multipart.MultipartFile;

import java.io.InputStream;
import java.util.Calendar;
import java.util.UUID;

/**
 * @author hzk
 * @date 2022/6/10 19:25
 */
public class OSSutils {
    public static String upload(MultipartFile myfile){
        // Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
        String endpoint = "oss-cn-hangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        //LTAI5tHYAiKuXvjxcVaqqbHC
        //J6g4CrUxHCt3xYgjGhSAtIFRXY1Arr
        String accessKeyId = "LTAI5tHYAiKuXvjxcVaqqbHC";
        String accessKeySecret = "J6g4CrUxHCt3xYgjGhSAtIFRXY1Arr";
        // 填写Bucket名称，例如examplebucket。
        String bucketName = "hzk666";
        // 填写Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。

        String objectName = fileName(myfile);
        // 填写本地文件的完整路径，例如D:\\localpath\\examplefile.txt。

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        try {
            InputStream inputStream = myfile.getInputStream();
            // 创建PutObject请求。
            ossClient.putObject(bucketName, objectName, inputStream);
        } catch (Exception oe){
            oe.printStackTrace();
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
        //https://hzk666.oss-cn-hangzhou.aliyuncs.com/2022/6/10/73d29da0aa714551a300e0c9d9b3ad7d5.jpg

        String url ="https://"+bucketName+"."+endpoint+"/"+objectName;
        return url;
    }
    private static String fileName(MultipartFile myfile){
        Calendar calendar = Calendar.getInstance();
        String objectName = calendar.get(Calendar.YEAR)+"/"+(calendar.get(Calendar.MONTH)+1)+"/"+calendar.get(Calendar.DATE)+"/"+ UUID.randomUUID().toString().replace("-","")+myfile.getOriginalFilename();
        return objectName;
    }
}

4. elementui 异步上传OSS服务器

（1）前端

<%--
  Created by IntelliJ IDEA.
  User: 郝政坤
  Date: 2022/6/10
  Time: 13:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <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>
    <script type="text/javascript" src="js/index.js"></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>
</head>
<body>
    <div id="app">
        <el-upload
                class="avatar-uploader"
                action="upload01"
                :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>
</html>

（2）后端工具:

package com.hzk.utils;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.springframework.web.multipart.MultipartFile;

import java.io.InputStream;
import java.util.Calendar;
import java.util.UUID;

/**
 * @author hzk
 * @date 2022/6/10 19:25
 */
public class OSSutils {
    public static String upload(MultipartFile myfile){
        // Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
        String endpoint = "oss-cn-hangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        //LTAI5tHYAiKuXvjxcVaqqbHC
        //J6g4CrUxHCt3xYgjGhSAtIFRXY1Arr
        String accessKeyId = "LTAI5tHYAiKuXvjxcVaqqbHC";
        String accessKeySecret = "J6g4CrUxHCt3xYgjGhSAtIFRXY1Arr";
        // 填写Bucket名称，例如examplebucket。
        String bucketName = "hzk666";
        // 填写Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。

        String objectName = fileName(myfile);
        // 填写本地文件的完整路径，例如D:\\localpath\\examplefile.txt。

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        try {
            InputStream inputStream = myfile.getInputStream();
            // 创建PutObject请求。
            ossClient.putObject(bucketName, objectName, inputStream);
        } catch (Exception oe){
            oe.printStackTrace();
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
        //https://hzk666.oss-cn-hangzhou.aliyuncs.com/2022/6/10/73d29da0aa714551a300e0c9d9b3ad7d5.jpg

        String url ="https://"+bucketName+"."+endpoint+"/"+objectName;
        return url;
    }
    private static String fileName(MultipartFile myfile){
        Calendar calendar = Calendar.getInstance();
        String objectName = calendar.get(Calendar.YEAR)+"/"+(calendar.get(Calendar.MONTH)+1)+"/"+calendar.get(Calendar.DATE)+"/"+ UUID.randomUUID().toString().replace("-","")+myfile.getOriginalFilename();
        return objectName;
    }
}

(3) controller接口

 @RequestMapping("upload01")
    @ResponseBody
    public CommonResult upload01(MultipartFile file){
        try {
            String url = OSSutils.upload(file);
            CommonResult commonResult = new CommonResult(2000,"上传成功",url);
            return commonResult;
        } catch (Exception e) {
            e.printStackTrace();
        }
        CommonResult commonResult = new CommonResult(5000,"上传失败",null);
        return commonResult;
    }

5. 保存用户信息–头像

（1）前端的布局

<%--
  Created by IntelliJ IDEA.
  Date: 2022/6/10
  Time: 19:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <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>
    <script type="text/javascript" src="js/index.js"></script>
    <style>
        #mydiv{
            border: 2px solid black;
            width: 300px;
            margin-left: 550px;
            margin-top: 180px;
        }
    </style>
</head>
<body>
    <div id="mydiv">
        <div id="app">
            <el-form  label-width="80px" :model="userFrom">

                <el-form-item label="上传头像">
                    <el-upload
                            class="avatar-uploader"
                            action="/user/uploadAvatar"
                            :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>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="userFrom.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="userFrom.age"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="userFrom.address"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('userFrom')">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</body>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                userFrom:{},
                imageUrl:""
            },
            methods:{
                handleAvatarSuccess(res, file) {
                    this.imageUrl = res.data;
                    this.userFrom.avataUrl=this.imageUrl;
                },
                submitForm(){
                   axios.post("/user/addUser",this.userFrom).then(function (result){
                       console.log(result);
                       location.href="success.jsp";
                   })
                },
                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)后台代码

package com.hzk.controller;

import com.hzk.entity.User;
import com.hzk.utils.CommonResult;
import com.hzk.utils.OSSutils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

/**
 * @author hzk
 * @date 2022/6/10 19:58
 */
@Controller
@RequestMapping(value = "user")
public class UserController {
    @RequestMapping("uploadAvatar")
    @ResponseBody
    public CommonResult uploadAvatar(MultipartFile file){
        try {
            String avatar = OSSutils.upload(file);
            CommonResult commonResult = new CommonResult(2000,"上传成功",avatar);
            return commonResult;
        } catch (Exception e) {
            e.printStackTrace();
        }
        CommonResult commonResult = new CommonResult(5000,"上传失败",null);
        return commonResult;
    }
    //@RequestBody:把请求体重的json数据转化为java对象
    @RequestMapping("addUser")
    @ResponseBody
    public CommonResult addUser(@RequestBody User user){
        System.out.println(user);
        return new CommonResult(2000,"成功",null);
    }
}

6. 补充的内容

@RestController----类上等价于 @COntroller+@ResponseBody
该注解下所有的方法都是返回json数据

@RequestMapping: 作用: 把请求路径映射到响应的方法上。

@RequestParam(value = “u”):设置你接受的请求参数名。查询参数

@RequestMapping(value = “/addUser”,method = RequestMethod.POST)
method:表示该接口接受的请求方式.不设置可以接受任意请求方式。

@GetMapping(“addUser”):表示只接受get提交方式的请求

@RequestBody:把请求的json数据转换为java对象。从前端到后端
@ResponseBody:把java转换为json数据从后端转前端

hzk_niubi1313

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringMVC补充

（1）因为文件上传的依赖。(2) 创建一个页面（3）在springmvc中配置文件上传解析器(4)创建upload01接口方法2.elementui+vue+axios完成文件上传（1）页面布局（2）后台的接口3. 普通的文件上传到OSS文件服务器（1）引入阿里云依赖（2）代码的书写。4. elementui 异步上传OSS服务器（1）前端（2）后端工具:(3) controller接口5. 保存用户信息–头像（1）前端的布局(2)后台代码6. 补充的内容@Re
复制链接

扫一扫