文件上传

FastAdmin开发框架支持将文件、图片、视频、压缩包等文件快速的上传至本地服务器或云存储，同时支持云存储直传模式和服务器进行中转模式。
你可以直接在后台插件管理安装第三方云存储的插件后使用，目前支持以下云存储平台：

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

上传配置

如果我们未启用云存储插件，此时上传读取的是application/extra/upload.php这个配置文件。

文件名规则

文件保存文件名savekey支持替换的变量如下：

上传示例

<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="faupload-avatar" class="btn btn-danger faupload" 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 faupload-preview" id="p-avatar"></ul>
    </div>
</div>

我们可以看到这里配置了一个文本框、一个上传按钮、一个选择按钮和一个预览的DIV

按钮属性

上传按钮支持属性

选择按钮支持属性

上传按钮事件回调

直接上传

如果我们想直接通过JS上传一个文件到我们的服务器(支持云存储插件)，我们可以在JS中使用

require(['upload'], function(Upload){
    //fileInput为你的文件选择框，file为文件流，file也可以在fileInput的change事件中通过e.originalEvent.target.files[0];获取
    var fileInput = $('#fileInput')[0];
    var file = fileInput.files[0];
    Upload.api.send(file, function(data, ret, up, file){
        // 上传成功的回调
        // 其中data.url为文件URL的链接、data.fullurl为完整URL链接
    }, function(data, ret, up, file){
        // 上传失败的回调
    });
});

来上传文件，注意仅适用于在FastAdmin框架前端标准模块对应的JS中调用。

分片上传

从FastAdmin 1.2.0版本开始已经支持分片上传，如果需要启用分片上传，必须客户端和服务端同时开启。首先找到application/extra/upload.php，修改其中的chunking值为true。
其次给按钮添加data-chunking=true属性即可，如果提示文件过大，可以再添加data-maxsize="1024M"来控制允许上传的文件大小。

上传成功后归类

从FastAdmin 1.2.1版本开始已经支持上传成功后归类功能，我们可以通过给上传按钮添加data-params='{"category":"category2"}'来实现，这个即是上传归类到category2，这个category2可以在常规管理->系统配置->字典配置中添加修改

自定义上传预览

FastAdmin中的上传组件，默认只支持预览图片预览，当判断到不是图片时会使用对应的文件后缀进行预览，如果需要使用自定义上传预览，可以参考以下方法进行实现。
首先请参考上方的上传示例代码，我们给预览区域<ul class="row list-inline faupload-preview" id="p-avatar"></ul>添加一个data-template的属性

<ul class="row list-inline faupload-preview" id="p-avatar" data-template="avatartpl"></ul>

然后在页面底部添加一个avatartpl的自定义模板，如：

<script type="text/html" id="avatartpl">
    <li class="col-xs-3">
        <a href="<%=fullurl%>" data-url="<%=url%>" target="_blank" class="thumbnail">
            <img src="<%=fullurl%>" class="img-responsive">
        </a>
        <a href="javascript:;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a>
    </li>
</script>

这其中的data-template的值对应我们自定义模板ID的值，自定义模板中支持的变量如下：

大文件上传

当我们在大文件上传时(文件大小超过2M)，除了可以采用上方的分片上传以外，还可以通过修改服务器的配置来实现大文件上传。大文件上传时通常涉及到插件配置/本地配置/PHP配置/Nginx配置四处地方需要修改。
1、如果有安装云存储插件，首先请在后台插件管理修改云存储插件->配置中的最大可上传配置值。
2、然后修改 application/extra/upload.php 里的 maxsize的值。
3、接着修改PHP上传限制，修改你服务器运行环境的 php.ini 里的 max_execution_time=300、upload_max_filesize=100M、post_max_size=100M三个配置值。
4、如果使用Nginx 还需要修改Nginx的配置client_max_body_size 100M;
5、修改配置后务必重启Web服务和清浏览器缓存。
6、如果有使用CDN分布式部署或负载均衡，还需检查你的云服务提供商是否有上传大小限制。

宝塔面板修改请参考：https://ask.fastadmin.net/question/30109.html

动态配置

如果我们希望在不同页面使用不同的上传配置，可以参考以下方法。
在当前控制器添加_initialize方法，如已有则按需要修改添加\think\Config::set('upload.mimetype', 'zip,rar');

public function _initialize()
{
    \think\Config::set('upload.mimetype', 'zip,rar');
    parent::_initialize();
}

支持修改的配置请参考#上传配置

自定义上传

请参考文档：https://doc.fastadmin.net/doc/frontend.html#toc-6

温馨提示

1、如果是动态生成的上传按钮，需要使用Form.events.faupload(表单);绑定事件
2、即使设置了分片上传，也只有当上传的文件超过设置的单一分片文件大小时才会启用分片上传。
3、从FastAdmin 1.2.0开始，前端上传默认超时为600000毫秒，也就是10分钟，如上传超大文件，请给上传按钮添加data-upload-options='{"timeout":1800000}'设定为30分钟超时。
4、如果安装了云存储插件，上传没有生效，请尝试清空浏览器缓存。
5、如果遇到上传大文件失败，请参考https://ask.fastadmin.net/question/26919.html 进行修改服务器的限制。
6、如果安装了云存储插件并启用，则所有的文件都将上传至云存储，如果仍需要上传文件到本地服务器，请给按钮添加data-url="ajax/upload"属性
7、由于FastAdmin中多图(多文件)使用,作为分隔符处理，因此不支持单个文件(图片)URL中使用,，这种情况常见于云存储图片自定义处理，建议云存储图片处理时采用自定义样式来避免使用到,的情况。