mirror of
https://gitlab.52pay.top/go/easygoadmin.git
synced 2025-09-26 22:47:58 +08:00
422 lines
10 KiB
Go
422 lines
10 KiB
Go
/**
|
|
* 文件上传组件
|
|
* @author
|
|
* @since 2021/7/23
|
|
* @File : upload
|
|
*/
|
|
package widget
|
|
|
|
import (
|
|
"fmt"
|
|
"gitlab.52pay.top/go/easygoadmin/utils/gconv"
|
|
"html/template"
|
|
"reflect"
|
|
"strings"
|
|
)
|
|
|
|
// 上传图片
|
|
func UploadImage(param string, url interface{}, exts string, size int) template.HTML {
|
|
// 参数拆解
|
|
item := strings.Split(param, "|")
|
|
// 组件名称
|
|
name := item[0]
|
|
// 组件标题
|
|
title := "图片"
|
|
if item[1] != "" {
|
|
title = item[1]
|
|
}
|
|
// 组件显示尺寸
|
|
sizeStr := "90x90"
|
|
if item[2] != "" {
|
|
sizeStr = item[2]
|
|
}
|
|
sizeArr := strings.Split(sizeStr, "x")
|
|
// 组件提示语
|
|
showTips := item[3]
|
|
// 裁剪尺寸
|
|
cropSize := ""
|
|
isCrop := 2
|
|
if len(item) >= 5 && item[4] != "" {
|
|
cropSize = item[4]
|
|
isCrop = 1
|
|
} else {
|
|
cropSize = "300x300"
|
|
isCrop = 2
|
|
}
|
|
// 计算长宽比例
|
|
cropArr := strings.Split(cropSize, "x")
|
|
// 裁剪比例
|
|
cropRate := float64(gconv.Int(cropArr[0])) / float64(gconv.Int(cropArr[1]))
|
|
cropRateStr := fmt.Sprintf("%2f", cropRate)
|
|
|
|
// 上传后缀
|
|
if exts == "" {
|
|
exts = "jpg|png|gif|bmp|jpeg"
|
|
}
|
|
|
|
// 上传大小
|
|
if size <= 0 {
|
|
size = 10 * 1024
|
|
}
|
|
|
|
html := ``
|
|
html += `<style type="text/css">
|
|
.layui-upload-drag {
|
|
position: relative;
|
|
padding: 10px;
|
|
border: 1px dashed #e2e2e2;
|
|
background-color: #fff;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
color: #999;
|
|
}
|
|
</style>
|
|
<div class="layui-input-block">
|
|
<div class="layui-upload-drag">`
|
|
// 图片展示
|
|
html += `<img id="` + name + `_show_id" src="`
|
|
if url != nil && url != "" {
|
|
html += gconv.String(url)
|
|
} else {
|
|
html += `/resource/assets/images/default_upload.png`
|
|
}
|
|
html += `" alt="上传` + title + `" width="` + sizeArr[0] + `" height="` + sizeArr[1] + `">`
|
|
// 隐藏域
|
|
html += `<input type="hidden" id="` + name + `" name="` + name + `" value="`
|
|
// 隐藏域
|
|
if url != "" {
|
|
html += gconv.String(url)
|
|
}
|
|
html += `">
|
|
</div>
|
|
<div style="margin-top:10px;">
|
|
<button type="button" class="layui-btn" id="upload_` + name + `"><i class="layui-icon"></i>上传` + title + `</button>
|
|
</div>`
|
|
|
|
// 提示语
|
|
if showTips != "" {
|
|
html += `<div class="layui-form-mid layui-word-aux">建议尺寸：` + showTips + `</div>`
|
|
}
|
|
|
|
html += `</div>`
|
|
// 组件JS代码
|
|
html += `<script type="text/javascript">
|
|
layui.use(['upload','croppers'],function(){
|
|
//声明变量
|
|
var layer = layui.layer
|
|
,upload = layui.upload
|
|
,croppers = layui.croppers
|
|
,$ = layui.$;
|
|
|
|
if(` + gconv.String(isCrop) + `==1) {
|
|
|
|
//图片裁剪组件
|
|
croppers.render({
|
|
elem: '#upload_` + name + `'
|
|
,name:"` + name + `"
|
|
,saveW:` + cropArr[0] + ` //保存宽度
|
|
,saveH:` + cropArr[1] + `
|
|
,mark:` + cropRateStr + ` //选取比例
|
|
,area:['750px','500px'] //弹窗宽度
|
|
,url: "/upload/uploadImage"
|
|
,done: function(url){
|
|
//上传完毕回调
|
|
$('#` + name + `').val(url);
|
|
$('#` + name + `_show_id').attr('src',url);
|
|
}
|
|
});
|
|
|
|
}else{
|
|
|
|
/**
|
|
* 普通图片上传
|
|
*/
|
|
var uploadInst = upload.render({
|
|
elem: '#upload_` + name + `'
|
|
,url: "/upload/uploadImage"
|
|
,accept:'images'
|
|
,acceptMime:'image/*'
|
|
,exts: "` + exts + `"
|
|
,field:'file'//文件域字段名
|
|
,size: ` + gconv.String(size) + ` //最大允许上传的文件大小
|
|
,before: function(obj){
|
|
//预读本地文件
|
|
}
|
|
,done: function(res){
|
|
//上传完毕回调
|
|
|
|
if(res.code != 0){
|
|
layer.msg(res.msg,{ icon: 5 });
|
|
return false;
|
|
}
|
|
|
|
//上传成功
|
|
$('#` + name + `_show_id').attr('src', res.data.fileUrl);
|
|
$('#` + name + `').val(res.data.fileUrl);
|
|
}
|
|
,error: function(){
|
|
//请求异常回调
|
|
return layer.msg('数据请求异常');
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
</script>`
|
|
return template.HTML(html)
|
|
}
|
|
|
|
func Album(param string, data interface{}, exts string, size int) template.HTML {
|
|
// 参数拆解
|
|
item := strings.Split(param, "|")
|
|
// 组件名称
|
|
albumName := item[0]
|
|
//// 组件标题
|
|
//albumTitle := "图片"
|
|
//if item[1] != "" {
|
|
// albumTitle = item[1]
|
|
//}
|
|
// 组件显示尺寸
|
|
sizeStr := "90x90"
|
|
if item[2] != "" {
|
|
sizeStr = item[2]
|
|
}
|
|
sizeArr := strings.Split(sizeStr, "x")
|
|
// 允许最大上传数
|
|
albumNum := item[3]
|
|
// 组件提示语
|
|
albumTips := item[4]
|
|
// 裁剪尺寸
|
|
cropSize := ""
|
|
isCrop := 2
|
|
if len(item) >= 6 && item[5] != "" {
|
|
cropSize = item[5]
|
|
isCrop = 1
|
|
} else {
|
|
cropSize = "300x300"
|
|
isCrop = 2
|
|
}
|
|
// 计算长宽比例
|
|
cropArr := strings.Split(cropSize, "x")
|
|
// 裁剪比例
|
|
cropRate := gconv.Int(cropArr[0]) / gconv.Int(cropArr[1])
|
|
|
|
// 上传后缀
|
|
if exts == "" {
|
|
exts = "jpg|png|gif|bmp|jpeg"
|
|
}
|
|
|
|
// 上传大小
|
|
if size <= 0 {
|
|
size = 10 * 1024
|
|
}
|
|
|
|
// HTML拼接
|
|
html := ``
|
|
|
|
// CSS拼接
|
|
html += `<style type="text/css">
|
|
.layui-upload-drag {
|
|
position: relative;
|
|
padding: 10px;
|
|
border: 1px dashed #e2e2e2;
|
|
background-color: #fff;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
color: #999;
|
|
margin-right:10px;
|
|
margin-bottom:10px;
|
|
}
|
|
.del_img{
|
|
position: absolute;
|
|
z-index: 99;
|
|
right: 0;
|
|
top: 0;
|
|
width: 25px;
|
|
height: 25px;
|
|
display: block;
|
|
}
|
|
.del_img img{
|
|
position: absolute;
|
|
z-index: 9;
|
|
right: 0px;
|
|
top: 0px;
|
|
width: 25px;
|
|
height: 25px;
|
|
display: inline-block;
|
|
}
|
|
</style>`
|
|
|
|
// 上传控件拼接
|
|
if reflect.ValueOf(data).Kind() == reflect.Slice {
|
|
for _, v := range data.([]string) {
|
|
html += `<div class="layui-upload-drag">
|
|
<div class="del_img" onclick="remove_image_` + albumName + `(this);">
|
|
<img src="/resource/assets/images/delete.png">
|
|
</div>
|
|
<a href="` + v + `" target="_blank">
|
|
<img name="img_src_` + albumName + `" src="` + v + `" alt="` + albumTips + `(点击放大预览)" title="` + albumTips + `(点击放大预览)" width="` + sizeArr[0] + `" height="` + sizeArr[1] + `">
|
|
</a>
|
|
</div>`
|
|
}
|
|
}
|
|
html += `<div class="layui-upload-drag img_upload_` + albumName + `">
|
|
<img id="upload_album_` + albumName + `" src="/resource/assets/images/default_upload.png" alt="上传` + albumTips + `" title="上传` + albumTips + `" width="` + sizeArr[0] + `" height="` + sizeArr[1] + `">
|
|
<input type="hidden" id="` + albumName + `" name="` + albumName + `" value="">
|
|
</div>`
|
|
|
|
// JS拼接
|
|
html += `<script type="text/javascript">
|
|
|
|
layui.use(['upload','croppers'],function(){
|
|
|
|
//声明变量
|
|
var layer = layui.layer
|
|
,upload = layui.upload
|
|
,croppers = layui.croppers
|
|
,$ = layui.$;
|
|
|
|
// 初始化图片隐藏域
|
|
var ids = '';
|
|
$('img[name="img_src_` + albumName + `"]').each(function(){
|
|
ids += $(this).attr('src') + ","
|
|
});
|
|
ids = ids.substr(0, (ids.length - 1));
|
|
$("#` + albumName + `").val(ids);
|
|
|
|
if(` + gconv.String(isCrop) + `==1) {
|
|
// 图片裁剪组件
|
|
croppers.render({
|
|
elem: '#upload_album_` + albumName + `'
|
|
,name:"` + albumName + `"
|
|
,saveW:` + cropArr[0] + ` //保存宽度
|
|
,saveH:` + cropArr[1] + `
|
|
,mark:` + gconv.String(cropRate) + ` //选取比例
|
|
,area:['750px','500px'] //弹窗宽度
|
|
,url: "/upload/uploadImage"
|
|
,done: function(url){
|
|
// 如果上传失败
|
|
if(!url){
|
|
return layer.msg('上传失败');
|
|
}
|
|
|
|
var hideStr = $("#` + albumName + `").attr("value");
|
|
var itemArr = hideStr.split(',');
|
|
if(itemArr.length>="` + albumNum + `"){
|
|
layer.msg("最多上传` + albumNum + `张图片",{ icon: 5,time: 1000}, function () {
|
|
//TODO...
|
|
});
|
|
return false;
|
|
}
|
|
|
|
// 渲染界面
|
|
var attStr = '<div class="layui-upload-drag">'+
|
|
'<div class="del_img" onclick="remove_image_` + albumName + `(this);">'+
|
|
'<img src="/resource/assets/images/delete.png"></img>'+
|
|
'</div>'+
|
|
'<a href="'+url+'" target="_blank">'+
|
|
'<img name="img_src_` + albumName + `" src="'+url+'" alt="` + albumTips + `(点击放大预览)" title="` + albumTips + `(点击放大预览)" width="` + sizeArr[0] + `" height="` + sizeArr[1] + `">'+
|
|
'</a>'+
|
|
'</div>';
|
|
$(".img_upload_` + albumName + `").before(attStr);
|
|
|
|
// 获取最新的图集
|
|
var ids = '';
|
|
$('img[name="img_src_` + albumName + `"]').each(function(){
|
|
ids += $(this).attr('src') + ","
|
|
});
|
|
ids = ids.substr(0, (ids.length - 1));
|
|
// 给隐藏域赋值
|
|
$("#` + albumName + `").val(ids);
|
|
|
|
return false;
|
|
}
|
|
});
|
|
|
|
}else{
|
|
/**
|
|
* 普通图片上传
|
|
*/
|
|
var uploadInst = upload.render({
|
|
elem: '#upload_album_` + albumName + `'
|
|
,url: "/upload/uploadImage"
|
|
,accept:'images'
|
|
,acceptMime:'image/*'
|
|
,exts: "` + exts + `"
|
|
,field:'file'//文件域字段名
|
|
,size: ` + gconv.String(size) + ` //最大允许上传的文件大小
|
|
,multiple: true
|
|
,number: ` + albumNum + ` //最大上传张数
|
|
,before: function(obj){
|
|
//预读本地文件
|
|
}
|
|
,done: function(res){
|
|
//上传完毕回调
|
|
|
|
var hideStr = $("#` + albumName + `").attr("value");
|
|
var itemArr = hideStr.split(',');
|
|
if(itemArr.length>="` + albumNum + `"){
|
|
layer.msg("最多上传` + albumNum + `张图片",{ icon: 5,time: 1000}, function () {
|
|
//TODO...
|
|
});
|
|
return false;
|
|
}
|
|
|
|
//如果上传失败
|
|
if(res.status <= 0){
|
|
return layer.msg('上传失败');
|
|
}
|
|
|
|
//渲染界面
|
|
var attStr = '<div class="layui-upload-drag">'+
|
|
'<div class="del_img" onclick="remove_image_` + albumName + `(this);">'+
|
|
'<img src="/resource/assets/images/delete.png"></img>'+
|
|
'</div>'+
|
|
'<a href="'+res.data.fileUrl+'" target="_blank">'+
|
|
'<img name="img_src_` + albumName + `" src="'+res.data.fileUrl+'" alt="` + albumTips + `(点击放大预览)" title="` + albumTips + `(点击放大预览)" width="` + sizeArr[0] + `" height="` + sizeArr[1] + `">'+
|
|
'</a>'+
|
|
'</div>';
|
|
$(".img_upload_` + albumName + `").before(attStr);
|
|
|
|
//获取最新的图集
|
|
var ids = '';
|
|
$('img[name="img_src_` + albumName + `"]').each(function(){
|
|
ids += $(this).attr('src') + ","
|
|
});
|
|
ids = ids.substr(0, (ids.length - 1));
|
|
//给隐藏域赋值
|
|
$("#` + albumName + `").val(ids);
|
|
|
|
return false;
|
|
}
|
|
,error: function(){
|
|
//请求异常回调
|
|
return layer.msg('数据请求异常');
|
|
}
|
|
});
|
|
}
|
|
|
|
});
|
|
|
|
// 删除图片
|
|
function remove_image_` + albumName + `(obj) {
|
|
//obj.remove();
|
|
layui.$(obj).parent().remove();
|
|
|
|
//获取最新的图集
|
|
var ids = '';
|
|
layui.$('img[name="img_src_` + albumName + `"]').each(function(){
|
|
ids += layui.$(this).attr('src') + ","
|
|
});
|
|
ids = ids.substr(0, (ids.length - 1));
|
|
//给隐藏域赋值
|
|
layui.$("#` + albumName + `").val(ids);
|
|
}
|
|
|
|
</script>`
|
|
|
|
return template.HTML(html)
|
|
}
|