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>

</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();
	  });
	}
  });
});

//上传功能

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后端部分（在前面的文章基础上，最后的echo替换成如下代码）

$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，不然好像就会报错，就是这个折腾了我好久，新手之郁闷

$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

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

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

JS部分

最后是PHP后端部分（在前面的文章基础上，最后的echo替换成如下代码）

相关推荐

评论抢沙发

最新评论

热门文章

热门标签

网站统计

如果你觉得文章好，请赏1杯速溶咖啡给Sham吧！

微信扫一扫打赏

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

JS部分

最后是PHP后端部分（在前面的文章基础上，最后的echo替换成如下代码）

相关推荐

评论 抢沙发

最新评论

热门文章

热门标签

网站统计

如果你觉得文章好，请赏1杯速溶咖啡给Sham吧！

微信扫一扫打赏

评论抢沙发