使用Layui上传图片，并进行压缩

在工作中使用到layui，发现其上传功能并不是很适用于自己的项目。故此，借用其上传功能，自己将图片压缩并上传.

Layui 上传图片官方文档：www.layui.com/doc/modules…

HTML：

<button type="button" class="layui-btn" id="test1">
  <i class="layui-icon">&#xe67c;</i>上传图片
</button>复制代码

tips:不一定非要是input标签，无论是什么标签，layui upload是根据其 id 值进行操作的

JS：

<script>
//使用layui上传图片
  layui.use('upload', function () {
    var upload = layui.upload;
    var layer = layui.layer;

    //执行实例
    var uploadInst = upload.render({
      elem: '#isTest', //绑定元素
      url: '/upload/', //上传接口
      accept: 'images',
      auto: false,

      choose: function (obj) { //选择文件后的回调
        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 (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1]
            .replace(/[ ]/g, "").replace("MSIE", "")) < 9) {
          return obj.upload(index, file)
        }
        canvasDataURL(file, function (blob) {
          var aafile = new File([blob], file.name, {
            type: file.type
          })
          var isLt1M;
          if (file.size < aafile.size) {
            isLt1M = file.size
          } else {
            isLt1M = aafile.size
          }

          if (isLt1M / 1024 / 1024 > 2) {
            return layer.alert('上传图片过大！')
          } else {
            if (file.size < aafile.size) {
              return obj.upload(index, file)
            }
            obj.upload(index, aafile)
          }
        })
      },
      done: function (res) {
        //上传完毕回调
      },
      error: function () {
        //请求异常回调
      }
    });
  });

  function canvasDataURL(file, callback) { //压缩转化为base64
    var reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = function (e) {
      const img = new Image()
      const quality = 0.8 // 图像质量
      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);
      }
    }
  }

  function convertBase64UrlToBlob(urlData, callback) { //将base64转化为文件格式
    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
    }));
  }

</script>复制代码

转载于:https://juejin.im/post/5cf9bb53f265da1bd04ed14b