前端
<div class="layui-upload"> <button type="button" class="layui-btn" id="test1">上传图片</button> <input type="hidden" class="file" name="file" id="demoText" value="" > <div class="layui-upload-list"> <img class="layui-upload-img" id="image"> </div> <div style="width: 95px;"> <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo"> <div class="layui-progress-bar" lay-percent=""></div> </div> </div> </div>
<script> layui.use([‘upload‘, ‘element‘, ‘layer‘], function() { var $ = layui.jquery , upload = layui.upload , element = layui.element , layer = layui.layer; //常规使用 - 普通图片上传 var uploadInst = upload.render({ elem: ‘#test1‘ , url: "{:url(‘test/add/file‘)}" //此处用的是第三方的 http 请求演示,实际使用时改成您自己的上传接口即可。 , before: function (obj) { //预读本地文件示例,不支持ie8 obj.preview(function (index, file, result) { $(‘#image‘).attr(‘src‘, result); //图片链接(base64) }); element.progress(‘demo‘, ‘0%‘); //进度条复位 layer.msg(‘上传中‘, {icon: 16, time: 0}); } , done: function (res) { //如果上传成功 if (res.code == 0) { layer.msg(‘上传成功‘); } //上传成功的一些操作 //…… $(‘#demoText‘).val(res.data); //置空上传失败的状态 } , 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(); }); } //进度条 , progress: function (n, elem, e) { element.progress(‘demo‘, n + ‘%‘); //可配合 layui 进度条元素使用 if (n == 100) { layer.msg(‘上传完毕‘, {icon: 1}); } } }); }); </script>
后台
public function file() { $file = request()->file(‘file‘); if($file){ $info = $file->validate([‘ext‘=>‘png,jpg,jpeg‘])->move(ROOT_PATH . ‘public‘ . DS . ‘uploads‘); if($info){ $data[‘file‘] = DS . ‘uploads‘ . DS . $info->getSaveName();
//生成缩略图
$image = \think\Image::open(‘.‘.$data[‘file‘]);
//这里是地址,必须拼接这个点不然找不到 $image->thumb(200, 200)->save(‘.‘.$data[‘file‘]); }else{ $this->error($file->getError()); } } return json([‘code‘=>0,‘msg‘=>‘成功‘,‘data‘=>$data[‘file‘]]); }
public function save(Request $request) { $data = input(); array_shift($data); $validate = Loader::validate(‘Add‘); if(!$validate->check($data)){ $this->error($validate->getError()); } $res = \app\test\model\Goods::create($data); if ($res){ return json([‘code‘=>0,‘msg‘=>‘添加成功‘,‘data‘=>$res]); }else{ $this->error(‘失败‘); } }