文件上传管理
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>