异步上传图片的方法，没有直接做成单独的插件。他集成在 layui 里面的，因此我们直接通过下载 layui 即可。官网：[http://www.layui.com/](http://www.layui.com/)，下载文件，解压到 public 中：
新建 application\\index\\controller\\Layer.php
~~~
<?php
namespace app\index\controller;
use think\Controller;
class Layer extends Controller
{
// 显示上传页面
public function upload()
{
return $this->fetch();
}
}
~~~
新建 application\\index\\view\\layer\\upload.html
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传插件</title>
<link href="/static/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div style="margin: 50px 50px">
<!-- 上传文件 -->
<input type="file" name="up_file" class="layui-upload-file">
<div id="yl"></div>
</div>
<script src="/static/layui/layui.js"></script>
<script>
layui.use('upload', function() {
var $ = layui.jquery;
layui.upload({
url: "{:url('layer/doupload')}"
, ext: 'jpg|png|gif' //那么，就只会支持这三种格式的上传。注意是用|分割。
, success: function (res) {
// 成功后图片预览
$("#yl").html('<img src="' + res.url + '" width="100px" height="100px"/>');
}
});
});
</script>
</body>
</html>
~~~
访问[http://www.phper.com/index/layer/upload](http://www.phper.com/index/layer/upload)
从上面的配置可见，layer/doupload 通过这个接口，处理文件上传的。而这个文件的名字 就是 input 框的 name 值。这个接口的返回值必须为：
~~~
{"code":0 ,"msg":"","url":"http://cdn.abc.com/123.jpg"'}
~~~
code = 0，表示成功。看一下 doupload 方法
~~~
// 处理上传文件
public function doUpload()
{
$img = request()->file('up_file');
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $img->move(ROOT_PATH . 'public' . DS . 'layer_uploads');
if($info){
// 成功上传后 获取上传信息
return json(['code' => 0, 'msg' => '', 'url' => '/layer_uploads/' . $info->getSaveName()]);
}else{
// 上传失败获取错误信息
return json(['code' => 1, 'msg' => $img->getError(), 'url' => '']);
}
}
~~~
这样上传完文件，就可以预览了。
