Layui 图片上传压缩 单选及多选

layui图片上传压缩 单选以及多选

提示：obj.upload(index, aafile)针对单个文件上传

---

一、页面显示

<div class="layuimini-container">
        <div class="layuimini-main" id="autoHtml">
            <div class="layui-form layuimini-form" lay-filter="submitForm">
                <div class="layui-row">
                    <div class="layui-col-md12">
                        <button type="button" class="layui-btn" id="upload">上传图片</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图：
                            <div class="layui-upload-list image-box" id="preview"></div>
                        </blockquote>
                    </div>
                </div>
                <div id="submitButton" class="layui-row">
                    <div class="layui-col-md12">
                        <div class="layui-input-block"><button class="layui-btn layui-btn-normal " id="save" lay-submit lay-filter="saveBtn">确认保存</button></div>
                    </div>
                </div>
            </div>

        </div>
    </div>

二、图片压缩

压缩转化为base64

	/**
	*压缩转化为base64
	*/
   function canvasDataURL(file, callback) { 
      var reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = function(e) {
         const img = new Image()
         const quality = 0.5 // 图像质量
         const canvas = document.createElement('canvas')
         const drawer = canvas.getContext('2d')
         img.src = this.result；
         img.onload = function() {
             canvas.width = img.width
             canvas.height = img.height
             drawer.drawImage(img, 0, 0, canvas.width, canvas.height)
             convertBase64UrlToBlob(canvas.toDataURL(file.type, quality),callback);        
             
             }
         }
   }

将base64转化为文件格式

function convertBase64UrlToBlob(urlData, callback) { 
                const arr = urlData.split(',')
                const mime = arr[0].match(/:(.*?);/)[1]
                const bstr = atob(arr[1])
                let n = bstr.length
                const u8arr = new Uint8Array(n)
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n)
                }
                callback(new Blob([u8arr], {
                    type: mime
                }));
            }

三、upload单选

说明：单选上传时，由于layui框架里的upload特性，每次选择图片时，obj.pushFile()方法获取图片是一直叠加，如果需要对图片进行加工重新上传时，每次都需要删除前一次上传图片的内容

upload.render({
    elem: '#upload',
    url: url //存放自己需要上传图片的路径
    headers: {
         token: token
     },
     method: 'POST',
     auto: false,
     choose: function(obj) {
       //预读本地文件示例，不支持ie8
       obj.preview(function(index, file, result) {
           var html = '<div class="img-content" id="content-' + index + '">';
           html += '<input type="hidden" name="paths[]" id="path-' + index + '">'
           html += '<img src="' + result + '" alt="' + file.name + '" class="img-100" id="img-' + index + '">';
           html += '<div style="width: 95px; margin:1px auto 0px; "><div class="layui-progress " lay-showpercent="yes" lay-filter="progress-' + index + '"> <div class="layui-progress-bar" lay-percent=""></div></div></div>';
           html += '<div class="img-cancel" id="cancel-' + index + '">x</div>';
           html += '</div>';
           $('#preview').html(html);
           //点击图片放大
           $('body').on('click', '#img-' + index, function(e) {
               layer.open({
                   type: 1,
                   title: false,
                   closeBtn: 1,
                   shadeClose: true,
                   area: ['500px', 'auto'],
                   content: "<img src=" + result + " />"
               });
           });
       });
       var files = obj.pushFile();//获取上传文件对象
       var filesArry = [];
       for (var key in files) { //将上传的文件转为数组形式
         filesArry.push(files[key])
       }
       var index = filesArry.length - 1;
       var file = filesArry[index]; //获取最后选择的图片
       if (file.size > 200 * 1024) {
           canvasDataURL(file, function(blob) {
             var aafile = new File([blob], file.name, {
                  type: file.type
              })
             obj.upload(index, aafile)
            })
        } else {
            obj.upload(index, file)
       }
    },
    done: function(res, index, upload) {
        if (res.code == 200) {
            $("#path-" + index).attr("value", res.data.avatar)
            //删除按钮
            $('body').on('click', '#cancel-' + index, function() {
                $("#content-" + index).remove();
            });

        } else {
            $("#content-" + index).remove();
        }

    },
   progress: function(n, elem, res, index) {

       if (n == 100) {
           layer.msg('上传完毕', {
               icon: 1
           });
       }
       element.progress('progress-' + index, '100%'); //进度条复位
   },
   error: function(index, upload) {
       $("#content-" + index).remove();
   }
 })

四、 upload多选

代码如下（示例）：

var selectArr=[];
upload.render({
    elem: '#upload',
    url: url //存放自己需要上传图片的路径
    headers: {
         token: token
     },
     method: 'POST',
     auto: false,
     choose: function(obj) {
       //预读本地文件示例，不支持ie8
       obj.preview(function(index, file, result) {
           var html = '<div class="img-content" id="content-' + index + '">';
           html += '<input type="hidden" name="paths[]" id="path-' + index + '">'
           html += '<img src="' + result + '" alt="' + file.name + '" class="img-100" id="img-' + index + '">';
           html += '<div style="width: 95px; margin:1px auto 0px; "><div class="layui-progress " lay-showpercent="yes" lay-filter="progress-' + index + '"> <div class="layui-progress-bar" lay-percent=""></div></div></div>';
           html += '<div class="img-cancel" id="cancel-' + index + '">x</div>';
           html += '</div>';
           $('#preview').append(html);
           //点击图片放大
           $('body').on('click', '#img-' + index, function(e) {
               layer.open({
                   type: 1,
                   title: false,
                   closeBtn: 1,
                   shadeClose: true,
                   area: ['500px', 'auto'],
                   content: "<img src=" + result + " />"
               });
           });
       });
       var files = obj.pushFile();
       var index, file, indexArr = [];

       //删除重复 selectArr 需要设置为全局参数并且不放在choose方法里
       for (let i = 0; i < selectArr.length; i++) {
          delete files[selectArr[i]];
       }
       //将index存放到数组中
       for (index in files) {
          indexArr.push(index);
       }
       for (let i = 0; i < indexArr.length; i++) {
          let file = files[indexArr[i]];

          if (file.size > 200 * 1024) {

              canvasDataURL(file, function(blob) {
                  var aafile = new File([blob], file.name, {
                      type: file.type
                  })

                  obj.upload(indexArr[i], aafile)
              })
          } else {
              obj.upload(indexArr[i], file)
          }

          selectArr.push(indexArr[i]);
       }
    },
    done: function(res, index, upload) {
        if (res.code == 200) {
            $("#path-" + index).attr("value", res.data.avatar)
            //删除按钮
            $('body').on('click', '#cancel-' + index, function() {
                $("#content-" + index).remove();
            });

        } else {
            $("#content-" + index).remove();
        }

    },
   progress: function(n, elem, res, index) {

       if (n == 100) {
           layer.msg('上传完毕', {
               icon: 1
           });
       }
       element.progress('progress-' + index, '100%'); //进度条复位
   },
   error: function(index, upload) {
       $("#content-" + index).remove();
   }
 })

参考 ：
Layui 上传图片官方文档：https://www.layui.com/doc/modules/upload.html