Sham@双目瞿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
最新评论