【新增】商品图集上传新增批量上传图片,后端通用上传方法新增并发线程限制。

This commit is contained in:
jianweie code
2023-11-13 23:07:49 +08:00
parent 5e5aacdf59
commit 84f8c5b1e7
3 changed files with 175 additions and 60 deletions

View File

@@ -150,10 +150,11 @@
<fieldset class="layui-elem-field layui-field-title site-title"><legend><a name="compress">图集</a></legend></fieldset>
<div class="layui-form-item">
<div class="layui-input-inline layui-inline-4">
<div class="layui-input-inline layui-inline-10">
<input type="hidden" name="goods[images]" id="imageIds" class="layui-input" placeholder="请上传缩略图" lay-reqText="请上传缩略图" />
<button type="button" class="layui-btn layui-btn-sm" id="upBtnimageIds"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm" id="upBtnimageIdsOriginal"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm" id="upBtnimageIds"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm" id="upBtnimageIdsOriginal"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-bg-orange layui-btn-sm" id="upBatchBtn"><i class="layui-icon"></i></button>
</div>
<div class="layui-form-mid">
图集[建议数量控制在10张以内]
@@ -625,7 +626,7 @@
<!--//一键设置SKU图片时自动生成选中的SKU-->
<script id="imageSetMoreSku_tpl" type="text/html">
{{# layui.each(d, function(index, item){ }}
<input type="checkbox" name="skuAttrValue" value="{{item}}" title="{{item}}" lay-filter="skuAttrValue-filter">
<input type="checkbox" name="skuAttrValue" value="{{item}}" title="{{item}}" lay-filter="skuAttrValue-filter">
{{# }); }}
</script>
@@ -888,6 +889,54 @@
form.render();
});
//上传图集图图片
upload.render({
elem: '#upBatchBtn'
, url: '/api/Tools/UploadFiles' //改成您自己的上传接口
, multiple: true
, accept: 'images'
, exts: 'jpg|jpeg|png|gjf|webp|bmp|tif'
, drag: true
, allDone: function (obj) {
//var txt = "共选择了 【" + obj.total + "】 张图片,其中,上传成功 【" + obj.successful + "】 张,失败 <span style='color:red'>【" + obj.aborted + "】 </span>张";
//$("#tipTxt").html(txt);
}
, before: function (obj) {
//预读本地文件示例不支持ie8
obj.preview(function (index, file, result) {
$('#upload-more-list').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
});
}
, done: function (res) {
var loadIndex = layer.load(2);
//如果上传失败
if (res.code > 0) {
return layer.msg('上传失败');
}
else {
var url = res.data.src;//缩略图地址
var url2 = res.data.fileUrl;//原始图地址
imgs.push(res.data.src);
$('#imageIds').val(imgs);
var getTpl = image_tpl.innerHTML, view = document.getElementById('upload-more-list');
laytpl(getTpl).render(imgs, function (html) {
view.innerHTML = html;
});
layer.msg(res.msg);
layer.close(loadIndex);
}
}
, error: function () {
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span><a class= "layui-btn layui-btn-xs demo-reload" > 重试</a > ');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
upload.render({
elem: '#upBtnimageIdsOriginal'
, url: layui.setter.apiUrl + 'Api/Tools/UploadFiles'

View File

@@ -145,10 +145,11 @@
</div>
<fieldset class="layui-elem-field layui-field-title site-title"><legend><a name="compress">图集</a></legend></fieldset>
<div class="layui-form-item">
<div class="layui-input-inline layui-inline-4">
<div class="layui-input-inline layui-inline-10">
<input type="hidden" name="goods[images]" id="imageIds" value="{{d.data.model.images }}" class="layui-input" placeholder="请上传缩略图" lay-reqText="请上传缩略图" />
<button type="button" class="layui-btn layui-btn-sm" id="upBtnimageIds"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm" id="upBtnimageIdsOriginal"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm" id="upBtnimageIds"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm" id="upBtnimageIdsOriginal"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-bg-orange layui-btn-sm" id="upBatchBtn"><i class="layui-icon"></i></button>
</div>
<div class="layui-form-mid">
图集[建议数量控制在10张以内]
@@ -970,6 +971,54 @@
form.render();
});
//上传图集图图片
upload.render({
elem: '#upBatchBtn'
, url: '/api/Tools/UploadFiles' //改成您自己的上传接口
, multiple: true
, accept: 'images'
, exts: 'jpg|jpeg|png|gjf|webp|bmp|tif'
, drag: true
, allDone: function (obj) {
//var txt = "共选择了 【" + obj.total + "】 张图片,其中,上传成功 【" + obj.successful + "】 张,失败 <span style='color:red'>【" + obj.aborted + "】 </span>张";
//$("#tipTxt").html(txt);
}
, before: function (obj) {
//预读本地文件示例不支持ie8
obj.preview(function (index, file, result) {
$('#upload-more-list').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
});
}
, done: function (res) {
var loadIndex = layer.load(2);
//如果上传失败
if (res.code > 0) {
return layer.msg('上传失败');
}
else {
var url = res.data.src;//缩略图地址
var url2 = res.data.fileUrl;//原始图地址
imgs.push(res.data.src);
$('#imageIds').val(imgs);
var getTpl = image_tpl.innerHTML, view = document.getElementById('upload-more-list');
laytpl(getTpl).render(imgs, function (html) {
view.innerHTML = html;
});
layer.msg(res.msg);
layer.close(loadIndex);
}
}
, error: function () {
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span><a class= "layui-btn layui-btn-xs demo-reload" > 重试</a > ');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
upload.render({
elem: '#upBtnimageIdsOriginal'
, url: layui.setter.apiUrl + 'Api/Tools/UploadFiles'