FastAdmin文件上传
FastAdmin支持将文件、图片、视频、压缩包等文件快速的上传至本地服务器或云存储，同时支持云存储直传模式和服务器进行中转模式。你可以直接在后台插件管理安装第三方云存储的插件后使用，目前支持以下云存储平台：
| 平台 | 特点 |
|---|---|
| 又拍云 | 申请加入联盟可享每月免费15G流量、图片处理 |
| 七牛云 | 实名认证后免费10G流量、稳定、图片处理 |
| 阿里OSS | 阿里系、稳定、图片处理、支持挂载为分区 |
| Ucloud | 每月20G免费流量、图片处理 |
| 腾讯COS | 每月50G免费流量、图片处理 |
| 百度BOS | 提供稳定、安全、高效、高可扩展的云存储服务 |
从FastAdmin 1.2.0版本开始，所有云存储均已适配分片上传功能
在使用第三方云存储功能之前请先注册一个账号并新增一个云存储服务,你可以通过FastAdmin的邀请链接注册，FastAdmin会获得相应平台的CDN流量又拍云：https://www.fastadmin.net/go/upyun七牛云：https://www.fastadmin.net/go/qiniu阿里云：https://www.fastadmin.net/go/aliyun腾讯云：https://www.fastadmin.net/go/tencent
FastAdmin的上传功能非常强大，我们只需要简单的配置即可支持单图或多图上传。
上传配置
如果我们未启用云存储插件，此时上传读取的是application/extra/upload.php这个配置文件。
| 配置名称 | 配置值 | 说明 |
|---|---|---|
| uploadurl | ajax/upload | 一般情况下无需修改 |
| cdnurl | 空 | 一般情况下为空，如果你的应用不限于PC端，可以填写你的网站地址，如http://www.yoursite.com |
| savekey | /uploads/{year}{mon}{day}/{filemd5}{.suffix} | 配置文件保存的路径 |
| maxsize | 10mb | 最大可上传的文件大小，如果启用分片上传，这个值则是限制单一分片的最大值 |
| mimetype | jpg,png,bmp,jpeg,gif,zip,rar,xls,xlsx | 允许上传的后缀列表，支持Mimetype，如jpg,png,image/bmp,application/zip |
| timeout | 30000 | 默认上传超时时长为30000，表示30秒 |
| multiple | false | 是否默认启用多文件上传，默认关闭，一般在HTML中配置data-multiple="true" |
| chunking | false | 是否允许使用分片上传，默认关闭，如需启用需配合HTML中的配置，参考下方的分片上传 |
| chunksize | 2097152 | 分片的大小，默认为2MB，建议整数 |
如果安装了云存储插件并启用，则相关配置请在后台插件管理，对应的云存储配置中进行设置。
上传示例
<div class="form-group">
<label for="c-avatar" class="control-label col-xs-12 col-sm-2">头像:</label>
<div class="col-xs-12 col-sm-8">
<div class="input-group">
<input id="c-avatar" data-rule="" class="form-control" size="50" name="row[avatar]" type="text" value="{$row.avatar}">
<div class="input-group-addon no-border no-padding">
<span><button type="button" id="plupload-avatar" class="btn btn-danger plupload" data-input-id="c-avatar" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-avatar"><i class="fa fa-upload"></i> 上传</button></span>
<span><button type="button" id="fachoose-avatar" class="btn btn-primary fachoose" data-input-id="c-avatar" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> 选择</button></span>
</div>
<span class="msg-box n-right" for="c-avatar"></span>
</div>
<ul class="row list-inline plupload-preview" id="p-avatar"></ul>
</div>
</div>我们可以看到这里配置了一个文本框、一个上传按钮、一个选择按钮和一个预览的DIV
| 类型 | 说明 |
|---|---|
| 文本框 | 主要用于接收上传后返回的图片链接，文本框id属性是必选的，这里的id是c-avatar |
| 上传按钮 | 主要用于点击后上传文件，有几个属性非常重要，请参考下方的上传按钮属性介绍 |
| 选择按钮 | 主要用于点击后选择已经上传的文件，有几个属性非常重要，请参考下方的选择按钮属性介绍 |
| 预览区域 | 主要用于预览上传或选择文件后的预览。id属性是改造的，这里的id是p-avatar |
上传按钮支持属性
| 属性 | 示例值 | 说明 |
|---|---|---|
| data-url | ajax/upload | 用于配置上传文件接收的地址 |
| data-multipart | {"key1":"value1"} | 用于上传时附加额外的参数信息 |
| data-input-id | c-avatar | 用于填充返回URL地址的设文本框 |
| data-mimetype | image/gif,image/jpeg,image/png,image/jpg,image/bmp | 用于过滤允许上传的文件类型，支持mimetype或文件后缀名 |
| data-multiple | false | 是否支持多图或多文件模式 |
| data-preview-id | p-avatar | 用于预览返回URL地址的DIV |
| data-maxsize | 10M | 用于限制最大可上传的文件大小 |
| data-timeout | 60000 | 用于设定上传超时时长，60000表示60秒，默认为30秒 |
| data-chunking | true | 是否启用分片上传,1.2.0版本新增 |
| data-chunk-size | 2097152 | 分片单片文件大小,1.2.0版本新增 |
| data-resize-quality | 0.8 | 设置上传图片的品质,1.2.0版本新增 |
| data-resize-width | 1024 | 上传前剪裁图片宽度,1.2.0版本新增 |
| data-resize-height | 768 | 上传前剪裁图片高度,1.2.0版本新增 |
| data-chunk-size | 2097152 | 分片单片文件大小,1.2.0版本新增 |
选择按钮支持属性
| 属性 | 示例值 | 说明 |
|---|---|---|
| data-input-id | c-avatar | 用于填充返回URL地址的设文本框 |
| data-mimetype | image/gif,image/jpeg,image/png,image/jpg,image/bmp | 用于过滤允许上传的文件类型，支持mimetype或文件后缀名 |
| data-multiple | false | 是否支持多图或多文件模式 |
| data-preview-id | p-avatar | 用于预览返回URL地址的DIV |
上传按钮事件
| 属性 | 示例值 | 说明 |
|---|---|---|
| data-upload-success | function | 上传成功后会进行回调，需使用$("按钮").data("upload-success", function(){});赋值 |
| data-upload-error | function | 上传失败后会进行回调，需使用$("按钮").data("upload-error", function(){});赋值 |
如果我们想直接通过JS上传一个文件到我们的服务器，我们可以使用Upload.api.send(file, success, failure, complete)来上传文件。
分片上传
从FastAdmin 1.2.0版本开始已经支持分片上传，如果需要启用分片上传，必须客户端和服务端同时开启。首先找到application/extra/upload.php，修改其中的chunking值为true。其次给按钮添加data-chunking=true属性即可，如果提示文件过大，可以再添加data-maxsize="1024M"来控制允许上传的文件大小。
温馨提示
1、如果是动态生成的上传按钮，需要使用Form.events.plupload(表单);绑定事件2、即使设置了分片上传，也只有当上传的文件超过设置的单一分片文件大小时才会启用分片上传。3、从1.2.0开始，前端上传默认超时为30秒，如上传大文件，请给上传按钮添加data-timeout="600000"设定为10分钟超时。4、如果安装了云存储插件，上传没有生效，请尝试清空浏览器缓存。5、如果遇到上传大文件失败，请参考https://ask.fastadmin.net/question/26919.html 进行修改服务器的限制。
发表评论 取消回复