实现头像,文件上传

电玩女神 2022-05-22 13:09 424阅读 0赞

### 该文章来源于  [https://www.cnblogs.com/libo0125ok/p/7773898.html][https_www.cnblogs.com_libo0125ok_p_7773898.html] ###

### 一、Tomcat服务器部分 ###

### 1、Tomcat服务器 ###

单独复制一份Tomcat，用来作为文件服务器

#### 1.1 web.xml文件： ####

需要在该Tomcat的conf目录下的web.xml文件的大概100行添加如下几行（红框内部分）：

![1048036-20171102181110123-1915406525.jpg][]

#### 1.2 server.xml文件： ####

需要在该Tomcat的conf目录下的server.xml文件做一些端口的修改

![1048036-20171102181701482-1233748541.jpg][]

![1048036-20171102181715107-1169448062.jpg][]

![1048036-20171102181740795-1312674438.jpg][]

#### 1.3 Tomcat下建立文件夹 ####

在该Tomcat的/webapps/ROOT目录下创建一个upload目录，用来存放上传的文件

![1048036-20171102182240795-2108932850.jpg][]

#### 1.4 启动Tomcat服务器 ####

以上三步做完后，就可以启动Tomcat服务器了，在Tomcat的bin目录下执行 startup.sh 脚本

![1048036-20171102182801638-45923572.jpg][]

### 二、java部分 ###

![1048036-20171102184211638-161647437.jpg][]

#### 2.1 jar包 ####

除了其他的jar包以外，还需要以下几个jar包

commons-io-1.3.2.jar

commons-fileupload-1.2.1.jar

jersey-client-1.18.1.jar

jersey-core-1.18.1.jar

jersey-common

![1048036-20171102183622263-1512326443.jpg][]

![1048036-20171102183635201-933824105.jpg][]

#### 2.2 配置文件 ####

2.2.1 spring-mvc.xml文件添加如下部分：

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

2.2.2 config.properties 文件添加如下部分：

#文件服务器地址
    uploadHost=http://172.16.5.102:8090/
    #上传的文件保存的目录
    imgPath = upload/

#### 2.3 java文件 ####

2.3.1 Upload.java

![复制代码][copycode.gif]

package com.lin.utils;
    
    import java.io.File;
    import java.io.IOException;
    import java.text.SimpleDateFormat;
    import java.util.Date;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.apache.commons.io.FilenameUtils;
    import org.springframework.web.multipart.MultipartFile;
    
    import com.sun.jersey.api.client.Client;
    import com.sun.jersey.api.client.WebResource;
    
    
    /**
     * 上传文件工具类
     * @author libo
     */
    public class Upload {
        
        /**
         * 上传文件
         * @param request
         * @param response
         * @param serverPath    服务器地址:(http://172.16.5.102:8090/)
         * @param path             文件路径（不包含服务器地址：upload/）
         * @return
         */
        public static String upload(Client client, MultipartFile file, HttpServletRequest request,HttpServletResponse response, String serverPath, String path){
            // 文件名称生成策略（UUID uuid = UUID.randomUUID()）
            Date d = new Date();
            SimpleDateFormat format = new SimpleDateFormat("yyyyMMddHHmmss");
            String formatDate = format.format(d);
            String str = "";
            for(int i=0 ;i <5; i++){
                int n = (int)(Math.random()*90)+10;
                str += n;
            }
            // 获取文件的扩展名
            String extension = FilenameUtils.getExtension(file.getOriginalFilename());
            // 文件名
            String fileName = formatDate + str + "." + extension;
            //相对路径
            String relaPath = path + fileName;
            
            String a = serverPath + path.substring(0, path.lastIndexOf("/"));
            File file2 = new File(a);
            if(!file2.exists()){
                boolean mkdirs = file2.mkdirs();
                System.out.println(mkdirs);
            }
            
            // 另一台tomcat的URL（真实路径）
            String realPath = serverPath + relaPath;
            // 设置请求路径
            WebResource resource = client.resource(realPath);
    
            // 发送开始post get put（基于put提交）
            try {
                resource.put(String.class, file.getBytes());
                return fileName+";"+relaPath+";"+realPath;
            } catch (IOException e) {
                e.printStackTrace();
                return "";
            }
        }
        
        /**
         * 删除文件
         * @param filePath（文件完整地址：http://172.16.5.102:8090/upload/1234.jpg）
         * @return
         */
        public static String delete(String filePath){
            try {
                Client client = new Client();
                WebResource resource = client.resource(filePath);
                resource.delete();
                return "y";
            } catch (Exception e) {
                e.printStackTrace();
                return "n";
            }
        }
    }

