使用layui框架完成多图片上传以及layui的富文本功能，资料分享

//假设code=0代表上传成功

if(res.code == 0){

//do something （比如将res返回的图片链接保存到表单的隐藏域）

multiple_images.push(res.data.src);

//multiple_images是自定义的一个数据，即当每次上传成功的时候就将图片的链接push进去，最后在赋值给input标签

//.multiple_show_img是input标签，用于存储图片的链接

$(‘.multiple_show_img’).val(multiple_images);

}

else{

layer.msg(res.message);

}

}

});

• 每次点击添加的图片都是动态创建的

3. 实现效果

3.整体代码

3.1 js文件

var multiple_images = []; //用于存储多张图片的地址

// 点击图片进行删除操作的全局函数

function delMultipleImgs(this_img) {

var subscript = $(“#div-slide_show img”).index(this_img);

this_img.remove();

multiple_images.splice(subscript, 1);

multiple_images.sort();

$(‘.multiple_show_img’).val(multiple_images);

return;

}

$(() => {

var index, layedit, layer;

layui.use([‘form’, ‘layedit’, ‘upload’], function () {

layedit = layui.layedit,

form = layui.form,

upload = layui.upload;

layedit.set({

uploadImage: {

url: ‘xxx’,//上传图片的接口

type: ‘post’,

dataType: ‘json’,

success: function (res) {

console.log(res.code)

}

}

});

uplo