vue+el-upload实现上传图片组件化

属性：

    limit-限制图片上传数量，
    notdrag-是否禁止拖拽，
    backimglist-回显数组父组件向子组件传值，
    @GetImgUrlList-图片上传后返回图片路径数组给父组件。

组件使用示例：

<template>
  <div>
  		<UpImage :limit="3" :notdrag="false" :backimglist="backImgList" @GetImgUrlList="GetImgUrlList" />
  </div>
 </template>
 <script>
 	 export default {
			data() {
    			return {
					picUrlArr: [], // 接收图片返回路径用于表单提交
					backImgList: [] //接收后端返回上次提交的图片路径用于回显
				}
			},
			methods: {
				// 图片回显至组件:用backImgList接收回显图片数组
				
				// 接收组件回传的图片路径用于随表单提交至后台
				GetImgUrlList(arr) {
      				console.log(arr)
      				this.picUrlArr= arr
   			 	},
   			 	
   			 	// 提交表单操作...
			}
	}
 </script>

组件构成代码：

<template>
  <div>
    <div class="clearfix">
      <div class="clearfix fl">
        <draggable
          v-model="picArr"
          tag="ul"
          v-bind="dragOptions"
          @end="dragEnd"
        >
          <div v-for="(item, index) in picArr" :key="index" class="forPicBox">
            <el-image
              :src="PIC + item"
              class="forImg"
              :preview-src-list="bigPicList"
            />
            <i class="el-icon-delete delPicBtn" @click="deleLoadImgNm(index, item)" />
          </div>
        </draggable>
      </div>
      <el-upload
        v-show="picArr.length < limit"
        ref="uploadPicRef"
        accept="image/jpeg,image/png"
        :action="UpPicUrl"
        :show-file-list="false"
        multiple
        :data="{type: type}"
        :limit="limit"
        :headers="headers"
        :before-upload="beforeUploadImageDynamicPic"
        :on-success="dynamicPicSuccess"
        :on-exceed="upPicExceed"
        class="fl"
      >
        <i class="el-icon-plus fotUpPicBtn" />
      </el-upload>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  },
  props: {
    // 上传数量
    limit: {
      type: Number,
      requiered: true,
      default: () => 0
    },
    // 父组件回显图片数组
    backimglist: {
      type: Array,
      requiered: true,
      default: () => []
    },
    // 是否禁止拖拽
    notdrag: {
      type: Boolean,
      requiered: true,
      default: () => false
    }
  },
  data() {
    return {
      UpPicUrl: process.env.VUE_APP_BASE_API + 'upload/uploadImages', // 上传地址
      headers: {},
      // 图片展示数组
      picArr: [],
      bigPicList: []

    }
  },
  // 拖拽配置
  computed: {
    dragOptions() {
      return {
        animation: 200,
        group: 'description',
        disabled: this.notdrag,
        ghostClass: 'ghost'
      }
    }
  },
  // 监听回显数组变化
  watch: {
    backimglist: {
      handler: function() {
        this.backImg()
      },
      deep: true
    }
  },
  mounted() {
    console.log(this.backimglist)
    this.headers = { Token: localStorage.getItem('Get-Token') } // 如需要携带登录token，需获取
    this.backImg()
  },

  methods: {
    /* --------------------上传图片----------------- */
    // 图片上传
    beforeUploadImageDynamicPic(file) {
      var _this = this
      var isLt3M = file.size / 1024 / 1024 < 3
      if (['image/jpeg', 'image/png'].indexOf(file.type) === -1) {
        _this.$message.error('请上传正确的图片格式')
        return false
      }
      if (!isLt3M) {
        _this.$message.error('上传图片大小不能超过3MB哦!')
        return false
      }
    },

    // 上传成功
    dynamicPicSuccess(res, file) {
      if (res.result) {
        this.picArr.push(res.result[0]) // 注意要区分后端返回图片路径为字符串和数组
        this.bigPicList.push(this.PIC + res.result[0])  // 给查看大图赋值
        console.log(this.picArr)
        this.$emit('GetImgUrlList', this.picArr) // 向父组件传递图片数组
      }
    },

    // 图片数量超出处理
    upLoadPicExceed() {
      this.$message.error('图片数量不能多于' + this.limit + '张！')
    },

    // 拖拽结束
    dragEnd() {
      console.log(this.picArr)
    },

    // 删除图片
    deleImgNm(index, url) {
      this.picArr.splice(index, 1)
      this.bigPicList.splice(index, 1)
      console.log(this.picArr)
      // console.log(this.$refs.uploadPicRef.uploadFiles);
      // 删除上传控件实际储存的图片流
      const arr = this.$refs.uploadPicRef.uploadFiles
      const fileIndex = arr.findIndex(item => item.response.result[0] === url) // 注意要区分后端返回图片路径为字符串和数组
      if (fileIndex !== -1) {
        arr.splice(fileIndex, 1)
      }
      console.log(this.$refs.uploadPicRef.uploadFiles)
    },

    // 回显
    backImg() {
      if (this.backimglist.length > 0) { // 回显操作
        var arr = []
        this.backimglist.forEach(item => {
          console.log(item)
          arr.push(this.PIC + item.url)
          this.picArr.push(item.url)
        })
        console.log(this.picArr)
        this.bigPicList = arr
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.forPicBox {
  width: 148px;
  height: 148px;
  position: relative;
  float: left;
  margin: 2px;
  .forImg {
    display: block;
    width: 148px;
    height: 148px;
  }
  .delPicBtn {
    position: absolute;
    left: 50%;
    width: 100%;
    height: 30px;
    line-height: 30px;
    display: block;
    text-align: center;
    transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    bottom: 0px;
    font-size: 18px;
    cursor: pointer;
    background-color: rgba(0,0,0,.5);
    color: #fff;
  }
}

.fotUpPicBtn {
  display: block;
  width: 148px;
  height: 148px;
  border: 1px dashed #C0C4CC;
  background-color: #fbfdff;
  font-size: 24px;
  color: #C0C4CC;
  margin-left: 5px;
  text-align: center;
  line-height: 148px;
  border-radius: 6px;
  &:hover {
    border-color: #1604ff;
  }
}
</style>

目前对ts和vue3不太熟悉，故依旧用的vue2，欢迎大家交流纠错，谢谢！