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

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

主要为大家详细介绍了vue+elementUi图片上传组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以

参考一下

上传组件封装需求分析上传组件封装需求分析

在基于elementUI库做的商城后台管理中，需求最大的是商品管理表单这块，因为需要录入各种各样的商品图片信息。加上后

台要求要传递小于2M的图片，因此封装了一个upload.vue组件组件作为上传页面的子组件，它用于管理图片上传逻辑。

upload.vue解析

upload主要用于实现表单上传图片的需求，主要由input +img 构成当没有图片的时候显示默认图片，有图片则显示上传图片，

<!-- 用户改变图片按钮的点击 触发上传图片事件 -->

<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)

props: {

formVal: {

type: Object, //props接受对象类型数据（表单对象也可以是纯对象类型）

required: true,

default: {}

},

imgType: { //表单对象中的图片属性 example:mainImg

type: String,

required: true,

default: ''

created: function() {

//生命周期函数

},

data: function() {

/*

因为该组件需要改变父组件传递过来的值,

所以将起拷贝一份

*/

let formVal$1 = this.formVal;

let imgType$1 = this.imgType;

methods: {

upload: function(formVal, imgType) {

var self = this;

//图片上传加载我们在这里加入提示，下方需要主动关闭，防止页面卡死

var loadingInstance = this.$loading({

text: '上传中'

});

var that = this.$refs[imgType].files[0]; //文件压缩file