微客导航 » 文章资讯 » vue+elementUi图片上传组件使用详解

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

2023-08-16 23:13:04 133

上传组件封装需求分析

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

upload.vue解析

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

upload.vue代码如下:




/*
这里是默认的设置图片的尺寸。可以通过父组件传值将其覆盖
*/
.upload-box{
position:relative;
height:100px;
width:100px;
overflow:hidden;
}

.upload-boximg{
width:100%;
height:100%;
}

.upload-box.upload-input{
position:absolute;
left:0;
opacity:0;
width:100%;
height:100%;
}

商品页中使用upload组件

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

good.vue核心代码:

写在最后

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

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