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

20200301修改，为了更好的按用户名来重命名图片，所以需要在上传图片的同时传值到后端，用于图片重命名，使用layui上传功能中的

before: function(obj){ this.data.name = $(‘#name’).val(); }

来实现

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

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

<!--上传图片-->
<!--20200301增加，用来上传图片的时候，先读取id为name的input里面的值，一起传到后端-->
<div class="layui-form-item">
  <label class="layui-form-label">姓名</label>
  <div class="layui-input-block">
    <input id="name" type="text" name="name" required value="" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input" >
  </div>
</div>
<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:'post'   //20200301修改，使用下面的before预加载来取出传值，只能用post，get的方法是另外的代码，目前还没搞懂
	,before: function(obj){
	  //预读本地文件示例，不支持ie8
	  // obj.preview(function(index, file, result){
	   //  $('#imgpreview').attr('src', result); //图片链接（base64）
	  // });
          this.data.name = $('#name').val();  //20200301增加，用来上传图片的时候，先读取id为name的input里面的值，一起传到后端
	}
	,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替换成如下代码）

//20200301增加，用来上传图片的时候，接收前端传来的name对应的值，可用来重命名图片，必须是post
$name=$_POST['name'];
$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