element-list-type 二次封装-CSDN博客

<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我哦~复制代码