使用Layui上传图片,手机拍照无法上传原因

是因为手机拍的原图太大 这里做一下压缩即可

原文摘自:https://blog.csdn.net/Jasons_xie/article/details/89204379
html:


js:

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

        //执行实例
        var uploadInst = upload.render({
            elem: '#test1', //绑定元素
            url: 'pic.php', //上传接口
            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 > 5) {//这里可以设置图片的上传最大限制
                        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.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);
            }
        }
    }

    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
        }));
    }

我的后台是php

print_r($_FILES["file"]);即可打印文件

你可能感兴趣的:(php,layui,上传图片,手机端)