在本文中，我们将深入探讨如何使用layui框架实现多图片上传并限制上传的图片数量。layui是一个轻量级的前端UI框架，提供了丰富的组件，包括图片上传功能。在实际项目中，有时我们需要对用户上传的图片数量进行控制，以满足特定的需求，例如限制每个门店展示的图片不超过6张。
我们看到代码中定义了一个名为`mouseChange`的函数，这个函数用于处理图片预览元素的鼠标悬停事件。当鼠标进入`.file-iteme`类的元素时，会显示图片的附加信息（如尺寸、名称等）以及删除按钮；当鼠标离开时，这些信息会隐藏。这是提高用户体验的一个常见做法，让用户能够轻松地查看和操作已选中的图片。
接着，`getJsonLength`函数用于计算一个JSON对象中键的数量，即元素的个数。在这个上下文中，它用于获取已选择文件的数量。这在判断用户是否超过了允许上传的最大图片数量时非常有用。
核心的图片上传部分由layui的`upload`组件实现。我们创建了一个名为`uploadListIns`的实例，通过调用`upload.render`方法配置上传参数：
- `elem`：指定触发上传的元素，这里是`#chooseImg`。
- `url`：图片上传的服务器端接口，这里动态获取了URL。
- `accept`和`acceptMime`：限制用户只能选择图像文件，支持JPG、PNG和JPEG格式。
- `exts`：进一步限制了文件扩展名。
- `size`：设置上传文件的最大大小，这里是1MB。
- `multiple`：开启多文件上传功能。
- `auto`：自动上传文件。
- `choose`：当用户选择文件时触发的回调函数。在这个回调中，我们检查当前选择的文件队列（`files`）长度，如果加上已有的教练图片数组（`coachPicsArray`）长度超过6张，就提示用户并删除当前选中的文件。否则，读取文件并预览。
在预览过程中，使用了FileReader API的`readAsDataURL`方法将文件转化为Base64编码的字符串，然后创建一个`Image`对象加载这个数据，以便获取图片的实际尺寸。这一步是可选的，但如果你的应用需要验证图片尺寸，这将非常有用。
layui提供的图片上传组件结合自定义的逻辑，使得在前端实现多图片上传并限制数量变得非常简单。用户在选择图片时，系统会实时检查图片数量，并在超出限制时给出反馈，提高了用户体验。这种实现方式在许多需要用户上传图片的场景中都有广泛的应用，如电商平台的商品上传、社交媒体的个人相册等。
