vue+elementUi图片上传组件使用详解
116 浏览量
2020-10-16
13:14:32
上传
评论
收藏 72KB PDF 举报
vue+elementUi图片上传组件使用详解图片上传组件使用详解
主要为大家详细介绍了vue+elementUi图片上传组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以
参考一下
上传组件封装需求分析上传组件封装需求分析
在基于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;
return {
formVal$1,
imgType$1,
uploadUrl: url,//你的服务器url地址
};
},
methods: {
upload: function(formVal, imgType) {
var self = this;
//图片上传加载我们在这里加入提示，下方需要主动关闭，防止页面卡死
var loadingInstance = this.$loading({
text: '上传中'
});
var that = this.$refs[imgType].files[0]; //文件压缩file
资源评论
