前端代码：返回图片路径在红色代码
<div class="layui-input-block">
<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1">
<p id="demoText"></p>
</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>
</div>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<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('upload')}' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
,before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接（base64）
});
element.progress('demo', '0%'); //进度条复位
layer.msg('上传中', {icon: 16, time: 0});
}
,done: function(res){
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//上传成功的一些操作
console.log(res.image);//返回图片上传的路径
//……
$('#demoText').html(''); //置空上传失败的状态
}
,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 upload()
{
$file = request()->file('file');
$info = $file->move( 'uploads');
$ext = ($info->getExtension());
if (!in_array($ext, array('jpg', 'jpeg', 'gif', 'png'))) {
exit(json_encode(array('code' => 1, 'msg' => '文件格式不支持')));
}
$img = str_replace("\\",'/','/uploads' .'/'. $info->getSaveName());
$data['image'] = $img;
$data['code'] = 0;
return json($data);
}