最近Sham在优化自己的小程序后台，应该有提过我选用的layui作为后台界面前端，这几天碰到一个问题，就是在使用layui来上传图片的时候，直接使用小程序接受图片的PHP文件无法接收保存，layui也提示接口参数异常，折腾了好久，终于搞定了，特来记录分享。
首先是layui图片上传代码HTML部分
<!--上传图片--><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部分
//上传功能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:'get',before: function(obj){//预读本地文件示例，不支持ie8// obj.preview(function(index, file, result){// $('#imgpreview').attr('src', result); //图片链接（base64）// });},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后端部分
<?php$imgurl="https://你存放图片的网址/";// 允许上传的图片后缀$allowedExts = array("gif", "jpeg", "jpg", "png");$temp = explode(".", $_FILES["file"]["name"]);// echo $_FILES["file"]["size"];$extension = end($temp); // 获取文件后缀名if ((($_FILES["file"]["type"] == "image/gif")|| ($_FILES["file"]["type"] == "image/jpeg")|| ($_FILES["file"]["type"] == "image/jpg")|| ($_FILES["file"]["type"] == "image/pjpeg")|| ($_FILES["file"]["type"] == "image/x-png")|| ($_FILES["file"]["type"] == "image/png"))&& ($_FILES["file"]["size"] < 20480000) // 小于 20M，这个自己限制&& in_array($extension, $allowedExts)){$imgpath=$_GET['imgpath']; //获取传来的图片分类，用于在服务器上分类存放$code = $_FILES['file'];//获取小程序传来的图片$uploaded_file=$_FILES['file']['tmp_name']; $user_path=$_SERVER['DOCUMENT_ROOT'].$imgpath; //放到服务器下指定的文件夹if(file_exists($user_path)){}else{mkdir($user_path,0777);}$size=$_FILES["file"]["size"];$date=date('Ymd'); //得到当前时间$newfilename=$date.'-'.$size.'.'.$extension; //得到一个新的文件名,可根据自己需求设定，sham用的时间加上图片文件大小来命名$move_to_file=$user_path."/".$newfilename; $file_true_name=$imgurl.$imgpath."/".$newfilename;//echo $file_true_name;$filename = json_encode($file_true_name);//把数据转换为JSON数据.// echo $move_to_file;move_uploaded_file($uploaded_file,iconv("utf-8","gb2312",$move_to_file));//下面的代码是用来生成缩略图的$thump = $user_path."/thumb/"; //这个缩略图文件夹地址自己设置，这个是在原图文件夹里面增加1个子目录thumb用于存放缩略图if(file_exists($thump)){}else{mkdir($thump,0777);}$imgs = $newfilename;$imgss=$user_path."/".$imgs;$img_arr = getimagesize($imgss);$pecent = $img_arr[0]/$img_arr[1];$width = 200; //这里是缩略图的尺寸，自行设置$height = 200/$pecent;//下面是根据不同图片后缀，执行不同的图片生成代码if($_FILES["file"]["type"] == "image/png"){$img_in = imagecreatefrompng($imgss);}elseif($_FILES["file"]["type"] == "image/jpg" || $_FILES["file"]["type"] == "image/jpeg" || $_FILES["file"]["type"] == "image/pjpeg"){$img_in = imagecreatefromjpeg($imgss);}elseif($_FILES["file"]["type"] == "image/gif"){$img_in = imagecreatefromgif($imgss);}$img_out = imagecreatetruecolor($width, $height);imagecopyresampled($img_out, $img_in, 0, 0, 0, 0, $width, $height, $img_arr[0], $img_arr[1]);imagejpeg($img_out,$thump.$imgs,100);imagedestroy($img_out);imagedestroy($img_in);$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，不然好像就会报错，就是这个折腾了我好久，新手之郁闷}else{echo "上传错误";} ?>
这样，就能上传图片，生成缩略图，然后layui界面里面能浏览缩略图，并得到真实大图的网址，用于你的表单或其他用途
。我是一个想做码农的行政文员
如果觉得《layui上传图片PHP后台接收并返回网址》对你有帮助，请点赞、收藏，并留下你的观点哦！
