vue2+element封装单个图片和多个图片上传组件

1、单个图片

示例：

 组件代码：

<template>
  <div class="avatar-uploader-box">
    <el-upload
      class="avatar-uploader"
      :action="action"
      :before-upload="beforeAvatarUpload"
      :show-file-list="false"
      :accept="accept"
      :headers="headers"
      :on-success="onSuccess"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
    <span class="msg">支持格式：.jpg .png ，不能超过500kb</span>
  </div>
</template>
<script>
export default {
  name: 'Upload',
  props: {
    accept: { // 限制类型
      type: String,
      default: '.jpg,.jpeg,.png,gif,JPG,JPEG,PNG,GIF'
    },
    action: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      imageUrl: '',
      fileObj: null,
      headers: {
        'Authorization': 'Bearer ' + this.$store.getters.token
      }
    }
  },
  // 监听
  watch: {
    value: {
      handler(newValue, oldValue) {
        // console.log(newValue, '/', oldValue)
        // 分割
        this.imageUrl = newValue
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 上传前检查
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 500
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 500KB!')
      }
      return isLt2M
    },
    // 上传成功
    onSuccess(response, file, fileList) {
      // console.log(response, file, fileList)
      // 图片地址
      if (response.code === 0) {
        this.imageUrl = response.data
        this.$emit('onChangeSuccesss', response.data)
      } else {
        this.$message.error(response.msg)
      }
    },
    // 预览图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>
<style lang="scss">
.avatar-uploader-box {
  .avatar-uploader .el-upload {
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: #fbfdff;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }

  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }

  .msg {
    font-size: 13px;
    color: #555;
  }
}
</style>

使用：

<UpladaImg2 :value="ruleForm.headImg" :action="$uploadUrl" @onChangeSuccesss="onChangeSuccesss2" />

2、多个图片

示例：

 组件代码：

<template>
  <div>
    <el-upload
      :action="action"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :multiple="false"
      :file-list="fileList"
      :headers="headers"
      :on-success="onSuccess"
      :accept="accept"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <span class="msg">支持格式：.jpg .png ，不能超过500kb</span>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'Upload',
  props: {
    accept: { // 限制类型
      type: String,
      default: '.jpg,.jpeg,.png,gif,JPG,JPEG,PNG,GIF'
    },
    action: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [], // 上传成功后的图片
      headers: {
        'Authorization': 'Bearer ' + this.$store.getters.token
      },
      // 只监听一次
      isWatch: true
    }
  },
  // 监听
  watch: {
    value: {
      handler(newValue, oldValue) {
        // console.log(newValue)
        // 分割
        if (this.isWatch) {
          if (newValue.length > 0) {
            const arr = newValue.split(',')
            arr.forEach(v => {
              this.fileList.push({
                name: v.split('/')[v.split('/').length - 1],
                url: v
              })
            })
          }
          this.isWatch = false
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 上传成功
    onSuccess(response, file, fileList) {
      if (response.code === 0) {
        fileList[fileList.length - 1].url = response.data
        this.$emit('onChangeSuccesss', fileList)
      } else {
        this.$message.error(response.msg)
      }
    },
    // 删除图片
    handleRemove(file, fileList) {
      console.log(file, fileList)
      this.$emit('onChangeSuccesss', fileList)
    },
    // 预览图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>
<style scoped lang="scss">
.msg{
    font-size: 13px;
    color: #555;
}
</style>

使用方式： 

<UpladaImg1 :value="ruleForm.imgs" :action="$uploadUrl" @onChangeSuccesss="onChangeSuccesss" />