2021-10-23

最新推荐文章于 2023-04-08 11:24:46 发布

码野

最新推荐文章于 2023-04-08 11:24:46 发布

阅读量397

点赞数

文章标签： layui 圆形头像上传组件用户资料 layui-upload

本文链接：https://blog.csdn.net/qq_46320177/article/details/120919983

版权

layui实现圆形头像

在这里插入图片描述

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <link rel="stylesheet" th:href="@{/static/css/layui.css}">
    <script th:src="@{/static/js/layui.js}"></script>
    <link rel="stylesheet" th:href="@{/static/icon_1/iconfont.css}">
    <link rel="stylesheet" th:href="@{/static/css/modules/layer/default/layer.css}">
    <link rel="stylesheet" th:href="@{/static/css/modules/code.css}">
    <link rel="stylesheet" th:href="@{/static/css/modules/laydate/default/laydate.css}">
</head>
<body style="background-color: #faf8f8">

<form>
    <div class="layui-bg-gray" style="padding: 30px;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md4">
                <div class="layui-panel">
                    <div style="padding: 50px 30px;">
                        <div class="layui-fluid">
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-md12">
                                    <div class="layui-card">
                                        <div class="layui-card-header"><p
                                                style="font-size: 25px;text-shadow: 5px 5px 5px black"><i>我的资料</i></p>
                                        </div>
                                        <div class="layui-card-body" pad15>
                                            <div class="layui-form" lay-filter="">
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">头像</label>
                                                    <div style="text-align: left">
                                                        <img class="layui-upload layui-anim"
                                                             data-anim="layui-anim-scaleSpring" id="id_upload_img"
                                                             style="border-radius: 50%; width: 150px;height: 150px; box-shadow: 0 0 0 4px rgb(0 0 0 /10%);"
                                                             th:if="${user.user_image} != ''"
                                                             th:src="${user.user_image}">
                                                        <img class="layui-upload layui-anim"
                                                             data-anim="layui-anim-scaleSpring" id="id_upload_img"
                                                             src="../../../static/image/img.png"
                                                             style="border-radius: 50%; width: 150px;height: 150px;box-shadow: 0 0 0 4px rgb(0 0 0 /10%);"
                                                             th:if="${user.user_image} == ''">
                                                        <div class="layui-word-aux"
                                                             style="margin-top: 10px;margin-left: 120px">点击更换我的头像
                                                        </div>
                                                        <div class="layui-word-aux" style="margin-left: 100px">上传图片限制大小
                                                            600kb
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">用户名</label>
                                                    <div class="layui-input-inline">
                                                        <p style="margin-top: 6px;font-size: 20px"
                                                           th:text="${user.user_name}">2021-10-12 19:22:12</p>
                                                        <!--                                                    <input type="text" name="username"  th:value="${user.user_name}" readonly class="layui-input">-->
                                                    </div>
                                                    <div class="layui-form-mid layui-word-aux">不可修改。</div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">昵称</label>
                                                    <div class="layui-input-inline">
                                                        <input autocomplete="off" class="layui-input"
                                                               lay-verify="nickname" name="nickname" placeholder="请输入昵称"
                                                               th:value="${user.name}" type="text">
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">性别</label>
                                                    <div class="layui-input-block" th:if="${user.user_sex == '男'}">
                                                        <input checked name="sex" title="男" type="radio" value="男">
                                                        <input name="sex" title="女" type="radio" value="女">
                                                        <input name="sex" title="保密" type="radio" value="保密">
                                                    </div>
                                                    <div class="layui-input-block" th:if="${user.user_sex == '女'}">
                                                        <input name="sex" title="男" type="radio" value="男">
                                                        <input checked name="sex" title="女" type="radio" value="女">
                                                        <input name="sex" title="保密" type="radio" value="保密">
                                                    </div>
                                                    <div class="layui-input-block" th:if="${user.user_sex == '保密'}">
                                                        <input name="sex" title="男" type="radio" value="男">
                                                        <input name="sex" title="女" type="radio" value="女">
                                                        <input checked name="sex" title="保密" type="radio" value="保密">
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">手机</label>
                                                    <div class="layui-input-inline">
                                                        <input autocomplete="off" class="layui-input" lay-verify="phone"
                                                               name="cellphone" th:value="${user.user_iphone}"
                                                               type="text">
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">邮箱</label>
                                                    <div class="layui-input-inline">
                                                        <input autocomplete="off" class="layui-input" lay-verify="email"
                                                               name="email" th:value="${user.user_email}" type="text">
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">注册时间</label>
                                                    <div class="layui-input-inline">
                                                        <p style="margin-top: 6px;font-size: 15px"
                                                           th:text="${user.date}">2021-10-12 19:22:12</p>
                                                    </div>
                                                    <div class="layui-form-mid layui-word-aux">不可修改。</div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <div class="layui-input-block">
                                                        <button class="layui-btn" lay-filter="setmyinfo" lay-submit>
                                                            确认修改
                                                        </button>
                                                        <button class="layui-btn layui-btn-primary" type="reset">重新填写
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</form>

