20.上传模块
学习要点：
1.上传模块
本节课我们来开始了解 Layui 的内置模块：上传模块。
一．上传模块
1. 首先，为了课程简洁，我们不考虑服务器设置的真实上传，只讲解前端设置；
2. 真实上传，可以放在 Layui 的后台继承框架+一款服务器语言框架结合讲解；
3. 上传的简单配置如下：
<!--无须一定要 file 表单了，按钮即可-->
<button type="button" class="layui-btn" id="test">
<i class="layui-icon layui-icon-upload">上传图片</i>
</button>
layui.use(['upload'], () => {
const upload = layui.upload
//执行实例
const uploadInst = upload.render({
//绑定元素
elem : '#test',
//上传的接口
url : '/upload/',
//上传完毕回调
done(res) {
console.log(res)
},
//请求异常的回调
error() {
console.log('异常~')
}
})
})
4. 对于参数，下面列出比较常用的属性，更多参考手册：
属性 描述
elem 容器选择器，DOM 对象
url 服务端上传的接口
data 上传接口的额外参数
auto 是否自动上传
exts 允许上传的后缀名
size 最大上传的文件大小，单位 KB
multiple 设置 true，可以多文件上传
choose 选择文件时回调
before 文件上传前的回调
done 执行上传请求后的回调
error 执行上传请求后发生异常的回调
5. 可以使用.json 文件，来模拟上传成功，然后给我们进行测试；
{
"code": 0,
"msg": "",
"data": {
"src": "http://cdn.layui.com/123.jpg"
}
}
PS：url 改成相应的地址即可，此时上传请求成功的回调就可以使用了；
6. 也可以设置多文件上传，圈选上传文件即可，可以返回三条 json 数据；
//多文件上传
multiple: true,
