文件上传管理

ThinkAdmin 对于文件上传进行了封装，前端代码是基于 admin.js 中的 $(element).uploadFile() 实现，通过 admin/api.upload/ 下面的接口协同处理，注意所有上传接口都需要登录后才能使用。

目前系统已经支持以下存储方案，配置参数可以后台的系统管理处理修改。

存储方式	不占服务器空间	上传大文件	支持CDN加速	是否推荐
本地服务器存储	❌️	❌	❌	❌
自建 Alias 存储	✔️	可配	❌	✔️
七牛云空间存储	✔️	✔️	✔️	✔️
又拍云USS存储	✔️	✔️	✔️	✔️
阿里云OSS存储	✔️	✔️	✔️	✔️
腾讯云COS存储	✔️	✔️	✔️	✔️

为什么要推荐使用云存储？

对于一个互联网项目来说，最大的瓶颈就是带宽流量，因此我们需要解决这个问题。

若将文件存储在本地服务器，那么用户访问页面加载文件资源时，就会占用服务器本身带宽，而服务器本身的带宽是有限的，导致其他用户无访问马上访问到页面，进入等待状态，将严重影响网站并发。如果我们将文件存储在云空间，那么用户访问网站时就会不占用网站流量，不会让访问轻易进入等待状态，文件资源加载速度也会加快。

后端文件上传过程及事件

在 admin.js 有封装文件上传，通用接口是 $.uploadFile() 方法；

// 上传单个视频
$(InputElement).uploadOneVideo();

// 上传单个图片
$(InputElement).uploadOneImage();

// 上传多张图片
$(InputElement).uploadMultipleImage();

以下为通过HTML绑定案例及说明

<input type="text" name="FileInput">
<a data-file data-type="png,jpg,jpeg" data-field="FileInput">上传文件</a>

<script>
    $(function () {
        /*！捕获文件上传结果 */
        $('[name=FileInput]').on('change', function () {
            // 文件地址变量事件
            console.log(this.value)
        });

        /*！文件上传过程及事件处理 */
        $('[data-file]').on('upload.choose', function (files) {
            // 文件选择后的事件
        }).on('upload.hash', function (event, file) {
            // file 当前文件对象
        }).on('upload.progress', function (event, obj) {
            // obj.file 当前文件对象
            // obj.event 文件上传进度事件
            // obj.number 当前上传进度值
        }).on('upload.done', function (event, obj) {
            // obj.file 当前完成的文件对象，每个文件上传成功将会调用
            // obj.data 当前文件上传后服务端返回的内容，部分云上传不会返回数据
        }).on('upload.complete', function (event) {
            // 全部文件上传成功
        });
    });
</script>

文件上传参数说明

1. 指定上传类型

• data-file='one' 单文件上传
• data-file='mut' 多文件上传
• data-file='image' 单图上传+选择器
• data-file='images' 多图上传+选择器

2. 配置限制绑定

• data-safe='true' 安全模式
• data-size='1024' 限制上传文件大小
• data-type='png,jpg,gif,jpeg' 指定允许上传文件后缀
• data-field='FileInput' 指定返回内容绑定表单元素

3. 指定存储方式

• data-uptype='local' 指定使用本地服务器存储，不填写使用后台默认配置
• data-uptype='qiniu' 指定使用七牛云空间存储，不填写使用后台默认配置
• data-uptype='txcos' 指定使用腾讯云COS存储，不填写使用后台默认配置
• data-uptype='upyun' 指定使用又拍云USS存储，不填写使用后台默认配置
• data-uptype='aliyun' 指定使用阿里云OSS存储，不填写使用后台默认配置

4. 新增图片压缩功能 (2022-05-30)

• data-quality 图片压缩质量（取值范围 0.1 - 1.0，值越小越模糊）
• data-max-width 限制图片最大宽度（固定单位为 px，不需要传单位）
• data-max-height 限制图片最大高度（固定单位为 px，不需要传单位）

5. 新增配置存储前缀 (2022-07-13)

• data-path='image' 指定存储前缀

6. 新增图片裁剪功能 (2022-07-15)

• data-cut-width 图片裁剪宽度（固定单位为 px，不需要传单位）
• data-cut-height 图片裁剪高度（固定单位为 px，不需要传单位）

简单图片上传案例

<!-- 单图片上传 -->
<input name="image" value="" data-max-width="500" data-max-height="500">
<script> $('[name=image]').uploadOneImage(); </script>

<!-- 多图片上传 -->
<input name="image" value="" data-max-width="500" data-max-height="500">
<script> $('[name=image]').uploadMultipleImage(); </script>

<!-- 仅 JavaScript, 无 input 上传 -->
<button data-type="zip" data-file>仅上传ZIP文件</button>
<script>
    $('[data-file]').on('upload.done', function (obj) {
        console.log(obj)
    });
</script>