![复制代码][copycode.gif]

#### 2.3.2 controller层 ####

![复制代码][copycode.gif]

package com.lin.controller;
    
    import java.io.File;
    import java.io.IOException;
    import java.text.SimpleDateFormat;
    import java.util.ArrayList;
    import java.util.Date;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import javax.annotation.Resource;
    import javax.servlet.ServletContext;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    import org.springframework.web.multipart.MultipartHttpServletRequest;
    import org.springframework.web.multipart.MultipartResolver;
    import org.springframework.web.multipart.commons.CommonsMultipartResolver;
    import org.springframework.web.servlet.config.VelocityConfigurerBeanDefinitionParser;
    
    import com.lin.domain.data.ResData;
    import com.lin.domain.data.ResListData;
    import com.lin.domain.error.Error;
    import com.lin.domain.sysUser.SysUser;
    import com.lin.domain.sysUser.SysUserWithDep;
    import com.lin.service.SysUserService;
    import com.lin.utils.Aes;
    import com.lin.utils.DateTimeUtils;
    import com.lin.utils.ResponseUtils;
    import com.lin.utils.Upload;
    import com.lin.utils.Utils;
    import com.sun.jersey.api.client.Client;
    
    import net.sf.json.JSONObject;
    
    /**
     * 后台用户-controller
     * @author libo
     */
    @Controller
    @RequestMapping("/sysUser")
    public class SysUserController {
    
        @Resource
        private SysUserService sysUserService;
        
        @Value(value="${imgPath}")    //后台图片保存地址
        private String imgPath;
        
        @Value(value="${uploadHost}")
        private String uploadHost;    //项目host路径    
        
        /**
         * 后台用户登陆功能
         * @return
         * @throws IOException 
         */
        @ResponseBody
        @RequestMapping(value="/login.do", method=RequestMethod.POST)
        public void login(HttpServletRequest req, HttpServletResponse res, 
                @RequestParam(required=true) String loginEmail, 
                @RequestParam(required=true) String loginPwd) throws IOException{
            //代码省略
        }
    
    /**
         * 根据id查询用户信息（包括部门信息）
         * @param req
         * @param res
         * @param id
         * @throws IOException 
         */
        @ResponseBody
        @RequestMapping(value="/getSysUser.do", method=RequestMethod.GET)
        public void getSysUser(HttpServletRequest req, HttpServletResponse res, 
                @RequestParam(required=true) Integer id) throws IOException{
         　　//代码省略
        }
        
        /**
         * 更新后台用户信息
         * @param req
         * @param res
         * @throws IOException 
         */
        @ResponseBody
        @RequestMapping(value="/updateSysUser.do" ,method=RequestMethod.POST)
        public void updateSysUser(HttpServletRequest req, HttpServletResponse res) throws IOException{
           //代码省略
        }
        
        /**
         * 添加用户
         * @param req
         * @param res
         * @throws IOException 
         */
        @ResponseBody
        @RequestMapping(value="/addSysUser.do", method=RequestMethod.POST)
        public void addSysUser(HttpServletRequest req, HttpServletResponse res) throws IOException {
            //代码省略
        }
    
    
        /**
         * 上传用户头像
         * @param request
         * @param response
         */
        @ResponseBody
        @RequestMapping(value="uploadSysHeadImg.do", method=RequestMethod.POST)
        public void uploadSysHeadImg(HttpServletRequest request,HttpServletResponse response){
            JSONObject jo = new JSONObject();
            try {
                MultipartResolver resolver = new CommonsMultipartResolver(request.getSession().getServletContext());
                MultipartHttpServletRequest Murequest = resolver.resolveMultipart(request);       
                Map<String, MultipartFile> files = Murequest.getFileMap();//得到文件map对象
                
    　　　　　　　// 实例化一个jersey
                Client client = new Client();
                
                List<String> fileNameList = new ArrayList<>();
                List<String> relaPathList = new ArrayList<>();
                List<String> realPathList = new ArrayList<>();
                for(MultipartFile pic: files.values()){
                    String uploadInfo = Upload.upload(client, pic, request, response, uploadHost, imgPath);
                    if(!"".equals(uploadInfo)){    //上传成功
                        String[] infoList = uploadInfo.split(";");
                        fileNameList.add(infoList[0]);    //文件名
                        relaPathList.add(infoList[1]);    //相对路径
                        realPathList.add(infoList[2]);    //真实完整路径
                    }else{    //上传失败
                        fileNameList.add("");
                        relaPathList.add("");
                        realPathList.add("");
                    }
                }
                jo.put("success", 1);
                jo.put("error", null);
                jo.put("fileNameList", fileNameList);
                jo.put("relaPathList", relaPathList);
                jo.put("realPathList", realPathList);
            }catch (Exception e) {
                jo.put("success", 0);
                jo.put("error", "上传失败");
            }
            ResponseUtils.renderJson(response, jo.toString());
        }    
    }

