<template>
<el-upload
action="/backend/mobileUpload/uploadImg.do"
list-type="picture-card"
:name="name"
:data="uploadObj"
:on-success="handleSuccess"
:before-upload="beforeAvatarUpload"
:show-file-list="true"
:file-list="fileList"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
<div slot="tip" class="el-upload__tip">仅支持JPG、PNG、JPEG、GIF格式,文件小于5M,最多上传5张</div>
</el-upload>
</template>
<style scoped>
</style>
<script>
export default{
name: 'upload',
props: {
index: null,
name:null,
onSuccess:Function,
beforeAvatarUpload:Function,
handlePictureCardPreview:Function,
onRemove:Function,
uploadObj:Object,
fileList:Array
},
methods: {
handleSuccess () {
var arg = [].slice.call(arguments);
arg.push(this.index);
this.onSuccess.apply(this,arg)
},
handleRemove () {
var arg = [].slice.call(arguments);
arg.push(this.index);
this.onRemove.apply(this,arg)
}
}
}
</script>
当情况为一个订单里有两个商品,每个商品都可以上传5个图片时,则需要二次封装。
使用方法:只要把以上文件保存为.vue文件,即可作为子组件调用。
有问题随时call我哦~复制代码
element-list-type 二次封装
最新推荐文章于 2024-05-16 22:29:21 发布