php文件上传逻辑,文件上传 · 基于thinkphp5小功能设计与实现 · 看云

本章节主要讲解如果灵活运用layui和thinkphp5进行无刷新图片上传

#### 1.上传接口书写

1.建立一个Upliad.php上传控制器

2.在控制器下首先建立一个受保护的(protected)的_initialize方法，在这个方法中要进行验证用户是否进行登陆，如果没有进行登陆，需要跳转到登录页面，如果有登录就执行下面的上传方法

3.在控制器建立上传方法

业务逻辑如下：

1. 获取表单上传文件

` $file = $request->file('file');`

2. .移动到框架应用根目录/public/uploads/ 目录下

~~~

$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');

~~~

3 .返回上传后的信息。无论是成功还是失败都需要返回信息，返回格式必须如下格式

~~~

{

"code": 0

,"msg": ""

,"data": {

"src": "http://cdn.abc.com/123.jpg"

}

}

~~~

# 详细代码：[Source Code](上传接口.md)

#### 2.视图设计

1. 导入的js和css文件

2. html代码，添加一个上传input

``

3. js代码的实现

* 加载upload模块

* 详细参数

| | | |

| --- | --- | --- |

| 参数 | 类型 | 描述 |

| elem | string | 指定元素的选择器，默认直接查找class为layui-upload-file的元素 |

|url|string|上传文件的接口|

|method|string|设置http类型，如：post、get。默认post。也可以直接在input设置lay-method="get"来取代。|

|before|function|执行上传前的回调|

|success|function|上传成功后的回调|

|type|string|设定上传的文件类型，也可以直接在input设置lay-type=""来取代(详细见下文)。|

|ext|string|自定义可支持的文件扩展名，也可以直接在input设置lay-ext=""来取代(详细见下文)。|

|unwrap|boolean|是否不改变input的样式风格。默认false|

* 官网案例说明

我们上传文件是借助type为file的input标签来完成的，但非常遗憾的是，它不能很好地与其它表单元素并存，所以我们常常要单独为它做一个业务层面的“异步上传”，即先让图片上传，再和其它表单一起提交保存。下面就是一个非常普通的input，它可以出现你页面的任何位置。

~~~

~~~

另外class="layui-upload-file"不是必须的，她只是会让你的input短暂性隐藏，并且在调用upload方法时不用设置elem。要使得这个input能正常地用起来，你只需要执行下述方法：

~~~

layui.upload({

url: '上传接口url'

,success: function(res){

console.log(res); //上传成功返回值，必须为json格式

}

});

~~~

实现异步上传官网说明地址:http://www.layui.com/doc/modules/upload.html

# 详细代码：[Source Code](视图.md)