![复制代码][copycode.gif]

其他的java文件省略，然后运行java项目

### 三、前端部分 ###

#### 3.1 index1-cropper图片剪切上传 ####

![复制代码][copycode.gif]

<!DOCTYPE html>
    <html>
    <head>
        <title>index1-cropper图片剪切上传</title>
        <meta charset="utf-8"/>
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <link rel="stylesheet" href="lib/cropper/dist/cropper.min.css" />
    </head>
    <body>
    
    
    
    <input id="btn1" type="file" accept="image/*,camera" style="opacity: 0;"/>
    
    <div>
        <div>上传之前的图片</div>
        <img id="face_image" style="width:50px;height:50px;border-radius: 25px;border: 1px solid #fff;"/>
        <div>上传之后服务器的图片</div>
        <img id="success_image" style="width:50px;height:50px;border-radius: 25px;border: 1px solid #fff;"/>
    </div>
    <div>
        <button id="upload_btn">上传头像</button>
        <button id="image_save">保存</button>
        <span></span>
    </div>
    
    <div class="upload-img" style="width:300px;height: 300px;">
        <img src=""/>
    </div>
    
    <script src="jquery.min.js"></script>
    <script src="lib/cropper/dist/cropper.min.js"></script>
    <script src="lib/canvas-toBlob/canvas-toBlob.js"></script>
    
    <script>
        $(function() {
            //触发input file
            $('#upload_btn').click(function() {
                console.log('模拟点击。。。');
                $('#btn1').trigger('click');
            });
    
            //图片上传
            var $image = $('.upload-img > img');
            $image.cropper({
                viewMode: 1,
    //            preview: '.img-preview', //不同尺寸预览区
                aspectRatio: 1, //裁剪比例，NaN-自由选择区域
                autoCropArea: 0.7, //初始裁剪区域占图片比例
                crop: function(data) { //裁剪操作回调
                    console.log(data);
                }
            });
            var fileName; //选择上传的文件名
            $('#btn1').change(function(){
                var file = this.files[0];
                fileName = file.name;
                var reader = new FileReader();
                //reader回调，重新初始裁剪区
                reader.onload = function(){
                    // 通过 reader.result 来访问生成的 DataURL
                    var url = reader.result;
                    //选择图片后重新初始裁剪区
                    $image.cropper('reset', true).cropper('replace', url);
                };
                reader.readAsDataURL(file);
            });
    
            /*
             * 上传图片
             */
            $('#image_save').click(function() {
                var type = $image.attr('src').split(';')[0].split(':')[1];
    
                var canVas = $image.cropper("getCroppedCanvas", {});
                //将裁剪的图片加载到face_image
                $('#face_image').attr('src', canVas.toDataURL());
                canVas.toBlob(function(blob) {
                    var formData = new FormData();
                    formData.append("file", blob, fileName);
                    http://172.16.5.102:9000/index1-cropper%E5%9B%BE%E7%89%87%E5%89%AA%E5%88%87%E4%B8%8A%E4%BC%A0.html
                    $.ajax({
                        type: "POST",
                        url: 'http://172.16.5.102:8081/ssm_project/sysUser/uploadSysHeadImg.do',
                        data: formData,
                        contentType: false, //必须
                        processData: false, //必须
                        dataType: "json",
                        success: function(res){
                            //清空上传文件的值
                            $('#btn1').val('');
                            $('#success_image').attr('src', res.realPathList[0]);
                        },
                        error : function() {
                            //清空上传文件的值
                            $('#btn1').val('');
                        }
                    });
                }, type);
            });
    
            //取消
            $("#image_cancel").click(function() {
                //清空上传文件的值
                $(_pageId + inputFileId).val('');
            });
        });
    </script>
    </body>
    </html>

