如何打造更实用的ElementUI图片上传预览组件？

本文共计2148个文字，预计阅读时间需要9分钟。

目录+前言+1. 功能设计+2. 实现+2.1 图片预览+PicturePreviewer+2.2 图片上传+ImageUpload+3. 后记+前言+关于全局+Loading组件的发展点，基本一致，因为产品觉得ElementUI提供的默认上传组件不够用。

目录

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

前言

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

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

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

1. 功能设计

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