代码拉取完成,页面将自动刷新
基于Layui上传组件的多图上传解决方案,更高效的图片列表操作,默认带删除、查看操作,可自定义操作按钮传入,支持获取上传实例及上传之后的图片列表数据,支持layui的upload组件的各项回调及参数配置,自定义操作按钮支持事件点击回调处理
// 先定义一个容器
<div id="test"></div>
// 示例代码 仅供参考
layui.config({ base: 'js/modules/' }).extend({
multipleUpload: 'multipleUpload/multipleUpload'
}).use(['form', 'multipleUpload'], function() {
var $ = layui.$,
form = layui.form,
multipleUpload= layui.multipleUpload;
var ins = multipleUpload.render({
elem: '#test', // 你定义的容器id
upload_url: '/common/upload-img', // 你的实际图片上传地址
upload_choose:function (obj) {}, // 同upload choose回调,非必传
upload_before:function (obj) {}, // 同upload before回调,非必传
upload_error:function (index, upload) {}, // 同upload error 回调,非必传
upload_done: function (res, index, callback) { // 上传成功回调,必传,在处理自身的逻辑之后需要执行回调函数传入图片地址
callback(res.data,res.data.extra); 第二个参数是额外参数【用于上传服务端所需参数】
},
uploadConfig: {}, layui上传组件参数,按照layui upload组件参数传递即可,默认是空对象
unshift: true, // 上传图片是否启用头部插入,默认是从图片列表尾部插入,添加按钮始终在头部,传true标识每次新增图片将会在添加按钮前面插入,添加按钮会后移
hasDefaultBtn: true,// 是否需要默认按钮组,传入false不显示默认按钮组
upload_limit:0, // 上传个数限制,默认为0,即为不限制
className:'my_class', // 自定义class,会map到所有上传的图片item上,便于自定义操作
error:(error)=> {
}, // 上传限制报错,choose期间触发,便于自定义操作
btn: [ // 图片操作按钮组,默认自带删除,查看按钮,非必传
{
name: '点击1',
icon: 'layui-icon-add1',
on: function(){
console.log('我被点击了')
}
},
{
name: '点击2',
icon: 'layui-icon-add1',
on: function() {
console.log('我被点击了')
}
}
],
data: [ // 初始化图片列表,多用于修改页面回显图片数据,非必传
{
index: '1',
url: '/upload/20201208/1607398502q-UF01G3niVdnRvB5217.jpg',
extra:{}, // 额外参数用于上传服务端所需参数
},
{
index: '1',
url: '/upload/20201208/1607398502q-UF01G3niVdnRvB5217.jpg',
extra:{}, // 额外参数用于上传服务端所需参数
}
],
parseData: function(data) { // 处理data参数的格式的回调函数,data数据格式需要和上述例子相同,非必传
return data;
}
})
var images = ins.getUploadImages(); //获取上传的图片数组
var uploadIns = ins.getUploadInstance(); //获取upload上传实例![输入图片说明](https://images.gitee.com/uploads/images/2021/0108/175808_bd7518de_1476573.png "屏幕截图.png")
});
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。