thymeleaf 图片转base64以及base64转缩略图

       技术源于探索和积累消化，我是个菜鸟，但是这个问题找了一遍没有一个比较完整的解答，今天简单叙述一下，留个底稿，不足之处，望各位大佬指出。

    需求：首先新增的时候需要图片转base64，后面查询列表的时候可以根据base64转缩略图。

     图片转base64

    首先需要一个图片转base64这个很多，拿来用即可。放个代码（关爱小白，用到全贴）。

        <div class="form-group">    
                <label class="col-sm-3 control-label">上传图片：</label>
                <div class="col-sm-8">
                    <input id="image" name="image"  type="file" accept="image/*" οnchange="changeFile(event)">
                </div>
            </div>

 

 function changeFile(event) {
                file = event.target.files[0];
                var f_size = event.target.files[0].size/1024/1024; //文件大小
                  if(f_size > 2){
                        alert("图片太大(2M以内)，请重新上传",'确定');
                        return false;
                    }else {
                
                var a = new FileReader();
                a.onload = function (e) {
                    var base64Str = e.target.result;//获取base64
                    var base64Code= base64Str.substring(base64Str.indexOf(',')+1);
                    //下面是测试得到的base64串能否正常使用：
                       $("#pictureImageContentBase64").text(base64Code);
                }
                a.readAsDataURL(file);
            }
            }

注意点1：事件要放到上传上，要不然取到的base64会有问题（曾经nc似的，试过了直接写事件，不是写在上传上，结果。。。可以试一下，有惊喜，哈哈）

注意点2：数据库字段的类型

TEXT最大长度为65535(2^16-1)个字符。MEDIUMTEXT，最大长度为16777215(2^24-1)个字符。LONGTEXT，最大长度为4294967295(2^32-1)个字符。TEXT 65,535 bytes ~64kb，MEDIUMTEXT 16,777,215 bytes ~16Mb，LONGTEXT ,294,967,295 bytes ~4Gb ，对应图片大小。这样就ok了，直接导入。

这就获得你想要的码了

      base64转缩略图

其实这个很简单，但是thymeleaf封装的东西不熟悉，搞得浪费了很多时间。

{
                    field : 'pictureImageContentBase64', 
                    title : '图片缩略图',
                     formatter: function(value, row, index) {
                         var actions=[];
                         actions.push('<img width="54" height="72" src='+'data:image/png;base64,'+value+ '>');
                            return actions.join('');
                        }
                    
                },

这是thymeleaf下面的列表，加上这个就行了。

这是效果图（ps：有一个是我前女友的前男神。）

这样就完整的解决了这个问题，其实不是很复杂，问题的卡顿在于不熟悉thymeleaf，teamleader选了这个框架，其实他也不是很熟悉这个框架（嘘，小心点吐槽），当图片出现的那一刻，满心欢喜，可能这就是每个程序员的光辉时刻。