vue element 封装上传组件（图片、文件）

1、新建封装组件components/upload.vue

2、在使用上传功能的地方引入封装组件

3、使用

// 单图上传 listType：'text'上传文件，listType：'picture-card'上传图片，listType：文件类型，limit：限制上传数量， key: 唯一值


// 赋值 this.ruleForm.imgData
handleFileUrl(data) {
  this.ruleForm.imgData.forEach((item, index) => {
    if(item.key == data.key) {
      this.ruleForm.imgData[index].img = (data && data.fileList && data.fileList[0] &&         
         data.fileList[0].url) || ""
    }
  })
},



// 多图上传 listType：文件类型，limit：限制上传数量， multiple: 允许多张上传


 

// 赋值 this.ruleForm.imgStr
handleImgPath(data) {
  let imgArr = []
  data && data.fileList.forEach(item => {
    imgArr.push(item.url)
  })
  this.ruleForm.imgStr = imgArr.toString()
},

4、效果展示

单图展示：