![复制代码][copycode.gif]

效果图：

![1048036-20171102190238498-401886395.jpg][]

### ###

#### 3.2 index2-jquery-Form表单提交 ####

![复制代码][copycode.gif]

<!DOCTYPE html>
    <html lang="en">
    <head>
        
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>index2-jquery-Form表单提交</title>
        <script src="jquery.min.js"></script>
        <script src="jquery.form.js"></script>
    </head>
    <body>
    <img height="100" id="success_img"/>
    <form id="jvForm" action="o_save.shtml" method="post" enctype="multipart/form-data">
        
        <input type="hidden" name="" id="img_path"/>
    
        <input type="file" id="select_file" onchange="uploadPic()" name="pic12"/>
    </form>
    
    <script>
        //上传图片
        function uploadPic(){
            //定义参数
            var options = {
                url:"http://172.16.5.102:8081/ssm_project/sysUser/uploadSysHeadImg.do",
                type:"post",
                dataType:"json",
                success:function(res){
                    $('#success_img').attr('src', res.realPathList[0]); //真实完整路径
                    $('#img_path').val(res.relaPathList[0]);    //相对路径
                }
            };
            //jquery.form使用方式
            $("#jvForm").ajaxSubmit(options);
        }
    </script>
    </body>
    </html>

![复制代码][copycode.gif]

效果图：

![1048036-20171102190537826-1621770988.jpg][]

#### 3.3 index3-jquery-ajax提交 ####

![复制代码][copycode.gif]

<!DOCTYPE html>
    <html lang="en">
    <head>
        
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>index3-jquery-ajax提交</title>
        <script src="jquery.min.js"></script>
    </head>
    <body>
    <img id="success_img" height="100px">
    <br>
    
    <input type="file" id="upload_file">
    
    
    <input type="hidden" name="" id="img_path"/>
    <input type="button" id="uploadPicButton" value="上传">
    
    <div>
        <a href="" id="download" download=""></a>
    </div>
    <script>
        //上传图片
        $('#uploadPicButton').click(function () {
            var pic = $('#upload_file')[0].files[0];
            var fd = new FormData();
            fd.append('uploadFile', pic);
            $.ajax({
                url:"http://172.16.5.102:8081/ssm_project/sysUser/uploadSysHeadImg.do",
                type:"post",
                data: fd,   // Form数据
                cache: false,
                contentType: false,
                processData: false,
                success:function(res){
                    $('#success_img').attr('src', res.realPathList[0]); //真实完整路径
                    $('#img_path').val(res.relaPathList[0]);    //相对路径
    
                    $('#download').html(res.fileNameList[0]);
                    $('#download').attr('href', res.realPathList[0]);
                    $('#download').attr('download', res.fileNameList[0]);
                }
            });
        })
    </script>
    </body>
    </html>

