ElementUI修改实现更好用图片上传预览组件

目录

• 前言
• 1. 功能设计
• 2. 实现
• 2.1 图片预览 PicturePreviewer
• 2.2 图片上传 ImageUpload
• 3. 后记

前言

嗯，，，跟之前封装“全局 Loading”的出发点基本一样，因为产品觉得 ElementUI 提供的默认上传组件，使用“照片墙”或者“缩略图”模式都需要去改动原本的组件样式，并且缩略图尺寸也不能调整，预览模式也会对原始图片进行缩放和处理，不符合系统本身的样式规范。

最离谱的是，预览模式居然有背景色，但是背景色又没有填满整个 model 的背景区域，，，甚至还出现了滚动条！！！

所以，为了更好的配合产品和UI，特地重新编写了一个图片上传组件。

1. 功能设计

嗯，既然是图片上传，那么肯定只支持图片文件了。因为是内部项目，所以也保留了 http 上传部分，大家可以参照 ElementUI 适当修改。

修改后的上传组件支持以下功能：

• 上传（基础中的基础）
• 实现 v-model 语法糖绑定上传数据列表（嗯，，，也很基础）
• 需要支持大图预览
• 不能换行，超出宽度显示滚动条且支持鼠标控制（不用 shift 的那种）

功能设计完成之后，大致的页面样式就是这样的：

2. 实现

为了能够适应更多的场景，我决定把预览部分也直接提取出来。

2.1 图片预览 PicturePreviewer

这里的图片预览是基于 ElDialog 开发的，支持翻页、循环等。

本身不依赖外部的图片元素，可以和 ElDialog 一样直接使用 visible 属性来控制显示和隐藏。

2.2 图片上传 ImageUpload

图片预览处理完成够，就可以处理图片上传了。

因为是内部项目，所以上传方法还是使用的实例上的 axios 方法来发送上传请求的；在独立组件库中依然应该通过 props 的方式传递项目中定义的 http 请求方法。

组件接收一个最大张数限制 limitNum 和文件大小限制 size，以及预览控制 prev 和禁用状态 disabled。

在选择文件之后会立即上传、点击已上传文件则是预览当前文件；当前内部也依赖了 ElementUI 的 Message 组件，用来显示提示信息。

在预览区域前后也增加了一个插槽，用来插入开发者需要的其他信息。

在整个组件的 Dom 节点上，会添加一个鼠标的 mouseenter 事件，当鼠标在组件内部的时候，则计算内部的缩略图区域与外层节点的大小进行比较，如果大于外层父节点的宽度的话，则提示用户通过鼠标滚轮来控制缩略图区域的滚动。

3. 后记

整个组件虽然可以满足当时的系统的一个需求，但是仔细研究代码的话会发现依然有很多细节的地方需要修复。例如：

• 组件的 mouseenter 事件，每次被触发时都会给 dom 添加一个鼠标监听事件，而没有在鼠标移出时及时销毁监听
• 没有增加自定义 http 配置
• 没有控制预览组件的配置项
• 缩略图区域没有尺寸控制

等等一系列的问题，所以我们在抽离组件、公共逻辑的时候，还是需要尽可能的保留以后扩展的可能性，减少与外界逻辑或者业务的关联。

以上就是ElementUI修改实现更好用图片上传预览组件的详细内容，更多关于ElementUI图片上传预览的资料请关注脚本之家其它相关文章！