图片上传组件

<template>
  <div class="upload-img-outline">
    <template v-if="imgUrlB && imgUrlB.length>0">
      <div
        v-for="(item, index) in imgUrlB"
        :key="index"
        class="image-preview"
      >
        <div class="upload-main">
          <van-image :src="item? item : imageBg" @click="viewPic(item)" />
          <div class="van-uploader__preview-delete">
            <van-icon class="van-uploader__preview-delete-icon" name="cross" @click="deleteImg(index)" />
          </div>
        </div>
      </div>
    </template>

    <van-uploader
      v-show="imgUrlB.length<maxCount"
      ref="uploader"
      :multiple="true"
      :max-size="6000 * 1024"
      :max-count="maxCount"
      accept="image/png, image/jpeg"
      :disabled="disabled"
      :before-read="beforeRead"
      @delete="deleteImg"
      @oversize="onOversize"
    >
      <template>
        <div class="upload-main">
          <van-image :src="imageBg" />
          <div class="bottom">{{ imageText }}</div>
        </div>
      </template>
    </van-uploader>
    <div v-if="loading" class="loading-outline">
      <van-loading color="#5264E7" vertical>上传中……</van-loading>
    </div>
  </div>
</template>

<script>
import { uploadIdCard, uploadWithoutLogo, uploadIdBusiness } from 'api/file/upload'
import { ImagePreview, Toast } from 'vant'

export default {
  name: 'UploadImage',
  // import引入的组件需要注入到对象中才能使用
  components: { [ImagePreview.Component.name]: ImagePreview.Component },
  model: {
    prop: 'image',
    event: 'modelChange'
  },
  props: {
    imgUrls: { // 储存图片路径
      type: [Array],
      default: function() {
        return []
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    deletable: {
      type: Boolean,
      default: true
    },
    maxCount: {
      type: Number,
      default: 1
    },
    cardType: {
      type: Number,
      default: 0 // 0-图片
    },
    front: {
      type: Number,
      default: null /
    }
  },
  data() {
    return {
      loading: false,
      imageBg: require('@/assets/images/upload-img/pic.png'),
      imageText: '点击上传'
    }
  },
  computed: {
    imageUrl: {
      get() {
        return this.image
      },
      set(val) {
        this.$emit('modelChange', val)
      }
    },
    imgUrlB: {
      get() {
        console.log('this.imgUrls: ', this.imgUrls)
        return this.imgUrls
      },
      set(val) {
        this.$emit('update:imgUrls', val)
      }
    }
  },
  methods: {

    onOversize(file) {
      this.$toast('文件大小不能超过 6M')
    },

    beforeRead(file) {
      if (file.length > 1) {
        console.log(file.length, this.maxCount)
        if (file.length > Number(this.maxCount)) {
          Toast('请选择少于' + this.maxCount + '张的图片')
          return false
        } else {
          file.map(item => {
            if (item.type !== 'image/jpeg' && item.type !== 'image/png') {
              this.$toast('请上传 图片 格式文件！')
              return false
            }
            setTimeout(() => {
              this.imgFileUpload(item)
            }, 1000)
          })
        }
      } else {
        if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
          this.$toast('请上传 图片 格式文件！')
          return false
        }
        setTimeout(() => {
          this.imgFileUpload(file)
        }, 100)
      }
    },

    imgFileUpload(file) {
      this.loading = true
      const postParam = new FormData()
      postParam.append('file', file)
      postParam.append('suffixPath', 'image')
      postParam.append('front', this.front)
      let methods = null
      switch (Number(this.cardType)) {
        case 0:
          methods = uploadWithoutLogo
          break
        case 1:
          methods = uploadIdCard
          break
        case 2:
          methods = uploadIdCard
          break
        case 3:
          methods = uploadIdBusiness
          break
        default:
          break
      }
      methods(postParam).then(res => {
        // console.log(res)
        this.loading = false
        if (this.maxCount > 1) {
          this.imgUrls.push(res.data.url)
        }
        this.emitUrls()
      }).catch(errors => {
        this.loading = false
        Toast.fail('上传失败！')
        console.error(errors)
      })
    },
    deleteImg(index) {
      this.imgUrlB.splice(index, 1)
      this.$emit('update:imgUrls', this.imgUrls)
      this.$forceUpdate()
      this.emitUrls()
    },
    emitUrls(val) {
      this.$emit('emitUrls', this.imgUrls)
    },

    // 图片预览
    viewPic(item) {
      ImagePreview({
        images: [item],
        showIndex: false
      })
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss' scoped>
.upload-img-outline {
  display: flex;
  flex-wrap: wrap;

  .image-preview {
    width: 100px;
    height: 100px;
    margin-left: 10px;
    position: relative;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    display: inline-block;
    overflow: hidden;
    // object-fit: cover;
    /deep/.upload-main{
      .van-image__img{
      width: 100px;
      height: 100px;
      object-fit: cover;
    }

    }

    .van-uploader__preview-delete {
      width: 24px;
      height: 24px;
      background-color: rgba(0,0,0,.5);
      border-radius: 0 0 0 16px;

      .van-uploader__preview-delete-icon {
        font-size: 24px;
      }
    }
  }
  .van-uploader{
    width: 100px;
    height: 100px;
    margin-left: 10px;
    margin-top: 10px;
    .bottom{
      text-align: center;
    }
  }

}
</style>

应用

     <UploadImages :key="timer" :img-url.sync="form.placeImages" :max-count="3" @emitUrls="emitUrls" />