<script>
    layui.use(['upload'], function () {
        var layer = layui.layer;
        var $ = layui.jquery,
            upload = layui.upload;

        let imagePath = '';
        //普通图片上传开始
        var uploadInst = upload.render({
            elem: '#id_upload_img',
            url: '/user/upload_img',
            size: 600, //限制文件大小，单位 KB
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    // 保存预览显示图片
                    sessionStorage.setItem("img",result);
                });
            },
            //后台返回数据
            done: function (res) {
                if (res.bool=== true) {
                    // 当上传成功才回显图片
                    layer.msg(res.msg);
                    imagePath = res.data;
                    //回去预显示图片并回显
                    $('#id_upload_img').attr('src',sessionStorage.getItem("img"));
                } else {
                    layer.msg(res.msg);
                }
                console.log(res)
            },


        });
        //普通图片上传结束
    })

</script>


</body>
</html>

后台接收请求

@RequestMapping("/upload_img")
    @ResponseBody
    public String updateImager(@RequestParam("file") MultipartFile file, HttpServletRequest request){

        HashMap<String, Object> hashMap = new HashMap<>(3);
        System.out.println("file = " + file);

        String imagePath = UploadUtils.upload(file,request);
        System.out.println("image = " + imagePath);
        if (imagePath != null) {
            hashMap.put("bool",true);
            hashMap.put("msg","上传成功");
            hashMap.put("data",imagePath);
        }else {
            hashMap.put("bool",false);
            hashMap.put("msg","上传失败");
        }
        return JSON.toJSONString(hashMap);
    }

对图片进行处理加粗样式以及保存

package com.edu.util;

import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.*;
import java.util.UUID;

/**
 * @author yz
 * @data: 2021/10/23 11:39 星期六
 * @file : UploadUtils.java
 */
@Component
public class UploadUtils {

    /**
     * 上传保存的地址
     */

    public static  String BASE_PATH = null;
    //访问图片的地址

    private static final String SERVER_PATH = "/static/upload/image/";

    public static String upload(MultipartFile file, HttpServletRequest request){


        request.getSession().setAttribute("file",file);
        MultipartFile file1 = (MultipartFile) request.getSession().getAttribute("file");

        BASE_PATH = request.getSession().getServletContext().getRealPath("/");

        String[] output = BASE_PATH.split("target");
        String BASE_PATH_TO = BASE_PATH + "\\static\\upload\\image\\";
        BASE_PATH = output[0]+"src\\main\\webapp\\static\\upload\\image\\";
        //获取上传文件的名称
        String fileName = file.getOriginalFilename();
//       用于判断是否只由数字跟字母组成
        String pattern = "[\\w]+[.]+[\\w]+";
        if (!fileName.matches(pattern)) {
            return null;
        }
        String uuid = UUID.randomUUID().toString().replace("-", "");
        String newFileName = uuid +"-"+fileName;
        // 创建一个文件实例对象
        File image = new File(BASE_PATH,newFileName);
        File imageFile = new File(BASE_PATH_TO, newFileName);
        System.out.println("image = " + image);
        System.out.println("imageFile = " + imageFile);
        //对文件进行上传操作 file 只能使用一次用完后就关闭了
        try {
            file.transferTo(image);
        } catch (IOException e) {
            return null;
        }
        //对图片进行复制
        try {
            copyImage(image,imageFile);
        } catch (IOException e) {
            e.printStackTrace();
        }

        //返回请求路径
        return SERVER_PATH + newFileName;
    }

    /**
     * 图片复制
     * @param image
     * @param imageFile
     * @throws IOException
     */
    public static void copyImage(File image,File imageFile) throws IOException {
        FileInputStream in=new FileInputStream(image);
        FileOutputStream out= new FileOutputStream(imageFile);
        BufferedInputStream bufferedIn=new BufferedInputStream(in);
        BufferedOutputStream bufferedOut=new BufferedOutputStream(out);
        byte[] by=new byte[1];
        while (bufferedIn.read(by)!=-1) {
            bufferedOut.write(by);
        }
        //将缓冲区中的数据全部写出
        bufferedOut.flush();
        bufferedIn.close();
        bufferedOut.close();
    }



}

依赖

        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.3</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>

spring-mvc.xml

<!--文件上传-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="utf-8"/>
        <property name="maxUploadSize" value="#{1024*1024}"/>
    </bean>
```xml

码野

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2021-10-23

layui实现圆形头像<!doctype html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
复制链接

扫一扫