ElementUI上传组件扩展--重新上传

前言：在做商城类后台时，避免不了需要使用图片上传组件，然而如果你使用了elementUI，那么恭喜你，你将不能处理，多图片上传后更改其中图片顺序问题，elementUI提供的照片墙和文件缩略图都未提供重新替换上传的功能，然而，用户头像上传可以替换上传但仅限上传一张图片！

为解决这个问题，只能重新封装elementUI的upload组件

直接上组件代码

---

使用组件

1、在添加页面使用

//比如导入组件是这样
components:{
    'my-uploader':Uploader
  }
//使用组件

//其中参数问题
data(){
   return{
     reqUrl:'',//上传地址
     imgLimit:10,//允许最大上传数
     warnTxt:'图片宽高比为 1:1,建议大小100kb左右',//上传组件右侧建议
   }
},
methods:{
   //上传前，原上传组件方法
   beforeUpload(file){},
   //图片移除，index，参数file更改为移除的数组下标
   imageRemove(index){},
   //上传成功，index,res，参数file更改为上传成功/替换成功图片在列表中的下标
   uploadSucc(index,res){
      //之前的写法应更改为，如：this.goods.goods_pics[index] = res.picUrl;
   },
}

2、在编辑页面使用

//比如导入组件是这样
components:{
    'my-uploader':Uploader
  }
//使用组件

//其中参数问题
data(){
   return{
     reqUrl:'',//上传地址
     imgLimit:10,//允许最大上传数
     defaultData:[],//默认显示的图片列表，其中数据为图片路径
     warnTxt:'图片宽高比为 1:1,建议大小100kb左右',//上传组件右侧建议
   }
},
methods:{
   //上传前，原上传组件方法
   beforeUpload(file){},
   //图片移除，index，参数file更改为移除的数组下标
   imageRemove(index){},
   //上传成功，index,res，参数file更改为上传成功/替换成功图片在列表中的下标
   uploadSucc(index,res){
      //之前的写法应更改为，如：this.goods.goods_pics[index] = res.picUrl;
   },
},
//在设置默认数组时，应注意周期方法，需在子组件mounted之前，如beforeMount
beforeMount() {
   //....许多自己的代码
   let defaultData = ['http://www.xxxx.com/1.png','http://www.xxxx.com/2.png'];
   this.defaultData = defaultData;
}

效果图如下