处理问题

This commit is contained in:
wanggeng 2022-05-31 12:17:15 +08:00
parent 7d73684052
commit 787de7293b
2 changed files with 508 additions and 1 deletions

View File

@ -0,0 +1,507 @@
function LayuiUtil(layui, viewer) {
var $ = layui.$;
var layer = layui.layer;
var upload = layui.upload;
var laydate = layui.laydate;
var form = layui.form;
var Viewer = viewer;
var restAjax = layui.restajax;
var viewerObj = {};
/**
* 上传图片
* @param opt
*/
this.initUploadImage = function (opt) {
var maxCount = opt.maxCount ? parseInt(opt.maxCount) : 9
maxCount = opt.maxCount < 0 ? 9 : opt.maxCount;
var fieldName = opt.fieldName;
var isShow = opt.isShow;
var defaultAllowExts = ['jpg', 'png', 'gif', 'bmp', 'jpeg'];
var allowExts = opt.allowExts;
allowExts = allowExts && (allowExts instanceof Array) ? defaultAllowExts.concat(allowExts).join('\\|') : defaultAllowExts.join('\\|');
var defaultAcceptMime = ['image/*'];
var acceptMime = opt.acceptMime;
acceptMime = acceptMime && (acceptMime instanceof Array) ? defaultAcceptMime.concat(acceptMime).join(',') : defaultAcceptMime.join(',');
var id = '#' + fieldName;
var fileBoxId = id + 'FileBox';
var uploadBtnId = id + 'UploadBtn';
var deleteBtnClass = '.delete-' + fieldName + '-btn';
function init(callback) {
var fileIds = $(id).val();
var fileIdArray = fileIds ? fileIds.split(',') : [];
var html = '';
for (var i = 0, fileId; fileId = fileIdArray[i++];) {
html += [
'<div class="form-upload-image">',
' <img src="route/file/download/true/' + fileId + '" align="加载失败">',
' <a class="layui-btn layui-btn-xs layui-btn-danger delete-btn delete-' + fieldName + '-btn" href="javascript:void(0);" data-id="' + fileId + '" data-name="' + fieldName + '">',
' <i class="fa fa-trash-o"></i>',
' </a>',
'</div>',
].join('');
}
$(fileBoxId).empty();
$(fileBoxId).append(html);
if (fileIdArray.length < maxCount) {
$(uploadBtnId).removeClass('layui-btn-disabled');
$(uploadBtnId).attr('disabled', false);
} else {
$(uploadBtnId).addClass('layui-btn-disabled');
$(uploadBtnId).attr('disabled', true);
}
callback ? callback() : '';
}
function addClick() {
var layerLoadingIndex;
upload.render({
elem: uploadBtnId,
url: 'api/file/v2/upload-image',
accept: 'images',
acceptMime: acceptMime,
field: 'image',
exts: allowExts,
name: fieldName,
before: function (obj) {
layerLoadingIndex = layer.msg('上传中...', {icon: 16, time: 0, shade: 0.3})
},
done: function (res, index, upload) {
layer.close(layerLoadingIndex);
var name = this.name;
var files = $('#' + this.name).val();
if (files.length > 0) {
files += ',';
}
files += res.data.fileId;
$('#' + name).val(files);
init(function () {
viewerObj[name].update();
});
},
error: function (index, upload) {
layer.close(layerLoadingIndex);
layer.msg('文件上传失败');
},
progress: function (n, elem, res, index) {
}
});
$(document).on('click', deleteBtnClass, function () {
var name = this.dataset.name;
var id = this.dataset.id;
var files = $('#' + name).val().replace(id, '');
files = files.replace(/\,+/g, ',');
if (files.charAt(0) == ',') {
files = files.substring(1);
}
if (files.charAt(files.length - 1) == ',') {
files = files.substring(0, files.length - 1);
}
$('#' + name).val(files);
init(function () {
viewerObj[name].update();
});
});
}
init(function () {
viewerObj[fieldName] = new Viewer(document.getElementById(fieldName + 'FileBox'), {navbar: false});
});
if (!isShow) {
addClick();
} else {
$(uploadBtnId).hide();
}
}
/**
* 上传文件
* @param opt
*/
this.initUploadFile = function (opt) {
var maxCount = opt.maxCount ? parseInt(opt.maxCount) : 3
maxCount = opt.maxCount < 0 ? 3 : opt.maxCount;
var fieldName = opt.fieldName;
var isShow = opt.isShow;
var allowExts = opt.allowExts;
var defaultAllowExts = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'wps', 'txt', 'rar', 'zip'];
allowExts = allowExts && (allowExts instanceof Array) ? defaultAllowExts.concat(allowExts).join('\\|') : defaultAllowExts.join('\\|');
var defaultAcceptMime = [
'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'
];
var acceptMime = opt.acceptMime;
acceptMime = acceptMime && (acceptMime instanceof Array) ? defaultAcceptMime.concat(acceptMime).join(',') : defaultAcceptMime.join(',');
var id = '#' + fieldName;
var fileBoxId = id + 'FileBox';
var uploadBtnId = id + 'UploadBtn';
var deleteBtnClass = '.delete-' + fieldName + '-btn';
function init() {
var files = $(id).val();
var fileArray = files ? files.split(',') : [];
var html = '';
if (fileArray.length > 0) {
html += [
'<div class="form-upload-file">',
' <table class="layui-table" lay-size="sm">',
' <colgroup>',
' <col>',
' <col width="60">',
' </colgroup>',
' <thead>',
' <tr>',
' <th>文件名</th>',
' <th class="operation">操作</th>',
' </tr>',
' </thead>',
' <tbody>',
].join('');
for (var i = 0, file; file = fileArray[i++];) {
var idNameArray = file.split(':');
var fileId = idNameArray[0];
var fileName = idNameArray[1];
html += [
'<tr>',
' <td><a href="route/file/download/false/' + fileId + '" target="_blank">' + fileName + '</a></td>',
' <td class="operation">',
' <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-btn delete-' + fieldName + '-btn" data-id="' + fileId + '" data-name="' + fileName + '" data-field-name="' + fieldName + '">删除</button>',
' </td>',
'</tr>',
].join('');
}
html += [
' </tbody>',
' </table>',
'</div>'
].join('');
}
$(fileBoxId).empty();
$(fileBoxId).append(html);
if (fileArray.length < maxCount) {
$(uploadBtnId).removeClass('layui-btn-disabled');
$(uploadBtnId).attr('disabled', false);
} else {
$(uploadBtnId).addClass('layui-btn-disabled');
$(uploadBtnId).attr('disabled', true);
}
}
function addClick() {
var layerLoadingIndex;
var url = 'api/file/v2/upload-file';
if (isApp) {
url = 'app/file/v2/upload-file'
}
if (isAppRelease) {
url = 'app/file/v2/upload-file-release'
}
upload.render({
elem: uploadBtnId,
url: url,
accept: 'file',
acceptMime: acceptMime,
field: 'file',
exts: allowExts,
name: fieldName,
before: function (obj) {
layerLoadingIndex = layer.msg('上传中...', {icon: 16, time: 0, shade: 0.3})
},
done: function (res, index, upload) {
layer.close(layerLoadingIndex);
var name = this.name;
var files = $('#' + this.name).val();
if (files.length > 0) {
files += ',';
}
files += res.data.fileId + ':' + res.data.fileName.replace(/\,/g, '');
$('#' + name).val(files);
init();
},
error: function (index, upload) {
layer.close(layerLoadingIndex);
layer.msg('文件上传失败');
},
progress: function (n, elem, res, index) {
}
});
$(document).on('click', deleteBtnClass, function () {
var id = this.dataset.id;
var name = this.dataset.name;
var fieldName = this.dataset.fieldName;
var files = $('#' + fieldName).val().replace(id + ':' + name, '');
files = files.replace(/\,+/g, ',');
if (files.charAt(0) == ',') {
files = files.substring(1);
}
if (files.charAt(files.length - 1) == ',') {
files = files.substring(0, files.length - 1);
}
$('#' + fieldName).val(files);
init();
});
}
init();
if (!isShow) {
addClick();
} else {
$(uploadBtnId).hide();
}
}
/**
* 初始化视频上传
* @param opt
*/
this.initUploadVideo = function (opt) {
var maxCount = opt.maxCount ? parseInt(opt.maxCount) : 1
maxCount = opt.maxCount < 0 ? 1 : opt.maxCount;
var fieldName = opt.fieldName;
var isShow = opt.isShow;
var defaultAllowExts = ['mp4'];
var allowExts = opt.allowExts;
allowExts = allowExts && (allowExts instanceof Array) ? defaultAllowExts.concat(allowExts).join('\\|') : defaultAllowExts.join('\\|');
var defaultAcceptMime = ['video/mp4'];
var acceptMime = opt.acceptMime;
acceptMime = acceptMime && (acceptMime instanceof Array) ? defaultAcceptMime.concat(acceptMime).join(',') : defaultAcceptMime.join(',');
var id = '#' + fieldName;
var fileBoxId = id + 'FileBox';
var uploadBtnId = id + 'UploadBtn';
var deleteBtnClass = '.delete-' + fieldName + '-btn';
function init() {
var files = $(id).val();
var fileArray = files ? files.split(',') : [];
var html = '';
for (var i = 0, file; file = fileArray[i++];) {
var idNameArray = file.split(':');
var fileId = idNameArray[0];
var fileName = idNameArray[1];
html += [
'<div class="form-upload-video">',
' <video width="320" height="240" controls>',
' <source src="route/file/download/true/' + fileId + '" type="video/mp4">',
' 您的浏览器不支持 video 标签',
' </video>',
' <a class="layui-btn layui-btn-xs layui-btn-danger delete-btn delete-' + fieldName + '-btn" href="javascript:void(0);" data-id="' + fileId + '" data-name="' + fileName + '" data-field-name="' + fieldName + '">',
' <i class="fa fa-trash-o"></i>',
' </a>',
'</div>',
].join('');
}
$(fileBoxId).empty();
$(fileBoxId).append(html);
if (fileArray.length < maxCount) {
$(uploadBtnId).removeClass('layui-btn-disabled');
$(uploadBtnId).attr('disabled', false);
} else {
$(uploadBtnId).addClass('layui-btn-disabled');
$(uploadBtnId).attr('disabled', true);
}
}
function addClick() {
var layerLoadingIndex;
upload.render({
elem: uploadBtnId,
url: 'api/file/v2/upload-video',
accept: 'video',
acceptMime: acceptMime,
exts: allowExts,
field: 'video',
name: fieldName,
before: function (obj) {
layerLoadingIndex = layer.msg('上传中...', {icon: 16, time: 0, shade: 0.3})
},
done: function (res, index, upload) {
layer.close(layerLoadingIndex);
var name = this.name;
var files = $('#' + this.name).val();
if (files.length > 0) {
files += ',';
}
files += res.data.fileId + ':' + res.data.fileName.replace(/\,/g, '');
$('#' + name).val(files);
init();
},
error: function (index, upload) {
layer.close(layerLoadingIndex);
layer.msg('文件上传失败');
},
progress: function (n, elem, res, index) {
}
});
$(document).on('click', deleteBtnClass, function () {
var name = this.dataset.name;
var id = this.dataset.id;
var fieldName = this.dataset.fieldName;
var files = $('#' + fieldName).val().replace(id + ':' + name, '');
files = files.replace(/\,+/g, ',');
if (files.charAt(0) == ',') {
files = files.substring(1);
}
if (files.charAt(files.length - 1) == ',') {
files = files.substring(0, files.length - 1);
}
$('#' + fieldName).val(files);
init();
});
}
init();
if (!isShow) {
addClick();
} else {
$(uploadBtnId).hide();
}
}
/**
* 上传音频
*/
this.initUploadAudio = function (opt) {
var maxCount = opt.maxCount ? parseInt(opt.maxCount) : 1
maxCount = opt.maxCount < 0 ? 1 : opt.maxCount;
var fieldName = opt.fieldName;
var isShow = opt.isShow;
var defaultAllowExts = ['wav', 'mp3'];
var allowExts = opt.allowExts;
allowExts = allowExts && (allowExts instanceof Array) ? defaultAllowExts.concat(allowExts).join('\\|') : defaultAllowExts.join('\\|');
var defaultAcceptMime = ['audio/wav', 'audio/mp3'];
var acceptMime = opt.acceptMime;
acceptMime = acceptMime && (acceptMime instanceof Array) ? defaultAcceptMime.concat(acceptMime).join(',') : defaultAcceptMime.join(',');
var id = '#' + fieldName;
var fileBoxId = id + 'FileBox';
var uploadBtnId = id + 'UploadBtn';
var deleteBtnClass = '.delete-' + fieldName + '-btn';
function init() {
var files = $(id).val();
var fileArray = files ? files.split(',') : [];
var html = '';
for (var i = 0, file; file = fileArray[i++];) {
var idNameArray = file.split(':');
var fileId = idNameArray[0];
var fileName = idNameArray[1];
html += [
'<div class="form-upload-video">',
' <audio src="route/file/download/true/' + fileId + '" controls>',
' 您的浏览器不支持 audio 标签。',
' </audio>',
' <a class="layui-btn layui-btn-xs layui-btn-danger delete-btn delete-' + fieldName + '-btn" href="javascript:void(0);" data-id="' + fileId + '" data-name="' + fileName + '" data-field-name="' + fieldName + '">',
' <i class="fa fa-trash-o"></i>',
' </a>',
'</div>',
].join('');
}
$(fileBoxId).empty();
$(fileBoxId).append(html);
if (fileArray.length < maxCount) {
$(uploadBtnId).removeClass('layui-btn-disabled');
$(uploadBtnId).attr('disabled', false);
} else {
$(uploadBtnId).addClass('layui-btn-disabled');
$(uploadBtnId).attr('disabled', true);
}
}
function addClick() {
var layerLoadingIndex;
var url = 'api/file/v2/upload-audio';
if (isApp) {
url = 'app/file/v2/upload-audio'
}
if (isAppRelease) {
url = 'app/file/v2/upload-audio-release'
}
upload.render({
elem: uploadBtnId,
url: url,
accept: 'audio',
acceptMime: acceptMime,
exts: allowExts,
field: 'audio',
name: fieldName,
headers: headers,
before: function (obj) {
layerLoadingIndex = layer.msg('上传中...', {icon: 16, time: 0, shade: 0.3})
},
done: function (res, index, upload) {
layer.close(layerLoadingIndex);
var name = this.name;
var files = $('#' + this.name).val();
if (files.length > 0) {
files += ',';
}
files += res.data.fileId + ':' + res.data.fileName.replace(/\,/g, '');
$('#' + name).val(files);
init();
},
error: function (index, upload) {
layer.close(layerLoadingIndex);
layer.msg('文件上传失败');
},
progress: function (n, elem, res, index) {
}
});
$(document).on('click', deleteBtnClass, function () {
var name = this.dataset.name;
var id = this.dataset.id;
var fieldName = this.dataset.fieldName;
var files = $('#' + fieldName).val().replace(id + ':' + name, '');
files = files.replace(/\,+/g, ',');
if (files.charAt(0) == ',') {
files = files.substring(1);
}
if (files.charAt(files.length - 1) == ',') {
files = files.substring(0, files.length - 1);
}
$('#' + fieldName).val(files);
init();
});
}
init();
if (!isShow) {
addClick();
} else {
$(uploadBtnId).hide();
}
}
}

View File

@ -294,7 +294,7 @@ function FormUtil(layui, viewer) {
'text/plain',
'application/x-rar',
'application/x-zip-compressed'
].join(''),
].join(','),
field: 'file',
exts: 'pdf|doc|docx|xls|xlsx|ppt|pptx|wps|txt|rar|zip',
name: fieldName,