ThinkPHP+Layui图片异步上传
- 2019 年 12 月 27 日
- 筆記
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 thinkresponseJson */ 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、返回成功信息时注意路径，个人写法规避 无法解析问题