![复制代码][copycode.gif]

效果图：

![1048036-20171102190738716-1996212041.jpg][]

![1048036-20171102192029295-374699423.jpg][]

#### 3.4 index4-WebUploader多文件上传 ####

![复制代码][copycode.gif]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>index4-WebUploader多文件上传</title>
        <link rel="stylesheet" href="lib/webuploader/dist/webuploader.css">
        <script src="jquery.min.js"></script>
        <script src="lib/webuploader/dist/webuploader.js"></script>
        <style>
            .file-item {
        
                display: inline-block;
                text-align: center;
                font-size: 12px;
                margin: 10px;
            }
            .file-item .progress {
        
                position: relative;
                height: 6px;
                width: 100%;
                background-color: #ddd;
            }
            .file-item .progress span {
        
                position: absolute;
                left: 0;
                top: 0;
                width: 0%;
                height: 6px;
                background-color: dodgerblue;
            }
            .suc-img-item {
        
                display: inline-block;
                height: 100px;
                margin: 10px;
            }
        </style>
    </head>
    <body>
    
    <h3>图片上传</h3>
    
    <div id="uploader-demo">
        <h4>上传前缩略图</h4>
        <div id="fileList" class="uploader-list"></div>
        <div id="upInfo"></div>
    
        <h4>上传后预览图</h4>
        <div id="successImgList">
                
                
        </div>
    
        <div id="filePicker">选择文件</div>
    </div>
    <input type="button" id="btn" value="开始上传">
    <script>
    //    // 图片上传demo
        $(function() {
            var $ = jQuery,
                $list = $('#fileList'),
                $successImgList = $('#successImgList'),
                ratio = window.devicePixelRatio || 1,  // 优化retina, 在retina下这个值是2 (window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例)
                thumbnailWidth = 50 * ratio,   // 缩略图宽度
                thumbnailHeight = 50 * ratio,  // 缩略图高度
                uploader;    // Web Uploader实例
    
            // 初始化WebUploader
            uploader = WebUploader.create({
                auto: false,   // 自动上传
                swf:'../js/Uploader.swf',   // swf文件路径
                server: 'http://172.16.5.102:8081/ssm_project/sysUser/uploadSysHeadImg.do',  // 文件接收服务端接口地址
                threads:'5',        //同时运行5个线程传输
                fileNumLimit:'10',  //文件总数量只能选择10个
    
                // 选择文件的按钮，可选
                pick: {
                    id:'#filePicker',  //选择文件的按钮
                    multiple:true      //允许可以同时选择多个图片
                },
    
                quality: 90,        // 图片质量，只有type为`image/jpeg`的时候才有效
                compressSize: 0,     // 单位字节，如果图片大小小于此值，不会采用压缩
                crop: true,        //是否同意剪切
    
                //限制传输文件类型，accept可以不写
                accept: {
                    title: 'Images',    //描述
                    extensions: 'gif,jpg,jpeg,bmp,png,mkv,mp4', //文件类型
                    mimeTypes: '*/*'    //mime类型(*/* 可以上传所有类型)
                },
    
                compress: false,    //是否启用压缩
                resize: false,      //尺寸不改变
                duplicate: false   //是否允许重复上传
            });
    
    
            // 当有文件添加进来的时候，创建img显示缩略图使用
            uploader.on('fileQueued', function(file) {
                var $li = $('<div id="' + file.id + '" class="file-item thumbnail">' +
                                '<img>' +
                                '<div class="info">' + file.name + '</div>' +
                                '<div class="progress"><span></span></div>' +
                            '</div>'),
                    $img = $li.find('img');
    
                $list.append($li);    // $list为容器jQuery实例
    
                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 50 x 50
                uploader.makeThumb(file, function(error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr('src', src);
                }, thumbnailWidth, thumbnailHeight);
            });
    
            // 文件上传过程中创建进度条实时显示。  uploadProgress事件：上传过程中触发，携带上传进度。 file：文件对象；percentage：传输进度 Nuber：类型
            uploader.on('uploadProgress', function(file, percentage){
                console.log(file);
                console.log(percentage);
                var $li = $('#'+file.id),
                    $percent = $li.find('.progress span');
    
                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<p class="progress"><span></span></p>').appendTo($li).find('span');
                }
                $percent.css('width', percentage * 100 + '%');
            });
    
            // 文件上传成功时候触发，给item添加成功class, 用样式标记上传成功。 file：文件对象，    response：服务器返回数据
            uploader.on('uploadSuccess', function(file,res) {
                $('#'+file.id).addClass('upload-state-done');
                $("#upInfo").html("<font color='red'>"+res._raw+"</font>");
                $successImgList.append('<img class="suc-img-item" src="'+res.realPathList[0]+'">');
            });
    
            // 文件上传失败                                file:文件对象 ， code：出错代码
            uploader.on('uploadError', function(file,code) {
                var $li = $( '#'+file.id ),
                    $error = $li.find('div.error');
    
                // 避免重复创建
                if(!$error.length) {
                    $error = $('<div class="error"></div>').appendTo($li);
                }
                $error.text('上传失败!');
            });
    
            // 不管成功或者失败，文件上传完成时触发。 file： 文件对象
            uploader.on('uploadComplete', function( file ) {
                $('#'+file.id ).find('.progress').remove();
            });
    
            //绑定提交事件
            $("#btn").click(function() {
                console.log("上传...");
                uploader.upload();   //执行手动提交
                console.log("上传成功");
            });
    
        });
    </script>
    </body>
    </html>

