最近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界面里面能浏览缩略图,并得到真实大图的网址,用于你的表单或其他用途
。我是一个想做码农的行政文员