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

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