459 lines
16 KiB
JavaScript
459 lines
16 KiB
JavaScript
layui.define(['upload', 'element', 'ajax'], function (exports) {
|
||
let $ = layui.$;
|
||
let layer = layui.layer;
|
||
let layuiUpload = layui.upload;
|
||
let element = layui.element;
|
||
let ajax = layui.ajax;
|
||
let ICON = {
|
||
file: 'fa-file-o',
|
||
image: 'fa-file-image-o',
|
||
video: 'fa-file-movie-o',
|
||
audio: 'fa-file-sound-o',
|
||
}
|
||
|
||
/**
|
||
* 渲染表格行
|
||
* @param name
|
||
* @param fileArray
|
||
* @param icon
|
||
* @param hasShow
|
||
* @param isImgPreview
|
||
*/
|
||
function renderItem(name, fileArray, icon, hasShow, isImgPreview) {
|
||
if(isImgPreview) {
|
||
let imgs = '';
|
||
$.each(fileArray, function (index, item) {
|
||
imgs += `
|
||
<div class="img-container" data-index="${index}" data-id="${item.id}" data-name="${item.name}">
|
||
<img src="route/file/v2/download/true/${item.id}" alt="加载失败" title="${item.name}">
|
||
<button type="button" class="layui-btn layui-btn-xs layui-btn-danger file-delete" data-index="${index}" title="删除"><i class="fa fa-trash"></i></button>
|
||
</div>
|
||
`;
|
||
});
|
||
let container = $(`#${name}ImgPreviewContainer`);
|
||
container.empty();
|
||
container.append(imgs);
|
||
} else {
|
||
let trs = '';
|
||
$.each(fileArray, function (index, item) {
|
||
let showButton = hasShow ? `<button type="button" class="layui-btn layui-btn-xs layui-btn-normal file-show" data-index="${index}" title="查看"><i class="fa fa-search"></i></button>` : '';
|
||
trs += `
|
||
<tr>
|
||
<td><i class="fa ${icon}"></i> ${item.name}</td>
|
||
<td class="btn-group">
|
||
<div class="layui-btn-group">
|
||
${showButton}
|
||
<button type="button" class="layui-btn layui-btn-xs file-download" data-index="${index}" title="下载"><i class="fa fa-download"></i></button>
|
||
<button type="button" class="layui-btn layui-btn-xs layui-btn-danger file-delete" data-index="${index}" title="删除"><i class="fa fa-trash"></i></button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
`;
|
||
});
|
||
let tBody = $(`#${name}ContainerTBody`).append(trs);
|
||
tBody.empty();
|
||
tBody.append(trs);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 渲染表格
|
||
* @param name
|
||
* @param explain
|
||
* @param isUpload
|
||
* @param isImgPreview
|
||
*/
|
||
function render(name, explain, isUpload, isImgPreview) {
|
||
let uploadBtn = isUpload ? `
|
||
<div class="btn-process">
|
||
<button type="button" id="${name}UploadBtn" class="layui-btn layui-btn-primary layui-border-blue layui-upload-file-btn"><i class="fa fa-upload"></i> ${explain}</button>
|
||
<div id="${name}UploadProcess" class="layui-progress" lay-filter="${name}UploadProcess">
|
||
<div class="layui-progress-bar layui-bg-blue"></div>
|
||
</div>
|
||
</div>
|
||
` : '';
|
||
if(isImgPreview) {
|
||
$(`#${name}Container`).append(`
|
||
${uploadBtn}
|
||
<div id="${name}ImgPreviewContainer" class="img-preview-container"></div>
|
||
`);
|
||
} else {
|
||
$(`#${name}Container`).append(`
|
||
${uploadBtn}
|
||
<table id="${name}Table" class="layui-table">
|
||
<colgroup>
|
||
<col>
|
||
<col width="100">
|
||
</colgroup>
|
||
<tbody id="${name}ContainerTBody"></tbody>
|
||
</table>
|
||
`);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 文件文本转数组
|
||
* @param files
|
||
* @return {*[]}
|
||
*/
|
||
function files2FileArray(files) {
|
||
if (!files) {
|
||
return [];
|
||
}
|
||
let fileArray = [];
|
||
$.each(files.split(','), function (index, item) {
|
||
let idNameArray = item.split(':');
|
||
fileArray.push({
|
||
id: idNameArray[0],
|
||
name: idNameArray[1]
|
||
})
|
||
});
|
||
return fileArray;
|
||
}
|
||
|
||
/**
|
||
* 文件数组转文本
|
||
* @param fileArray
|
||
*/
|
||
function fileArray2Files(fileArray) {
|
||
let files = [];
|
||
$.each(fileArray, function (index, item) {
|
||
files.push(item.id + ':' + item.name.replace(/,/g, '，'));
|
||
})
|
||
return files.join(',');
|
||
}
|
||
|
||
/**
|
||
* 上传
|
||
* @param params
|
||
*/
|
||
function upload(params) {
|
||
let inputElem = params.inputElem;
|
||
let files = inputElem.val();
|
||
let fileArray = files2FileArray(files);
|
||
let isUpload = params.isUpload;
|
||
let hasShow = !!(params.field === 'image' || params.field === 'video' || params.field === 'audio' || params.onShow);
|
||
let isImgPreview = typeof(params.isImgPreview) === 'undefined' ? false : params.isImgPreview;
|
||
let isVideoPreview = typeof(params.isVideoPreview) === 'undefined' ? false : params.isVideoPreview;
|
||
let isAudioPreview = typeof(params.isAudioPreview) === 'undefined' ? false : params.isAudioPreview;
|
||
render(params.name, params.explain, isUpload, isImgPreview);
|
||
renderItem(params.name, fileArray, params.fileIcon, hasShow, isImgPreview);
|
||
renderUploadBtn(params.name, fileArray, params.maxCount);
|
||
|
||
/**
|
||
* 渲染上传按钮
|
||
*/
|
||
function renderUploadBtn(name, fileArray, maxCount) {
|
||
let btn = $(`#${name}UploadBtn`);
|
||
if (fileArray.length < maxCount) {
|
||
btn.removeClass('layui-btn-disabled');
|
||
btn.attr('disabled', false);
|
||
} else {
|
||
btn.addClass('layui-btn-disabled');
|
||
btn.attr('disabled', true);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 渲染上传
|
||
*/
|
||
function renderUpload() {
|
||
layuiUpload.render({
|
||
elem: `#${params.name}UploadBtn`,
|
||
url: params.url,
|
||
accept: params.accept,
|
||
acceptMime: params.acceptMime.join(','),
|
||
field: params.field,
|
||
exts: params.exts.join('|'),
|
||
headers: params.headers,
|
||
name: params.name,
|
||
before: function (obj) {
|
||
},
|
||
done: function (res, index, upload) {
|
||
setTimeout(function () {
|
||
element.progress(`${params.name}UploadProcess`, '0%');
|
||
}, 800);
|
||
|
||
let file = res.data;
|
||
fileArray.push({
|
||
id: file.fileId,
|
||
name: file.fileName
|
||
});
|
||
renderItem(params.name, fileArray, params.fileIcon, hasShow, isImgPreview);
|
||
renderUploadBtn(params.name, fileArray, params.maxCount);
|
||
inputElem.val(fileArray2Files(fileArray));
|
||
},
|
||
error: function (index, upload) {
|
||
layer.msg('上传失败');
|
||
},
|
||
progress: function (n, elem, res, index) {
|
||
element.progress(`${params.name}UploadProcess`, n + '%');
|
||
}
|
||
});
|
||
}
|
||
|
||
function addEvent() {
|
||
let containerElem = $(`#${params.name}Container`);
|
||
if(isImgPreview) {
|
||
// 图片显示
|
||
containerElem.on('click', '.img-container', function() {
|
||
let dataset = this.dataset;
|
||
console.log(dataset);
|
||
let id = dataset.id;
|
||
let name = dataset.name;
|
||
top.dialog.photos({
|
||
fileId: id,
|
||
fileName: name
|
||
});
|
||
});
|
||
}
|
||
if(isVideoPreview) {
|
||
// 视频
|
||
containerElem.on('click', '.file-show', function () {
|
||
let index = parseInt(this.dataset.index);
|
||
let file = fileArray[index];
|
||
if (params.onShow) {
|
||
params.onShow(file);
|
||
} else {
|
||
top.dialog.video({
|
||
fileId: file.id
|
||
})
|
||
}
|
||
});
|
||
}
|
||
if(isAudioPreview) {
|
||
containerElem.on('click', '.file-show', function () {
|
||
let index = parseInt(this.dataset.index);
|
||
let file = fileArray[index];
|
||
if (params.onShow) {
|
||
params.onShow(file);
|
||
} else {
|
||
top.dialog.audio({
|
||
fileId: file.id
|
||
})
|
||
}
|
||
});
|
||
}
|
||
containerElem.on('click', '.file-download', function () {
|
||
let index = parseInt(this.dataset.index);
|
||
let file = fileArray[index];
|
||
window.open(`route/file/v2/download/${file.id}`, '_blank');
|
||
});
|
||
containerElem.on('click', '.file-delete', function (e) {
|
||
let index = parseInt(this.dataset.index);
|
||
fileArray.splice(index, 1);
|
||
renderItem(params.name, fileArray, params.fileIcon, hasShow, isImgPreview);
|
||
renderUploadBtn(params.name, fileArray, params.maxCount);
|
||
inputElem.val(fileArray2Files(fileArray));
|
||
e.stopPropagation();
|
||
});
|
||
}
|
||
|
||
if (isUpload) {
|
||
renderUpload();
|
||
}
|
||
addEvent();
|
||
}
|
||
|
||
/**
|
||
* 设置通用配置
|
||
* @param params
|
||
* @param opt
|
||
*/
|
||
function setCommonOpt(params, opt) {
|
||
params.name = opt.name;
|
||
params.explain = opt.explain;
|
||
params.headers = opt.headers ? opt.headers : {};
|
||
params.isUpload = (typeof (opt.isUpload) === 'undefined' || opt.isUpload === null) ? true : opt.isUpload;
|
||
params.onShow = opt.onShow && $.isFunction(opt.onShow) ? opt.onShow : null;
|
||
params.inputElem = $(`#${opt.name}`);
|
||
}
|
||
|
||
/**
|
||
* 上传图片
|
||
* @param opt
|
||
*/
|
||
function uploadImage(opt) {
|
||
let params = {};
|
||
let isExtsConcat = !!opt.isExtsConcat;
|
||
let exts = ['jpg', 'png', 'gif', 'bmp', 'jpeg'];
|
||
let extArray = opt.exts;
|
||
if (extArray && $.isArray(extArray)) {
|
||
if (!isExtsConcat) {
|
||
exts = extArray;
|
||
} else {
|
||
exts = exts.concat(extArray);
|
||
}
|
||
}
|
||
let acceptMime = ['image/*'];
|
||
let acceptMimeArray = opt.acceptMime;
|
||
if (acceptMimeArray && $.isArray(acceptMimeArray)) {
|
||
if (!isExtsConcat) {
|
||
acceptMime = acceptMimeArray;
|
||
} else {
|
||
acceptMime = acceptMime.concat(acceptMimeArray);
|
||
}
|
||
}
|
||
|
||
let isApp = !!opt.isApp;
|
||
if (isApp) {
|
||
params.url = ajax.path('app/file/v2/upload-image{release}', [!!opt.isAppRelease ? '-release' : '']);
|
||
} else {
|
||
params.url = ajax.path('api/file/v2/upload-image', []);
|
||
}
|
||
params.exts = exts;
|
||
params.acceptMime = acceptMime;
|
||
params.accept = 'images';
|
||
params.field = 'image';
|
||
params.fileIcon = ICON.image;
|
||
params.maxCount = opt.maxCount ? opt.maxCount : 6;
|
||
params.isImgPreview = true;
|
||
setCommonOpt(params, opt);
|
||
upload(params);
|
||
}
|
||
|
||
/**
|
||
* 上传视频
|
||
* @param opt
|
||
*/
|
||
function uploadVideo(opt) {
|
||
let params = {};
|
||
let isApp = !!opt.isApp;
|
||
if (isApp) {
|
||
params.url = ajax.path('app/file/v2/upload-video{release}', [!!opt.isAppRelease ? '-release' : '']);
|
||
} else {
|
||
params.url = ajax.path('api/file/v2/upload-video', []);
|
||
}
|
||
let isExtsConcat = !!opt.isExtsConcat;
|
||
let exts = ['mp4'];
|
||
let extArray = opt.exts;
|
||
if (extArray && $.isArray(extArray)) {
|
||
if (!isExtsConcat) {
|
||
exts = extArray;
|
||
} else {
|
||
exts = exts.concat(extArray);
|
||
}
|
||
}
|
||
let acceptMime = ['video/mp4'];
|
||
let acceptMimeArray = opt.acceptMime;
|
||
if (acceptMimeArray && $.isArray(acceptMimeArray)) {
|
||
if (!isExtsConcat) {
|
||
acceptMime = acceptMimeArray;
|
||
} else {
|
||
acceptMime = acceptMime.concat(acceptMimeArray);
|
||
}
|
||
}
|
||
params.exts = exts;
|
||
params.acceptMime = acceptMime;
|
||
params.accept = 'video';
|
||
params.field = 'video';
|
||
params.fileIcon = ICON.video;
|
||
params.maxCount = opt.maxCount ? opt.maxCount : 1;
|
||
params.isVideoPreview = true;
|
||
setCommonOpt(params, opt);
|
||
upload(params);
|
||
}
|
||
|
||
/**
|
||
* 上传音频
|
||
* @param opt
|
||
*/
|
||
function uploadAudio(opt) {
|
||
let params = {};
|
||
let isApp = opt.isApp ? opt.isApp : false;
|
||
if (isApp) {
|
||
params.url = ajax.path('app/file/v2/upload-audio{release}', [!!opt.isAppRelease ? '-release' : '']);
|
||
} else {
|
||
params.url = ajax.path('api/file/v2/upload-audio', []);
|
||
}
|
||
let isExtsConcat = !!opt.isExtsConcat;
|
||
let exts = ['wav', 'mp3'];
|
||
let extArray = opt.exts;
|
||
if (extArray && $.isArray(extArray)) {
|
||
if (!isExtsConcat) {
|
||
exts = extArray;
|
||
} else {
|
||
exts = exts.concat(extArray);
|
||
}
|
||
}
|
||
let acceptMime = ['audio/wav', 'audio/mp3'];
|
||
let acceptMimeArray = opt.acceptMime;
|
||
if (acceptMimeArray && $.isArray(acceptMimeArray)) {
|
||
if (!isExtsConcat) {
|
||
acceptMime = acceptMimeArray;
|
||
} else {
|
||
acceptMime = acceptMime.concat(acceptMimeArray);
|
||
}
|
||
}
|
||
params.exts = exts;
|
||
params.acceptMime = acceptMime;
|
||
params.accept = 'audio';
|
||
params.field = 'audio';
|
||
params.fileIcon = ICON.audio;
|
||
params.maxCount = opt.maxCount ? opt.maxCount : 1;
|
||
params.isAudioPreview = true;
|
||
setCommonOpt(params, opt);
|
||
upload(params);
|
||
}
|
||
|
||
/**
|
||
* 上传文件
|
||
* @param opt
|
||
*/
|
||
function uploadFile(opt) {
|
||
let params = {};
|
||
let isApp = !!opt.isApp;
|
||
if (isApp) {
|
||
params.url = ajax.path('app/file/v2/upload-file{release}', [!!opt.isAppRelease ? '-release' : '']);
|
||
} else {
|
||
params.url = ajax.path('api/file/v2/upload-file', []);
|
||
}
|
||
let isExtsConcat = !!opt.isExtsConcat;
|
||
let exts = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'wps', 'txt', 'rar', 'zip'];
|
||
let extArray = opt.exts;
|
||
if (extArray && $.isArray(extArray)) {
|
||
if (!isExtsConcat) {
|
||
exts = extArray;
|
||
} else {
|
||
exts = exts.concat(extArray);
|
||
}
|
||
}
|
||
let acceptMime = [
|
||
'application/pdf',
|
||
'application/msword',
|
||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||
'application/vnd.ms-excel',
|
||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||
'application/vnd.ms-powerpoint',
|
||
'application/vnd.openxmlformats-officedocument.presentationml.presentation',
|
||
'application/vnd.ms-works',
|
||
'text/plain',
|
||
'application/x-rar',
|
||
'application/x-zip-compressed'
|
||
];
|
||
let acceptMimeArray = opt.acceptMime;
|
||
if (acceptMimeArray && $.isArray(acceptMimeArray)) {
|
||
if (!isExtsConcat) {
|
||
acceptMime = acceptMimeArray;
|
||
} else {
|
||
acceptMime = acceptMime.concat(acceptMimeArray);
|
||
}
|
||
|
||
}
|
||
params.exts = exts;
|
||
params.acceptMime = acceptMime;
|
||
params.accept = 'file';
|
||
params.field = 'file';
|
||
params.fileIcon = ICON.file;
|
||
params.maxCount = opt.maxCount ? opt.maxCount : 6;
|
||
setCommonOpt(params, opt);
|
||
upload(params);
|
||
}
|
||
|
||
exports('file', {
|
||
uploadImage: uploadImage,
|
||
uploadVideo: uploadVideo,
|
||
uploadAudio: uploadAudio,
|
||
uploadFile: uploadFile
|
||
});
|
||
}); |