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

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

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

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

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"]);即可打印文件
### 回答1: 答:``` <!DOCTYPE html> <html> <head> <title>Layui上传图片到七牛云</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css"> </head> <body> <div class="layui-upload"> <button type="button" class="layui-btn" id="upload">上传图片</button> <div class="layui-upload-list"> <img class="layui-upload-img" id="demo1"> <p id="demoText"></p> </div> </div> <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script> <script src="https://cdn.staticfile.org/qiniu-js/1.0.15/qiniu.min.js"></script> <script> //获取七牛上传凭证 $.get("你的获取七牛上传凭证接口", function (data) { var token = data.token; var config = { useCdnDomain: true, region: qiniu.region.z2 }; var putExtra = { fname: "", params: {}, mimeType: ["image/png", "image/jpeg", "image/gif"] }; var observer = { next(res){ console.log(res) }, error(err){ console.log(err) }, complete(res){ console.log(res); } } var observable = qiniu.upload(file, key, token, putExtra, config); var subscription = observable.subscribe(observer); // 上传开始 //取消上传 //subscription.unsubscribe(); }); </script> </body> </html> ``` ### 回答2: 使用Layui和七牛云上传图片的代码如下: 首先,确保在页面中引入Layui和七牛云SDK的相关文件: ```html <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css"> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script> <script src="https://cdn.staticfile.org/qiniu-js/1.0.23/qiniu.min.js"></script> ``` 然后,在HTML中创建一个用于上传图片的按钮和一个用于显示图片预览的区域: ```html <input type="file" name="image" id="upload"> <div id="preview"></div> <button class="layui-btn" lay-submit lay-filter="upload">上传图片</button> ``` 接下来,在JavaScript中编写Layui的代码,包括上传图片和显示预览图片的逻辑: ```javascript layui.use(['form'], function(){ var form = layui.form; // 初始化七牛云的参数 var uploader = Qiniu.uploader({ runtimes: 'html5', browse_button: 'upload', uptoken_url: '/your/uptoken/url', // 请求服务器获取上传凭证的URL domain: 'http://your-qiniu-domain.com', // 七牛云的空间域名 get_new_uptoken: false, auto_start: false, unique_names: true, filters: { mime_types: [ {title: "Image files", extensions: "jpg,jpeg,png"} ] }, init: { FileUploaded: function(up, file, info) { // 上传完成后,将图片的URL添加到预览区域 var imageUrl = up.getOption('domain') + '/' + file.name; $('#preview').append('<img src="' + imageUrl + '">'); } } }); // 监听上传按钮的点击事件 form.on('submit(upload)', function(){ // 清空预览区域的内容 $('#preview').empty(); // 开始上传图片 uploader.start(); // 阻止表单的默认提交行为 return false; }); }); ``` 其中,`uptoken_url`是服务器端用于获取上传凭证的接口URL,需要根据实际情况进行配置。 通过以上代码,当用户选择图片文件并点击上传按钮时,会将图片上传到七牛云,并将上传完成后的图片在预览区域进行显示。 ### 回答3: 使用 layui 上传图片到七牛云的代码如下: HTML部分: ```html <div class="layui-upload"> <button type="button" class="layui-btn" id="upload">上传图片</button> <input type="hidden" id="qiniuToken" value="" /> <input type="hidden" id="qiniuDomain" value="" /> <div class="layui-upload-list"> <img class="layui-upload-img" id="uploadImage"> <p id="uploadText"></p> </div> </div> ``` JavaScript部分: ```javascript layui.use('upload', function(){ var upload = layui.upload; // 初始化七牛云参数 var qiniuToken = ''; // 七牛云上传凭证 var qiniuDomain = ''; // 七牛云上传域名 // 获取七牛云上传凭证和域名 // 这一部分需要在后端获取,并且将值填入上面的两个变量 // 创建上传实例 var uploadInst = upload.render({ elem: '#upload', // 上传按钮的id url: qiniuDomain, // 七牛云上传域名 headers: { 'Authorization': 'UpToken ' + qiniuToken // 添加七牛云上传凭证 }, done: function(res){ // 上传完毕回调 console.log(res); if(res.code === 0){ $('#uploadImage').attr('src', res.data.src); // 将上传成功的图片显示在页面上 $('#uploadText').text('上传成功'); } else { $('#uploadText').text('上传失败'); } }, error: function(){ // 请求异常回调 $('#uploadText').text('上传失败'); } }); }); ``` 这是一个使用 layui 框架的图片上传功能,使用layuiupload 模块来实现图片上传功能。首先需要在 HTML 中设置上传按钮的id,然后引入 layuiupload 模块并初始化实例。在 JavaScript 部分,我们通过获取七牛云的上传凭证和域名,将其填入相应的变量中。然后在创建上传实例时,设置上传按钮的id、七牛云上传域名和上传凭证等参数,以及上传成功和失败的回调函数用于处理上传结果。上传按钮被点击后,会触发上传操作,上传成功后通过回调函数将上传成功的图片显示在页面上。 以上代码仅为示例,需要根据具体的七牛云配置进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值