vue+elementUi图片上传组件使用详解

前端  /  管理员 发布于 5年前   661

上传组件封装需求分析

在基于elementUI库做的商城后台管理中，需求最大的是商品管理表单这块，因为需要录入各种各样的商品图片信息。加上后台要求要传递小于2M的图片，因此封装了一个upload.vue组件作为上传页面的子组件，它用于管理图片上传逻辑。

upload.vue解析

upload主要用于实现表单上传图片的需求，主要由input +img 构成当没有图片的时候显示默认图片，有图片则显示上传图片，因为input样式不太符合需求所以只是将起设置为不可见，不能将其设置为display:none。否则将将无法触发input的change事件

upload.vue代码如下:

商品页中使用upload组件

在good.vue中我们引入upload组件。并且传递相应表单对象，需上传的图片类型的属性，以及图片显示样式给子组件

good.vue核心代码:

写在最后

关于图片上传之前我也写过一个小程序版本，总体看来pc端的图片上传相对于小程序 要复杂一点，这个封装只能满足当下单图上传的需求也有他的不足之处。当然也可以扩展为多图上传，关于多图上传的网上也有很多例子。这里不再一一赘述。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• vue+element-ui+axios实现图片上传
• Vue + Element UI图片上传控件使用详解
• vue+elementUI实现图片上传功能
• Vue Element UI + OSS实现上传文件功能
• vue+elementUI实现表单和图片上传及验证功能示例
• vue-cli3.0+element-ui上传组件el-upload的使用
• 在vue项目中使用element-ui的Upload上传组件的示例
• vuejs+element-ui+laravel5.4上传文件的示例代码
• Vue+Element-UI实现上传图片并压缩