• layui好用的组件基本使用

    目录

    1.动态菜单的实现

    2. layui from 提交事件

    1.在此介绍一下时间组件 laydate 组件

    3.layer 怎么实现自定义组件

    4.排座与保存下图片的插件介绍

    5.select插件多选演示

    6.签字插件介绍 签字后保存图片

    1.动态菜单的实现

    1.菜单实现代码

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3. <html>
    4. ​
    5. <head>
    6.  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    7.   <title>layout 后台大布局 - Layuititle>
    8.  <%@ include file="common/head.jsp" %>
    9. ​
    10.  
    11. ​
    12.  <style type="text/css">
    13.  /* css:first-child 获取首元素    */
    14.  #fundiv ul li:first-child i{
    15.   display: none;
    16.  }
    17. ​
    18. ​
    19.  style>
    20. head>
    21. <body class="layui-layout-body">
    22. ​
    23. <div class="layui-layout layui-layout-admin">
    24.   <div class="layui-header">
    25.     <div class="layui-logo">layui 后台布局div>
    26.     
    27. ​
    28. ​
    29.     <ul class="layui-nav layui-layout-right">
    30.       <li class="layui-nav-item">
    31.         <a href="javascript:;">
    32.           <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
    33.           贤心
    34.         a>
    35.         <dl class="layui-nav-child">
    36.           <dd><a href="">基本资料a>dd>
    37.           <dd><a href="">安全设置a>dd>
    38.         dl>
    39.       li>
    40.       <li class="layui-nav-item"><a href="">退了a>li>
    41.     ul>
    42. ​
    43.   div>
    44. ​
    45.   <div class="layui-side layui-bg-black">
    46.     <div class="layui-side-scroll">
    47.       
    48.       <ul class="layui-nav layui-nav-tree" id="ullb"  lay-filter="test">
    49.         
    50.       ul>
    51.     div>
    52.   div>
    53. ​
    54. ​
    55.   <div class="layui-body" >
    56.     
    57.     <div style="padding: 15px;">
    58. ​
    59. ​
    60. •    
    61. ​
    62.     <div class="layui-tab " id="fundiv" lay-filter="demo" lay-allowclose="true">
    63. ​
    64.   <ul class="layui-tab-title">
    65.     <li class="layui-this ">主页li>
    66. ​
    67. ​
    68.   ul>
    69. ​
    70.   <div class="layui-tab-content" >
    71.     <div class="layui-tab-item layui-show" >
    72.       1. 我个人比较喜欢卡片风格的，所以你发现又是以卡片的风格举例
    73.       2. 删除功能适用于所有风格
    74.     div>
    75. ​
    76. ​
    77.   div>  
    78. div>             
    79. ​
    80.     div>
    81. ​
    82.   div>
    83. ​
    84.   <div class="layui-footer">
    85.     
    86.     © layui.com - 底部固定区域
    87.   div>
    88. ​
    89. div>
    91. ​
    92. <script>
    93. ​
    94. ​
    95. let element =null;
    96. let $ =null;
    97. let layer =null;
    98. //JavaScript代码区域
    99. layui.use(['element','jquery','layer'], function(){
    100.   //定义需要的元素
    101.   element = layui.element;
    102.   $ = layui.jquery;
    103.   layer=layui.layer;
    104.   //请求菜单数据  map 进行传的值
    105.   $.post("moduleAction.action?methodName=queryModule",{},function(ms){
    106.     
    107. ​
    108.       let nod;
    109.       $.each(ms.data,function(index,value){
    110.           //第一行默认打开  
    111.           let opened=index==0?"layui-nav-itemed":"";
    112.           
    113.           nod=$('
    114. '">
      115. ');
  •  nod.append(''+value.name+'');
  •  
  •  let d2=$('
    '    );
  •  console.log(value.modules)
  •  $.each(value.modules,function(i,v){
  • d2.append('
    name+'\',\''+v.id+'\',\''+v.url+'\') ;">'+v.name+'
    '    );
  • })
  •  nod.append(d2);
  •  //将拼接号的菜单 追加到 ul中
  •  $("#ullb").append(nod);
  • })
  • // console.log(nod)
  •  //刷新ui
  •  element.render("ullb")
  •  //保证是 传过来的数据自动转为json
  • ​
  • },'json')
  • ​
  • });
  • //定义选项卡的方法
  • /**
  • ​
  • * name 选项卡名字
  •   id 选项卡的id 就是数据库菜单id 用于切换选项卡
  • ​
  • */
  • function openFuncTab(name,id,url){
  • let tag=$("li[lay-id="+id+"]").length;
  • if(tag==0){
  • ​
  • element.tabAdd('demo', {
  •        title:name //用于演示
  •        //引入页面
  •       ,content:''
  •       ,id:id //实际使用一般是规定好的id，这里以时间戳模拟下
  •     })
  •   }
  •  
  •  element.tabChange('demo', id); //切换到：用户管理
  • ​
  • ​
  • •
  • ​
  • //调用自适应高度的方法
  • setIframeHeight();
  •  //窗口改变时 自动刷新
  • $(window).resize(function(){
  • setIframeHeight();
  • })
  • ​
  • }
  • //设置自适应高度
  • function setIframeHeight(){
  • //获取最外部 的高度
  • let bodyheig= $(".layui-body").height();
  •  //调整引入的 iframe 的高度
  • $(".myiframe").css("height",bodyheig-85);
  • // console.log(bodyheig)
  • }
  • ​
  • script>
  • body>
  • html>

    • 2.获取动态菜单数据

     

    2. layui from 提交事件

    layui使用原始的from自动提交事件 可能会导致数据丢失 所以我们采用layui给我们提供的提交事件

    1.在此介绍一下时间组件 laydate 组件

    主要功能：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。 模块加载名称：laydate，独立版本：http://www.layui.com/laydate/

    一·基础参数选项 通过核心方法：laydate.render(options) 来设置基础参数，也可以通过方法：laydate.set(options) 来设定全局基础参数. elem - 绑定元素是必填项；用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象 laydate.render({ elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等 });

    二·type - 控件选择类型：用于单独提供不同的选择器类型

    年选择器

    年月选择器

    时间选择器

    日期时间选择器

    三·range - 开启左右面板范围选择 类型：Boolean/String，默认值：false

    如果设置 true，将默认采用 “ - ” 分割。 你也可以直接设置 分割字符。五种选择器类型均支持左右面板的范围选择。

    image.png

    laydate.render({ elem: '#test6' ,range: true }); 四·format - 自定义格式：类型：String，默认值：yyyy-MM-dd；通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：

    //自定义日期格式 laydate.render({ elem: '#test' ,format: 'yyyy年MM月dd日' //可任意组合 }); 五·value - 初始值：类型：String，默认值：new Date() //传入符合format格式的字符给初始值

    laydate.render({ elem: '#test' ,value: '2018-08-18' //必须遵循format参数设定的格式 });

    //传入Date对象给初始值 laydate.render({ elem: '#test' ,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳 }); 六·控件初始打开的回调 控件在打开时触发，回调返回一个参数：初始的日期时间对象 laydate.render({ elem: '#test' ,ready: function(date){ console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0} } }); 七·日期时间被切换后的回调 年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象 laydate.render({ elem: '#test' ,change: function(value, date, endDate){ console.log(value); //得到日期生成的值，如：2017-08-18 console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0} console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。 } }); 八·控件选择完毕后的回调 点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象 laydate.render({ elem: '#test' ,done: function(value, date, endDate){ console.log(value); //得到日期生成的值，如：2017-08-18 console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0} console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。 } }); 九·弹出控件提示 事实上，执行核心方法 laydate.render(options) 会返回一个当前实例对象。其中包含一些成员属性和方法，比如：hint方法 var ins1 = laydate.render({ elem: '#test' ,change: function(value, date, endDate){ ins1.hint(value); //在控件上弹出value值 } }); 十·其他

    2.layui 提交事件

    须知 form是layui中的组件之一 所以使用之前需要放在包裹在 组件中 引入 form 或者 layui.from

     

    1. //提交表单
    2. form.on('submit(meetinginfo)', function(data) {
    3.     console.log(data);
    4.     //获取form提交的时间输入框数据  进行分割
    5.     let dt = data.field.meetingDt;
    6.     let start = dt.split("至")[0].trim();
    7.     let end = dt.split("至")[1].trim();
    8.     //添加属性
    9.     //将时间分别保存下来
    10.     data.field["startTime"] = start;
    11.     data.field["endTime"] = end;
    12.     console.log(data);
    13.   //发送异步请求
    14.     $.ajax({
    15.         url: ctx + '/meetingInfoAction.action?methodName=addMeetingInfo',
    16.         data: data.field,
    17.         type: 'post',
    18.         dataType: 'json',
    19.         success: function(resp) {
    20.               //判断是否成功
    21.             if(resp.code==0){
    22.             layer.msg(resp.msg,{icon:1});
    23.  
    24.             }else{
    25.                 layer.msg(resp.msg,{icon:5})
    26.             }
    27.         }
    28.     })
    29.     return false;
    30. });

    3.layer 怎么实现自定义组件

    首先编写 引入文件 config文件 ⬇

    1. layui.config({
    2.     base : 'static/js/module/' // 假设这是test.js所在的目录
    3. }).extend({ // 设定模块别名
    4.     test : 'test' // 如果test.js是在根目录，也可以不用设定别名
    5. });`

    在编写自己需要的组件

    1. layui.define(function(exports) {
    2.     var obj = {
    3.         hello : function(str) {
    4.             alert('Hello ' + (str || 'test'));
    5.         },
    6.         hello02: function(str) {
    7.             alert('Hello02 ' + (str || 'test'));
    8.         }
    9.     };
    10. ​
    11.     // 输出test接口
    12.     exports('test', obj);
    13. });
    ​

    目录结构

     

    最后引入组件 进行使用

     查看一下效果

    4.排座与保存下图片的插件介绍

    1,排座源代码 需要自己添加一个桌位图

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3. html>
    4. <html>
    5. <head>
    6. <base href="${pageContext.request.contextPath }/static/"/>
    7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    8. <link href="js/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    9. <script type="text/javascript" src="js/jquery/jquery-3.3.1.min.js">script>
    10. <script type="text/javascript" src="js/layui/layui.js">script>
    11. <script type="text/javascript" src="js/html2canvas/html2canvas.js">script>
    12. <title>会议座位安排title>
    13. head>
    14. <style type="text/css">
    15. * {
    16.     padding: 0;
    17.     margin: 0;
    18. }
    19. ​
    20.         
    21. body {
    22.     width: 100%;
    23.     height: 100%;
    24.     /* background: red; */
    25. }
    26. ​
    27. ​
    28. .tips {
    29.     /* position: absolute; */
    30.     background: #eee;
    31.     display: inline-block;
    32.     height: 60px;
    33.     /* width: 60px; */
    34.     line-height: 60px;
    35.     text-align: center;
    36.     margin: 5px;
    37.     padding: 0 10px;
    38. }
    39. ​
    40. .add {
    41.     position: fixed;
    42.     right: 10px;
    43.     top: 10px;
    44.     display:inline;
    45. }
    46. ​
    47. #tu {
    48.     width: 100%;
    49.     height: 100%;
    50.     /* background: lightblue; */
    51.     /*background: url('u=3318199716,2583790385&fm=26&gp=0.jpg');*/
    52. }
    53. .layui-input{
    54.     height:30px;
    55. }
    56. style>
    57. <body id="screen_body">
    58.     <div id="tu">div>
    59.     
    60.     <div class="add">
    61.         <div style="display:inline-block;">
    62.             <input id="dan_input" type="text" value="" class="layui-input">
    63.         div>
    64.         <div style="display:inline-block;">
    65.             <button onclick="return addDanMu()" class="layui-btn layui-btn-sm">添加座位button><input id="jie_input" type="button" class="layui-btn layui-btn-sm" value='确定'>
    66.         div>
    67.     div>
    68. body>
    69. <script type="text/javascript">
    70. var $id = function(id) {
    71.     return document.getElementById(id);
    72. }
    73. //会议排座拖拽
    74. var dragF = {
    75.     locked: false,
    76.     lastObj: undefined,
    77.     drag: function(obj) {
    78.         $id(obj).onmousedown = function(e) {
    79.             var e = e ? e : window.event;
    80.             if (!window.event) {
    81.                 e.preventDefault();
    82.             } /* 阻止标注浏览器下拖动a,img的默认事件 */
    83.             dragF.locked = true;
    84.             $id(obj).style.position = "absolute";
    85.             $id(obj).style.zIndex = "100";
    86.             if (dragF.lastObj && dragF.lastObj != $id(obj)) { /* 多元素拖动需要恢复上次元素状态 */
    87.                 dragF.lastObj.style.zIndex = "1";
    88.             }
    89. ​
    90.             dragF.lastObj = $id(obj);
    91.             var tempX = $id(obj).offsetLeft;
    92.             var tempY = $id(obj).offsetTop;
    93. ​
    94.             dragF.x = e.clientX;
    95.             dragF.y = e.clientY;
    96.             document.onmousemove = function(e) {
    97.                 var e = e ? e : window.event;
    98.                 if (dragF.locked == false) return false;
    99.                 $id(obj).style.left = tempX + e.clientX - dragF.x + "px";
    100.                 $id(obj).style.top = tempY + e.clientY - dragF.y + "px";
    101.                 if (window.event) {
    102.                     e.returnValue = false;
    103.                 } /* 阻止ie下a,img的默认事件 */
    104. ​
    105.             }
    106. ​
    107.             document.onmouseup = function() {
    108.                 dragF.locked = false;
    109.             }
    110.         }
    111.     }
    112. }
    113. script>
    114. ​
    115. <script type="text/javascript">
    116. var layer;
    117. layui.use(['layer'],function(){
    118. ​
    119.     layer=layui.layer;
    120. ​
    121.     //TODO 初始化会议排座：根据会议ID获取参会的所有人员的名字（主持人+参会人+列席人）
    122.     arrangeSeat();
    123.     
    124.     //绘制会议排座图片
    125.     $("#jie_input").on("click", function(event) {
    126.         $('.add').hide();
    127.         event.preventDefault();
    128.         html2canvas(document.getElementById("screen_body")).then(function(canvas) {
    129.             var dataUrl = canvas.toDataURL();
    130.             //console.log(dataUrl);
    131.             var param = {};
    132.             param['seatPic'] = dataUrl;
    133.             param['id'] = '${param.id}';
    134.             //console.log(param);
    135.             
    136.             //TODO 此处需要完成会议排座图片上传操作
    137.             $.ajax({
    138.                 //此处保存的是base64 数据 需要转换成图片
    139.                 url: '../meetingInfoAction.action?methodName=addArrangeSeat',
    140.                 data: param,
    141.                 type: 'post',
    142.                 dataType: 'json',
    143.                 success: function(resp) {
    144. ​
    145.                     if(resp.code == 0) {
    146.                          layer.msg("保存成功！",{icon: 1},function (){
    147. ​
    148.                         //先得到当前iframe层的索引
    149.                         var index = parent.layer.getFrameIndex(window.name);
    150. ​
    151.                         //再执行关闭
    152.                         parent.layer.close(index);
    153.                         //调用父窗口的查询方法更新数据
    154. ​
    155.                         //parent.loadMeetingInfo();
    156. ​
    157.                          })
    158.                     }else{
    159.                         layer.msg(resp.msg);
    160.                     }
    161.                 }
    162.             })
    163.         });
    164.     });
    165. });
    166. ​
    167. ​
    168. //初始化排座人员信息
    169. //默认加载坐席人员
    170. function arrangeSeat() {
    171.     $.ajax({
    172.         url: "../meetingInfoAction.action?methodName=listUsersMeetingInfo",
    173.         data: {
    174.             id: '${param.id}'
    175.         },
    176.         type: 'get',
    177.         dataType: 'json',
    178.         success: function(resp) {
    179.             //console.log(resp);
    180.             $.each(resp.data, function(i,v) {
    181.                 $("#dan_input").val(v.name);
    182.                 addDanMu();
    183.             });
    184.         }
    185.     });
    186. }
    187. ​
    188. //添加会议排座
    189. function addDanMu() {
    190.     var dan = document.getElementById("dan_input").value;
    191.     if (dan == "") {
    192.         layer.msg('请输入弹幕~', {icon: 4});
    193.         //alert("请输入弹幕~");
    194.         return false;
    195.     } else {
    196.         document.getElementById("dan_input").value = ""; //清空 弹幕输入框
    197.         // var br = document.createElement("BR");  // 
    198.         var node = document.createElement("DIV"); // 
    199.         var tipsArr = document.getElementsByClassName('tips');
    200.         var i;
    201.         // console.log(parseInt(tipsArr[tipsArr.length-1].id.substr(4))+1);
    202.         if (tipsArr.length == 0) {
    203.             i = 1
    204.         } else {
    205. ​
    206.             i = parseInt(tipsArr[tipsArr.length - 1].id.substr(4)) + 1;
    207.         }
    208.         // var aNode = document.createElement("P");   // 
    209.         node.setAttribute("class", "tips");
    210.         node.setAttribute("id", "tips" + i);
    211.         node.setAttribute("onmouseover", "dragF.drag('tips" + i + "');");
    212.         var textnode = document.createTextNode(dan); // 创建个 文本节点， 将用户输入的弹幕，存入 创建的 元素节点 
        中
    213.         // aNode.appendChild(textnode);
    214.         node.appendChild(textnode);
    215.         // document.body.appendChild(br);
    216.         // document.body.appendChild(node);
    217. ​
    218.         document.getElementById("tu").appendChild(node);
    219.         return true;
    220.     }
    221. }
    222. //下载
    223. /* function downloadFile(fileName, content) {
    224.     let aLink = document.createElement('a');
    225.     let blob = this.base64ToBlob(content); //new Blob([content]);
    226. ​
    227.     let evt = document.createEvent("HTMLEvents");
    228.     evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
    229.     aLink.download = fileName;
    230.     aLink.href = URL.createObjectURL(blob);
    231. ​
    232.     // aLink.dispatchEvent(evt);
    233.     //aLink.click()
    234.     aLink.dispatchEvent(new MouseEvent('click', {
    235.         bubbles: true,
    236.         cancelable: true,
    237.         view: window
    238.     })); //兼容火狐
    239. } */
    240. //base64转blob
    241. /* function base64ToBlob(code) {
    242.     let parts = code.split(';base64,');
    243.     let contentType = parts[0].split(':')[1];
    244.     let raw = window.atob(parts[1]);
    245.     let rawLength = raw.length;
    246. ​
    247.     let uInt8Array = new Uint8Array(rawLength);
    248. ​
    249.     for (let i = 0; i < rawLength; ++i) {
    250.         uInt8Array[i] = raw.charCodeAt(i);
    251.     }
    252.     return new Blob([uInt8Array], {
    253.         type: contentType
    254.     });
    255. } */
    256.     script>
    257. html>
    258. 2.将base64转为图片文件方法 java
    259.  
    260. //base64字符串转化成图片
    261. public static boolean GenerateImage(String imgStr)
    262. {   //对字节数组字符串进行Base64解码并生成图片
    263.     if (imgStr == null) //图像数据为空
    264.         return false;
    265.     BASE64Decoder decoder = new BASE64Decoder();
    266.     try
    267.     {
    268.         //Base64解码
    269.         byte[] b = decoder.decodeBuffer(imgStr);
    270.         for(int i=0;i
    271.         {
    272.             if(b[i]<0)
    273.             {//调整异常数据
    274.                 b[i]+=256;
    275.             }
    276.         }
    277.         //生成jpeg图片
    278.         String imgFilePath = "D:\\课件与作业\\作业\\1.jpg";//新生成的图片
    279.         OutputStream out = new FileOutputStream(imgFilePath);
    280.         out.write(b);
    281.         out.flush();
    282.         out.close();
    283.         return true;
    284.     }
    285.     catch (Exception e)
    286.     {
    287.         e.printStackTrace();
    288.         return false;
    289.     }
    290. }

    5.select插件多选演示

    formSelects-v4.js 基于Layui的多选解决方案

    文档地址分享 ↓

    formSelects 基于Layui的多选解决方案 (hnzzmsf.github.io)

    效果图：

     

     

    6.签字插件介绍 签字后保存图片

    效果演示 保存后像后天发送base64数据

    签字前端代码实现

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3. html>
    4. <html>
    5. <head>
    6. <%@include file="/common/head.jsp" %>
    7. <link rel="stylesheet" type="text/css" href="${ctx}/static/js/sign/css/www.jsdaima.com.css">
    8. <link rel="stylesheet" type="text/css" href="${ctx}/static/js/sign/font/iconfont.css">
    9. <script type="text/javascript" src="${ctx}/static/js/sign/layui-sign.js">script>
    10. ​
    11. head>
    12. <style>
    13. body{
    14.     margin:5px;
    15. }
    16. style>
    17. <script>
    18. layui.use(['form'], function() {
    19.     let form = layui.form;
    20.     //根据用户选择的会议记录填写会议标题及会议内容 此处可越过
    21.     form.val('audit', $.extend({}, parent.row||{}));
    22. });
    23. ​
    24.  
    25. //获取签字图片数据
    26. function getData() {
    27.     return document.getElementById("canvas").toDataURL("image/png");
    28. }
    29. script>
    30. <body>
    31. <div style="padding:10px 20px 10px 10px;">
    32.     <form class="layui-form layui-form-pane" lay-filter="audit">
    33.         <input type="hidden" id="id" name="id"/>
    34.         <input type="hidden" id="auditor" value="${sessionScope.user.id }"/>
    35.         <div class="layui-form-item">
    36.             <label class="layui-form-label">会议标题label>
    37.             <div class="layui-input-block">
    38.                <input type="text" name="title" autocomplete="off" class="layui-input" readonly="readonly">
    39.             div>
    40.         div>
    41.         <div class="layui-form-item layui-form-text">
    42.             <label class="layui-form-label">会议内容label>
    43.             <div class="layui-input-block">
    44.               <textarea placeholder="请输入内容" name="content" class="layui-textarea" readonly="readonly">textarea>
    45.             div>
    46.         div>
    47. ​
    48.         <div class="canvasBox">
    49.             <div class="contro">
    50.                 <ul class="drawType">               
    51.                     <li data-name="pen" data-nameNum="0">
    52.                         <span class="icon iconfont icon-qianbi">span>
    53.                         <span class="iconAlert">铅笔span>
    54.                     li>       
    55.                                            
    56.                     
    57.                     <li class="remote">
    58.                         <span class="icon iconfont icon-delete">span>
    59.                         <span class="iconAlert">清空span>
    60.                     li>               
    61.                 ul>           
    62.             div>
    63.             <div class="canvasDraw">
    64.                 <div class="drawFont" data-type="hide">
    65.                     <span class="intoFont">span>
    66.                     <input type="text" class="intoFontInput">
    67.                 div>
    68.                 
    69.                 <canvas id="canvas" width="624" height="150">canvas>          
    70.             div>      
    71.         div>
    72.         
    73.         <div class="layui-form-item" style="text-align:center;">
    74.            <button type="button" lay-submit="audit" lay-filter="user" class="layui-btn layui-btn-normal">审核button>
    75.            <button type="reset" class="layui-btn">重置button>
    76.         div>
    77.     form>
    78. div>
    79. body>
    80. html>

    获取的数据发送至后台 使用上面给的base64方法可解析成图片

  • 相关阅读:
    buuctf [BJDCTF2020]Easy MD5
    React使用create-react-app创建react项目
    数据结构【红黑树模拟实现】
    Vue3中的常用组件通信大总结 包括最Vue3.4defineModel()实现组件双向绑定
    如何训练神经网络模型,神经网络模型是干嘛的
    【Torch】torch.load( )系列语句解读解读,易学易用
    文本关键信息抽取-面向复杂文本结构的实体关系联合抽取研究（论文研读）（二）
    第46节——redux中使用不可变数据+封装immer中间件——了解
    rsync远程同步
    【算法|动态规划No.22】leetcode115. 不同的子序列
  • 原文地址：https://blog.csdn.net/qq_62898618/article/details/126364497