这个图片上传工具可以配置成全局使用，包括单图上传、多图上传、视频上传、音频上传、编辑器图片视频上传、音频上传带播放功能(支持上传到七牛)。带附件历史记录功能。编辑器使用百度Ueditor开发。移动端上传为Weui改造。
)
一种为Thinkphp3.2集成，直接可以使用（需配置在项目一级目录，二级目录会报错）。另一种为纯前端使用的jsdk。
- pc端访问
yourpath/home/index/index - 移动端访问
yourpath/home/index/mobileindex
- 修改
/resource/js/app/config.js - 修改
/Application/Common/config.php
- 新增了
/ThinkPHP/Library/Org/Util/UploadFile.class.php - 修改了
/ThinkPHP/Think/Upload/Driver/Qiniu.class.php
- 附件表，可按需修改
CREATE TABLE `attachment` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '自增ID',
`file_type` enum('1','2','3','4') NOT NULL COMMENT '附件类型1图片2音频3视频4其他',
`file_name` varchar(100) NOT NULL COMMENT '附件名',
`file_url` varchar(200) NOT NULL COMMENT '附件地址',
`is_cdn` tinyint(1) NOT NULL DEFAULT '0' COMMENT '是否在cdn，1是0否',
`file_size` int(11) NOT NULL DEFAULT '0' COMMENT '附件大小',
`year` smallint(6) NOT NULL COMMENT '上传年份',
`month` tinyint(2) NOT NULL COMMENT '上传月份',
`create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '上传时间',
PRIMARY KEY (`id`),
KEY `year` (`year`) USING BTREE,
KEY `month` (`month`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-
$name 表单字段的名称，同一页面不能为空
-
$value 表单input值
-
$default 默认显示的缩略图
-
$options 图片上传配置信息
-
单图上传
tpl_form_field_image($name, $value = ‘’, $default = ‘’, $options = array())
- 多图上传
tpl_form_field_multi_audio($name, $value = array(), $options = array())
音频上传、视频上传类似，具体参考/Application/Common/Common/function.php
- jsdk访问地址
yourpath/webTest/index.html - 只需要把里面的webTest目录文件取出来就行。
- 修改配置
webTest/assets/js/EasyUpload.js,如下所示：
//项目url地址
var app_path = 'http://xxx';
//定义路由
var appConfigPath = {
//上传地址
uploadPath:app_path+"index.php/home/index/upload",
//历史图片
imgList:app_path+"index.php/home/index/imageList",
//展示远程图片地址
fetchImage:app_path+"index.php/home/index/fetch",
//历史视频
vedioList:app_path+"index.php/home/index/videoList",
//历史音频
audioList:app_path+"index.php/home/index/audioList",
deleteFile:app_path+"index.php/home/index/deleteFile"
};
- 调用方式，参照
webTest/index.html引入css和js文件，再调用需要上传的方法，方法里的参数有 domName 节点名、defaultValue 默认值、options 配置 。具体参数使用方式查看webTest/assets/js/EasyUpload.js如下所示：
<script>
$(function () {
//图片上传
EasyUpload.loadFiledImage("#filedImage");
//编辑器
EasyUpload.loadUeditor("#content");
//音频上传
EasyUpload.loadAudio('#audios');
//视频上传
EasyUpload.loadVideo('#movies');
});
</script>
- 文件上传返回格式：
{
"ext": "gif",
"name": "jdfw.gif",
"attachment": "/Uploads/image/2017-09-06/59afb44c54ef4.gif",
"filename": "/Uploads/image/2017-09-06/59afb44c54ef4.gif",
"url": "http://10.10.12.232:99/Uploads/image/2017-09-06/59afb44c54ef4.gif",
"is_image": 1,
"filesize": 1280038,
"height": 80,
"widch": 80
}
- 历史记录返回格式(items的key为id的值)
{
"message": {
"message": {
"items": {
"1": {
"id": "1",
"filename": "cms结构_v1.png",
"attachment": "/Uploads/image/2017-09-06/59afb1fbeeaf1.png",
"url": "/Uploads/image/2017-09-06/59afb1fbeeaf1.png",
"type": "1",
"createtime": "2017-09-06"
}
},
"page": ""
},
"error": 0
},
"redirect": "",
"type": "ajax"
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent