20200301修改,为了更好的按用户名来重命名图片,所以需要在上传图片的同时传值到后端,用于图片重命名,使用layui上传功能中的
before: function(obj){ this.data.name = $(‘#name’).val(); }
来实现
最近在优化自己的小程序后台,应该有提过我选用的layui作为后台界面前端,这几天碰到一个问题,就是在使用layui来上传图片的时候,直接使用小程序接受图片的PHP文件无法接收保存,layui也提示接口参数异常,折腾了好久,终于搞定了,特来记录分享。
首先是layui图片上传代码HTML部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!--上传图片--> <!--20200301增加,用来上传图片的时候,先读取id为name的input里面的值,一起传到后端--> <div class="layui-form-item"> <label class="layui-form-label">姓名</label> <div class="layui-input-block"> <input id="name" type="text" name="name" required value="" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input" > </div> </div> <div class="layui-form-item"> <label class="layui-form-label">缩略图</label> <div class="layui-input-block"> <div class="layui-upload"> <button type="button" class="layui-btn" id="upimg">上传图片</button> <div class="layui-upload-list"> <img class="layui-upload-img" style="width:200px;" id="imgpreview"> <!--这里的id里面的值要和后面js中的一致,不然无法回显--> <p id="demoText"></p> <input type="text" name="thumb" id="imgsrc" class="layui-input"> </div> </div> </div> </div> |
JS部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
//上传功能 layui.use('upload', function(){ var $ = layui.jquery ,upload = layui.upload; //普通图片上传 var uploadInst = upload.render({ elem: '#upimg' ,url: '你的网址(真实)/imgupload.php?imgpath=artivleimg' ,accept:'images' ,field:'file' ,method:'post' //20200301修改,使用下面的before预加载来取出传值,只能用post,get的方法是另外的代码,目前还没搞懂 ,before: function(obj){ //预读本地文件示例,不支持ie8 // obj.preview(function(index, file, result){ // $('#imgpreview').attr('src', result); //图片链接(base64) // }); this.data.name = $('#name').val(); //20200301增加,用来上传图片的时候,先读取id为name的input里面的值,一起传到后端 } ,done: function(res){ var imgsrc=res.imgsrc; var thumbsrc=res.thumbsrc; document.getElementById("imgsrc").value = imgsrc; document.getElementById("imgpreview").src = thumbsrc; return layer.msg('上传成功'); //如果上传失败 if(res.code > 0){ return layer.msg('上传失败'); } //上传成功 } ,error: function(){ //演示失败状态,并实现重传 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'); demoText.find('.demo-reload').on('click', function(){ uploadInst.upload(); }); } }); }); |
最后是PHP后端部分(在前面的文章基础上,最后的echo替换成如下代码)
1 2 3 4 5 6 7 |
//20200301增加,用来上传图片的时候,接收前端传来的name对应的值,可用来重命名图片,必须是post $name=$_POST['name']; $imgsrc=$imgurl.$imgpath."/".$newfilename; $thumbsrc=$imgurl.$imgpath."/thumb/".$newfilename; $json = json_encode($imgsrc);//把数据转换为JSON数据. echo "{".'"code": 0,'. '"msg": "done",'.'"imgsrc": "'.$imgsrc.'",'.'"thumbsrc": "'.$thumbsrc.'",'. '"data"'.":".$json."}"; //这里一定要有code,msg,$json,不然好像就会报错,就是这个折腾了我好久,新手之郁闷 |
这样,就能上传图片,生成缩略图,然后layui界面里面能浏览缩略图,并得到真实大图的网址,用于你的表单或其他用途。
PHP接受,保存大图和缩略图:https://www.shamqu.cn/wechat-applet-learning-upload-images-to-server.html
最新评论