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
|
|||
|
|
});
|
|||
|
|
});
|