layui-解决手机调用图片上传出现接口异常的情况

因为项目的需要,使用了layui,但是在调用图片上传的时候,手机端出现调用手机拍照,但是提示图片上传接口异常,度娘了一下,发现将图片压缩上传就可以了,图片上传的大小不超过2M.

function canvasDataURL(file, callback) { //压缩转化为base64

        var reader = new FileReader()

        reader.readAsDataURL(file)

        reader.onload = function (e) {

            const img = new Image()

            const quality = 0.1 // 图像质量

            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

        }));

    }

var uploadListIns3 = upload.render({

          elem: '#uploadBtn3'

          , url: url

          ,data: ''

      ,accept: 'file' //普通文件

      ,acceptMime: 'image/*' //只显示图片 (exts 属性不要设置)

          , multiple: true

          ,size: 1024*8

          ,accept: 'file' //普通文件

          ,acceptMime: 'image/*' //只显示图片 (exts 属性不要设置)

          , 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('上传图片超过2M！')

        } else {

            if (file.size < aafile.size) {

                return obj.upload(index, file)

            }

            obj.upload(index, aafile)

        }

    })

}

          , before: function (obj) {

              //预读本地文件示例，不支持ie8

              obj.preview(function (index, file, result) {

                  $('#prev04').append('')

              });

              layer.load(2, {shade: 0.5,time: 30*1000});

          }

          , done: function (res, imgIndex, upload) {

          }

      });