vue+elementUi做的图片上传组件

最新推荐文章于 2024-08-29 07:30:44 发布

情破

最新推荐文章于 2024-08-29 07:30:44 发布

阅读量4.7k

点赞数

分类专栏： elment-ui vue 文章标签：图片上传表单属性组件封装

本文链接：https://blog.csdn.net/u014106478/article/details/86020527

版权

本文详细介绍了如何基于Vue.js和ElementUI库封装一个图片上传组件，满足商品管理表单中上传小于2M图片的需求。组件由input和img元素构成，实现了无图片时显示默认图片，有图片时显示上传图片的功能。在实际应用中，如good.vue页面，通过传入表单对象和图片属性调用upload组件。虽然此组件适用于单图上传，但也可进一步扩展以支持多图上传。

摘要由CSDN通过智能技术生成

上传组件封装需求分析

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

upload.vue解析

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

upload.vue代码如下:

<template>
	<div>
		<div class="upload-box" :style="imgStyle">
			 <!-- 用户改变图片按钮的点击 触发上传图片事件  -->
			<input type="file" :ref="imgType$1"   @change="upload(formVal$1,imgType$1)" class="upload-input" />
			<!-- img 的 src 用于渲染一个 图片路径  传入图片路径 渲染出图片  -->
			<img :src="formVal$1[imgType$1]?formVal$1[imgType$1]:'static/img/upload.jpg'" />
		</div>
	</div>
</template>
<script>
/* 
  该组件因为要上传多个属性的图片  主图（mainImg） 详细图(detailImg)  规格图 (plusImg)  
	该组件基于压缩插件lrz,所以下方打入该组件
	npm install lrz --save 即可
*/
import lrz from 'lrz';
export default {
    
    name: 'uploadImg', //组件名字
    props: {
    
        formVal: {
    
            type: Object, //props接受对象类型数据（表单对象也可以是纯对象类型）
            required: true,
            default: {
    }
        },
        imgType: {
                    //表单对象中的图片属性 example:mainImg
            type: String,
            required: true,
            default: ''
        },
        imgStyle: {
    
            type: Object,        //  用于显示的图片的样式 
            required: true //必须传递
        }
    },
    created: function() {
    
        //生命周期函数 
    },
    data: function() {
    
      /*
         因为该组件需要改变父组件传递过来的值,
         所以将起拷贝一份
      */
        let formVal$1 = this.formVal;
        let imgType$1 = this.imgType;