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

最近Sham在优化自己的小程序后台，应该有提过我选用的layui作为后台界面前端，这几天碰到一个问题，就是在使用layui来上传图片的时候，直接使用小程序接受图片的PHP文件无法接收保存，layui也提示接口参数异常，折腾了好久，终于搞定了，特来记录分享。

首先是layui图片上传代码HTML部分

缩略图

  

      上传图片
      

         
        

        
      
    
  

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('上传失败 重试');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });
});

最后是PHP后端部分

这样，就能上传图片，生成缩略图，然后layui界面里面能浏览缩略图，并得到真实大图的网址，用于你的表单或其他用途

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