異步上傳圖片的方法，沒有直接做成單獨的插件。他集成在 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' => '']);
}
}
~~~
這樣上傳完文件，就可以預覽了。
