文件上传

最后更新时间：2021-01-15 17:29:11

FastAdmin支持将文件、图片、视频、压缩包等文件快速的上传至本地服务器或云存储，同时支持云存储直传模式和服务器进行中转模式。

你可以直接在后台插件管理安装第三方云存储的插件后使用，目前支持以下云存储平台：平台特点插件下载又拍云申请加入联盟可享每月免费15G流量、图片处理

七牛云实名认证后免费10G流量、稳定、图片处理

阿里OSS阿里系、稳定、图片处理、支持挂载为分区

Ucloud每月20G免费流量、图片处理

腾讯COS每月50G免费流量、图片处理

百度BOS提供稳定、安全、高效、高可扩展的云存储服务从FastAdmin 1.2.0版本开始，所有云存储均已适配分片上传功能

FastAdmin的上传功能非常强大，我们只需要简单的配置即可支持单图或多图上传。

上传配置

如果我们未启用云存储插件，此时上传读取的是application/extra/upload.php这个配置文件。配置名称配置值说明uploadurlajax/upload一般情况下无需修改

cdnurl空一般情况下为空，如果你的应用不限于PC端，可以填写你的网站地址，如http://www.yoursite.com

savekey/uploads/{year}{mon}{day}/{filemd5}{.suffix}配置文件保存的路径

maxsize10mb最大可上传的文件大小，如果启用分片上传，这个值则是限制单一分片的最大值

mimetypejpg,png,bmp,jpeg,gif,zip,rar,xls,xlsx允许上传的后缀列表，支持Mimetype，如jpg,png,image/bmp,application/zip

timeout30000默认上传超时时长为30000，表示30秒

multiplefalse是否默认启用多文件上传，默认关闭，一般在HTML中配置data-multiple="true"

chunkingfalse是否允许使用分片上传，默认关闭，如需启用需配合HTML中的配置，参考下方的分片上传

chunksize2097152分片的大小，默认为2MB，建议整数如果安装了云存储插件并启用，则相关配置请在后台插件管理，对应的云存储配置中进行设置。

上传示例

我们可以看到这里配置了一个文本框、一个上传按钮、一个选择按钮和一个预览的DIV类型说明文本框主要用于接收上传后返回的图片链接，文本框id属性是必选的，这里的id是c-avatar

上传按钮主要用于点击后上传文件，有几个属性非常重要，请参考下方的上传按钮属性介绍

选择按钮主要用于点击后选择已经上传的文件，有几个属性非常重要，请参考下方的选择按钮属性介绍

预览区域主要用于预览上传或选择文件后的预览。id属性是改造的，这里的id是p-avatar

上传按钮支持属性属性示例值说明data-urlajax/upload用于配置上传文件接收的地址

data-multipart{"key1":"value1"}用于上传时附加额外的参数信息

data-input-idc-avatar用于填充返回URL地址的设文本框

data-mimetypeimage/gif,image/jpeg,image/png,image/jpg,image/bmp用于过滤允许上传的文件类型，支持mimetype或文件后缀名

data-multiplefalse是否支持多图或多文件模式

data-preview-idp-avatar用于预览返回URL地址的DIV

data-maxsize10M用于限制最大可上传的文件大小

data-timeout60000用于设定上传超时时长，60000表示60秒，默认为30秒

data-chunkingtrue是否启用分片上传,1.2.0版本新增

data-chunk-size2097152分片单片文件大小,1.2.0版本新增

data-resize-quality0.8设置上传图片的品质,1.2.0版本新增

data-resize-width1024上传前剪裁图片宽度,1.2.0版本新增

data-resize-height768上传前剪裁图片高度,1.2.0版本新增

data-chunk-size2097152分片单片文件大小,1.2.0版本新增

选择按钮支持属性属性示例值说明data-input-idc-avatar用于填充返回URL地址的设文本框

data-mimetypeimage/gif,image/jpeg,image/png,image/jpg,image/bmp用于过滤允许上传的文件类型，支持mimetype或文件后缀名

data-multiplefalse是否支持多图或多文件模式

data-preview-idp-avatar用于预览返回URL地址的DIV

上传按钮事件属性示例值说明data-upload-successfunction上传成功后会进行回调，需使用$("按钮").data("upload-success", function(){});赋值

data-upload-errorfunction上传失败后会进行回调，需使用$("按钮").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、如果安装了云存储插件，上传没有生效，请尝试清空浏览器缓存。

未解决你的问题？请到「问答社区」反馈你遇到的问题