Problem: when calling multiple clipper plug-ins on a page, we will find that although we have declared each id, when we click the corresponding area, the clipper clipping area will pop up, but when we click save after selection, we will find that the clipped image will only appear in the last declared id. Although we can set a click event in each area to tell the clipper where the image is displayed by changing the corresponding one, it is troublesome and the code reuse rate is low.

The solution is as follows:

var uploadList = new Array();
	uploadList.push({"name": "upload", "uploadCount": 0, "url": ""});
	uploadList.push({"name": "upload2", "uploadCount": 0, "url": ""});
	uploadList.push({"name": "upload3", "uploadCount": 0, "url": ""});
function layuiInit() {
    layui.use(['element', 'form', 'layer', 'upload'], function(){
        var element = layui.element;
        var form = layui.form;
        var layer = layui.layer;
        var upload = layui.upload;
        
        upload.render({
            elem: 'upload, #upload2, #upload3',
            url: path + "fileManager/uploadImg",// Upload interface
            done: function(res) {
                $this = this.item;
                var name = $this.attr('id');
                var obj = uploadList.filter((u) => {
                    return u.name == name;
                })[0];
                // Delete the last uploaded but not submitted picture
                if(obj.uploadCount > 0) {
                    $.ajax({
                        type: "get",
                        url: path + "fileManager/deletePicture?url=" + obj.url,
                        contentType: "application/x-www-form-urlencoded;charset=utf-8",
                        success: function() {}
                    });
                }
                // assignment
                $this.attr("value", res[0]);
                // Echo preview picture
                $this.css({
                    "background-image": "url(" + path + "fileManager/showPicture?url=" 
                    + res[0] +")"
                });
                // Splicing (functional requirements: upload only has one picture, no splicing is required, other needs)
                var $input = $this.parent().prevAll('input');
                var value = $input.val();
                if(name == 'upload' || value == "") {
                    $input.val(res[0]);
                } else {
                    $input.val($input.val() + "," + res[0] + ",");
                }
				
                obj.uploadCount++;
                obj.url = res[0];
            },
            error: function(){}
        }); 
    });
}

Portal:

Download address and user manual of layer UI clipping plug-in clipper: https://fly.layui.com/extend/croppers/