vue 基于 el-upload 封装图片上传组件

组件封装

新建image-upload.vue 文件：

<template>
  <div class="img-upload-container">
    <div class="img-upload" :class="{'limit-num': fileList.length>=limit, 'mini': size === 'small'}">
      <el-upload ref="upload" :action="url" :file-list="fileList" list-type="picture-card" :on-success="handleSuccess" :on-remove="handleRemove" :on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload">
        <i class="el-icon-plus"></i>
        <p class="el-upload__tip" slot="tip" v-if="tips">{
   {
   tips}}</p>
        <div slot="file" slot-scope="{file}" class="img-con">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
              <i class="el-icon-zoom-in"></i>
            </span>
            <span class="el-upload-list__item-delete" @click="handleRemove(file)">
              <i class="el-icon-delete"></i>
            </span>
            <span v-if="size === 'small'" style="display:block;marginLeft:0" class="el-upload-list__item-delete" @click="onChangeHandle(file)">
              <i class="el-icon-edit"></i>
            </span>
            <span v-else class="el-upload-list__item-delete" @click="onChangeHandle(file)">
              <i class="el-icon-edit"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" append-to-body :src="dialogImageUrl" alt />
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
   
  name: 'ImgUpload',
  componentName: 'ImgUpload',
  data () {
   
    return {
   
      imgWidth: 0,
      imgHeight: 0,
      url: `xxx`, // 图片上传接口地址
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      picIndex: -1,
      vmodelType: ''
    }
  },
  props: {
   
    value: {
   
      type: [String, Array]
    },
    tips: {
   
      type: String,
      default: ''
    },
    size: {
   
      type: String,
      default: 'medium' // small
    },
    limit: {
   
      type: Number,
      default: 2
    },
    limitSize: {
   
      type: Number,
      default: 10
    },
    valueType: {
   
      type: String,
      default: 'String' // Object
    },
    // 是否校验图片尺寸，默认不校验
    isCheckPicSize: {
   
      type: Boolean,
      default: false
    },
    checkWidth: {
   
      type: Number,
      default: 0 // 图片限制宽度
    },
    checkHeight: {
   
      type: Number,
      default: 0 // 图片限制高度
    },
    topLimitWidth: {
   
      type: Number,
      default: 0 // 图片限制宽度上限（有时需要校验上传图片宽度在一个范围内）
    },
    topLimitHeight: {
   
      type: Number,
      default: 0 // 图片限制高度上限（有时需要校验上传图片高度在一个范围内）
    },
    busiType: {
   
      type: Number,
      default: 2
    },
    index: {
   
      type: Number,
      default: -1 // 当前图片index，限制可以上传多张时，针对某一张进行操作，需要知道当前的index
    },
    limitType: {
   
      type: String,
      default: '' // gif,webp/gif/webp （限制上传格式）
    }
  },
  watch: {
   
    value: {
   
      deep: true,
      handler: function (val, oldVal) {
   
        if (val) {
   
          if (this.valueType === 'Object') {
   
            this.fileList = this.value.map(item =>