基于vue element-ui 封装上传图片组件 功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等

学习目标：

我们在开发后台时肯定避免不了上传图片的功能

例如：

• 上传图片回显
• 上传完成 : 预览查看 , 删除等
• 如果是图片列表,还可能让你拖动图片排序
• 有的后台项目可能要给图片添加水印,添加标记
• 有的后台可能要炫酷一点 添加进度条功能

---

学习内容：

现在我们要完成上面的一系列功能,这里我用到了vue element ui的弹窗组件,预览图片组件,还有axios,axios是二次封装的,你们可以自行根据你们的项目来封装

效果演示:

基于vue element-ui 封装上传图片组件

---

上传图片组件代码

进度条小球组件代码

使用

注意:

        imgList格式一定要注意 id为唯一值 你们可以取当前时间戳 或者 后端返回的图片id

使用

1. lists 是图片数组数据 格式一定要对

2. max-num-hide 对话框 是否可以修改图片个数

3. max-num 是最多图片个数 不是选中图片个数

4. img-type 是图片类型 是数组 这里我没做处理 直接用的['image/jpeg', 'image/png']这种格式,你们想要修改,请自行修改

5. is-size 是上传图片前是否判断图片尺寸 根据 img-size 来判断 如果is-size 为false 那img-size 配置不生效

6. img-size 是限制图片尺寸 为数组 第一项为图片宽度 第二项为图片高度

7. is-watermark 是 是否开启水印功能 

8. watermark-title 是水印的文字 如果 is-watermark 为fasle啧该配置也无效

9. is-multiple 是选择图片是否为多选 true 为多选 ,false 为单选 单选是则开启上传进度条功能

这个组件并没有封装上传地址什么的 自行去源码修改 可根据你们后端的接口方式自行上传 很简单 你们肯定会

---

学习总结：

功能也算挺完善的一个上传图片组件,已知的就差裁剪功能了,如果有bug请联系我,谢谢,随便写着玩的