文件上传管理

ThinkAdmin 框架对文件上传功能进行了精心的封装，前端实现依赖于 admin.js 中的 $(element).uploadFile() 方法。该方法与 admin/api.upload/ 下的接口协同工作，确保文件上传的流畅性和安全性。请注意，由于文件上传涉及到用户数据的存储与传输，因此所有上传接口均要求用户登录后才能使用，以保障系统的数据安全与隐私。

当前系统已全面支持多种存储方案，用户可轻松在后台的系统管理界面进行配置参数的修改与调整。这一设计旨在为用户提供更大的灵活性和便利性，以满足不同场景下的存储需求。通过简单的操作，用户即可实现存储方案的切换和优化，提升系统的整体性能和稳定性。

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

为什么推荐云存储？

对于一个互联网项目而言，带宽流量往往成为制约其性能的关键因素。因此，解决带宽流量问题至关重要。

传统的本地服务器存储文件方式，在用户访问页面加载文件资源时，会大量消耗服务器的带宽。然而，服务器带宽资源有限，一旦达到上限，其他用户将无法立即访问页面，不得不进入等待状态，这无疑会严重影响网站的并发性能和用户体验。

为了克服这一瓶颈，我们可以考虑将文件存储在云空间。这样，当用户访问网站时，文件资源的加载将不再占用网站的带宽流量，从而避免了用户因等待而产生的不良体验。同时，云空间的强大存储和传输能力还能加快文件资源的加载速度，进一步提升网站的整体性能。因此，利用云空间存储文件是优化互联网项目性能、提升用户体验的有效途径。

文件上传过程事件

在 admin.js 中，已经对文件上传功能进行了封装，为用户提供了一个通用的接口方法：$.uploadFile()。这一方法简化了文件上传的操作流程，使开发者能够更便捷地实现文件上传功能。通过调用 $.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>

文件上传参数说明

注意： 若上传组件中包含了文件选择按钮（BUTTON），则建议将以下属性设置直接应用于该按钮之上。对于非通过 JavaScript 特殊方式生成的组件，请确保以文件选择按钮（BUTTON）为主体，利用 data-field 进行值的绑定，从而更新 input 并触发相应的 change 事件。

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