ThinkPHP+Layui图片异步上传
Thinkphp5.1版本的图片上传代码和以前版本没有什么变化，主要说下异步上传图片，使用layui框架上传单张图片之服务器，服务器返回图片地址给前台，然后前台渲染数据。
代码一：HTML代码
<div class="layui-form-item">
<label class="layui-form-label">头像</label>
<div class="layui-input-inline">
<button type="button" class="layui-btn layui-btn-primary" id="uploadUserHead">
<i class="layui-icon"></i>上传图片
</button>
<input type="hidden" name="userhead" id="userhead">
<input class="layui-upload-file" type="file" accept="undefined" name="userhead">
</div>
</div>注意事项：
1、定义id='uploadUserHead' ，需要与 JS 代码内绑定元素一致
2、使用隐藏域，用来存储上传成功后的图片路径
代码二：JS代码
//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
layui.use(['element','upload'], function(){
var element = layui.element;
var upload = layui.upload;
var uploadUserHead = upload.render({
elem: '#uploadUserHead' //绑定元素
,url: '/admin/User/uploadUserHead' //上传接口
,size: 2048 //大可允许上传的大小，单位 KB
,field: 'userhead'
,done: function(res){
//上传完毕回调
if(res.code == 200){
layer.msg(res.msg,{
icon:1,time:2000
},function () {
$("#userhead").val(res.data);
})
}else{
layer.msg(res.msg,{
icon:2,time:2000
})
}
}
,error: function(){
layer.msg('JS error, please check');
}
});注意事项：
1、模式上传方式为post上传，可通过method，进行定义
2、图片类型默认为jpg|png|gif|bmp|jpeg ，正常可默认设置
3、文件域的字段名可通过field进行设置
4、最大文件上传大小通过size设置，默认为0，不限制大小，单位：kb
代码三：PHP代码
/**
* 图片上传
* @return \think\response\Json
*/
public function getuploadUserHead()
{
// 获取表单上传文件
$file = request()->file('userhead');
// 移动到框架应用根目录/uploads/ 目录下
$path = './uploads/';
$info = $file->move($path);
if($info) {
// 成功上传后 获取上传信息
return json(['code' => 200, 'msg' => '上传成功', 'data' => mb_substr($path, 1) .date('Ymd',time())."/". $info->getFilename()]);
}
else {
// 上传失败获取错误信息
return json(['code' => 100, 'msg' => $file->getError()]);
}
}注意事项：
1、需要写明接收文件字段名
2、上传路径需注意写清
3、返回成功信息时注意路径，个人写法规避 \ 无法解析问题
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-02-18，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读