文件上传管理

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>
Last Updated:
Contributors: 邹景立