layui上传图片&PHP后台接收并返回网址

最近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界面里面能浏览缩略图，并得到真实大图的网址，用于你的表单或其他用途

。我是一个想做码农的行政文员