![复制代码][copycode.gif]

效果图：

![1048036-20171102191133498-1922857900.jpg][]

### 四、查看文件服务器Tomcat下上传的文件 ###

![1048036-20171102192126201-1387197089.jpg][]

[https_www.cnblogs.com_libo0125ok_p_7773898.html]: https://www.cnblogs.com/libo0125ok/p/7773898.html
[1048036-20171102181110123-1915406525.jpg]: /images/20220522/1bf7871e9f9b4749942ef4b54544b497.png
[1048036-20171102181701482-1233748541.jpg]: /images/20220522/a51849c02a094b32856bc06ada7fd869.png
[1048036-20171102181715107-1169448062.jpg]: /images/20220522/a24bdd49528b413e810b77325baeff85.png
[1048036-20171102181740795-1312674438.jpg]: /images/20220522/99a71d06e66d4b158bc3c6bf1d849166.png
[1048036-20171102182240795-2108932850.jpg]: /images/20220522/d71d71566c8540b4b296f3a0f2a38305.png
[1048036-20171102182801638-45923572.jpg]: /images/20220522/448c8fba9a8a4cdb82f852920ba728a5.png
[1048036-20171102184211638-161647437.jpg]: /images/20220522/591cc0447c484e5a937a14348a6595e4.png
[1048036-20171102183622263-1512326443.jpg]: /images/20220522/7075a10283e5499194d73414b42ca7e8.png
[1048036-20171102183635201-933824105.jpg]: /images/20220522/4be9b3abce714e20813bc70ed8760ab5.png
[copycode.gif]: /images/20220522/4edd091eebb242a5ae17e666f0ce882b.png
[1048036-20171102190238498-401886395.jpg]: /images/20220522/12ee87465d5c4a13a324dc0ac2e2922f.png
[1048036-20171102190537826-1621770988.jpg]: /images/20220522/c7571eb8c3034d828366ec86df4b0ffe.png
[1048036-20171102190738716-1996212041.jpg]: /images/20220522/f2e81b1e248345e389dbc48f65a5db96.png
[1048036-20171102192029295-374699423.jpg]: /images/20220522/8cbb7c39a3934591aa768364fc59b7ef.png
[1048036-20171102191133498-1922857900.jpg]: /images/20220522/d3a23baea88e459d910ba103f61cae4c.png
[1048036-20171102192126201-1387197089.jpg]: /images/20220522/ee01226ef3fd40aea29d0a256ea179c2.png