components/pc/upload/uploadImg.vue

<template>
  <div class="card card-file">
    <el-upload
      v-for="(item, index) in fileList"
      :key="index"
      :action="'#'"
      class="fileBox"
      :class="{big:$props.big,disabled:$props.disabled}"
      list-type="none"
      :show-file-list="false"
      :accept="acceptType"
      :on-change="(file, fileList) => changeFile(file, fileList, item)"
      :auto-upload="false"
      :disabled="$props.disabled"
      v-loading.lock="uploading"
      >
        <template slot="default">
          <img :src="item.path ? item.path : item.defaultPath" alt="">
          <div class="text mode">{{item.text}}</div>
        </template>
    </el-upload>
    <slot></slot>
  </div>
</template>
<script>
import { $upload } from '@/service/main/index'
import { mapGetters } from 'vuex'
export default {
  props: {
    fileList: {
      require: true,
      type: Array
    },
    currentStatus: {
      require: true,
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: Number | String
    },
    successStatus: {
      require: true,
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: Number | String
    },
    acceptType: {
      type: String,
      default: '.jpg,.png'
    },
    big: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      uploading: false
    }
  },

  computed: {
    ...mapGetters({
      orgId: 'woporg',
      user: 'wopuser'
    })
  },
  mounted() {
  },
  methods: {
    changeFile(file, fileList, item) {
      const fileD = new FormData()
      fileD.append('file', file.raw)
      this.uploading = true
      $upload(fileD).then(res => {
        if (res.data.code === 0) {
          item.path = process.env.VUE_APP_FILE_URL + res.data.data
          this.$emit('uploadOrgPic', res.data.data, item.fileIndex)
        }
        this.uploading = false
      }).catch(() => { this.uploading = false })
    }
  }
}
</script>
<style lang="scss" scoped>
// .card {
  // margin: 12px;
//}
.card-file {
  display: inline-block;
  // padding-bottom: 36px;
  .fileBox {
    margin: 0 16px 0 0;
    &:last-child {
      margin: 0;
    }
  }
}
.fileBox {
  margin: 0 10px;
  position: relative;
  width: 216px;
  height: 140px;
  &.disabled {
    filter: grayscale(1);
    &::v-deep .el-upload {
      cursor: auto;
    }
  }
  &.big {
    width: 340px;
    height: 220px;
    .text {
      padding-top: 154px;
    }
  }
  &::v-deep .el-upload {
    width: 100%;
    height: 100%;
  }
  .text {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
    padding-top: 94px;
    color: #868B9A;
  }
  .mode {
    background: rgba(25,25,25,0.2);
    color: #fff;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
</style>