EditUpload.vue

<template lang="html">
  <div
    ref="uploadImage"
    class="upload-image-wrap">
    <div v-if="multiple">
      <ul
        v-if="currImages.length"
        class="upload-image-items">
        <li
          v-for="(item, inx) in currImages"
          :disabled="disabled"
          class="upload-image-item">
          <div
            v-resize="item"
            class="image-inner"/>
          <div class="image-after">
            <span @click.stop="deleteImage(inx)"/>
            <span @click.stop="lookImage(item)"/>
          </div>
        </li>
        <li class="upload-image-item upload-icon">
          <upload-img
            class="multiple"
            @upload-img="onUpload"
            @uploaded="onUploaded"
            @error="onUploadError">
            <slot/>
          </upload-img>
        </li>
      </ul>
      <div
        v-else
        class="upload-icon">
        <upload-img
          class="multiple"
          @upload-img="onUpload"
          @uploaded="onUploaded"
          @error="onUploadError">
          <slot/>
        </upload-img>
      </div>
      <preview-img
        v-if="isflag"
        v-model="isflag"
        :silders="silders"/>
    </div>
    <div v-else>
      <div class="upload-icon single-upload">
        <div
          v-resize="currImages"
          class="single-upload-icon">
          <span v-if="currImages">修改图片</span>
        </div>
        <div
          :class="{ hide: currImages != false }"
          class="single-upload-body">
          <upload-img
            class="multiple"
            @upload-img="onSingleUpload"
            @uploaded="onUploaded"
            @error="onUploadError">
            <slot v-if="currImages == false"/>
          </upload-img>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import './webuploader'
import Resize from '@/components/Upload/utils/resizeImage'
import UploadImg from '@/components/Upload/UploadImgBox'
import PreviewImg from '@/components/PreviewImg'

export default {
  directives: {
    Resize
  },
  components: {
    PreviewImg,
    UploadImg
  },
  props: {
    value: {
      type: [Array, String]
    },
    limit: {
      type: Number
    },
    disabled: Boolean,
    multiple: Boolean
  },
  data() {
    return {
      inputValue: this.value,
      isflag: false,
      silders: ''
    }
  },
  computed: {
    currImages() {
      if (this.multiple && Array.isArray(this.inputValue)) {
        const images = [...this.inputValue]
        return images.length ? images : []
      } else {
        return this.inputValue || ''
      }
    }
  },
  watch: {
    value(newVal) {
      this.inputValue = newVal
    }
  },
  methods: {
    // 上传中...
    onUpload(res) {
      if (!res.data.file_url) return
      console.log(this.inputValue)
      const content = this.inputValue.length
      const limit = Number(this.limit)
      if (limit && content >= limit) {
        this.$emit('limit', content)
      } else {
        this.inputValue.push(res.data.file_url)
        this.$emit('input', this.inputValue)
      }
    },
    onSingleUpload(res) {
      if (!res.data.file_url) return
      this.inputValue = res.data.file_url
      this.$emit('input', res.data.file_url)
    },
    // 上传完成
    onUploaded(res) {
    },

    onUploadError(error) {
      console.log(error)
    },

    deleteImage(inx) {
      this.inputValue.splice(inx, 1)
      this.$emit('input', this.inputValue)
    },

    lookImage(item) {
      this.isflag = true
      this.silders = item
    }
  }
}
</script>

<style lang="less">
.upload-image-wrap {
    display: inline-block;
    font-size: 0;
    vertical-align: top;
    margin-top: -16px;
    .upload-image-items {
        li {
            display: inline-block;
            position: relative;
            width: 110px;
            height: 110px;
            border-radius: 3px;
            margin-top: 16px;
            margin-right: 16px;
            vertical-align: top;
            &:hover {
                .image-after {
                    display: block;
                }
            }
            .image-inner {
                width: 100%;
                height: 100%;
                background-repeat: no-repeat;
                background-position: center center;
                background-color: #F5FBFF;
                border-radius: 4px;
                &:after {
                    content: '';
                    position: absolute;
                    top: 0px;
                    right: 0;
                    width: 30px;
                    height: 30px;
                    background: url('../../assets/image/svg/uploadSuccess.svg') 50% 50% no-repeat;
                    border-top-right-radius: 4px;
                }
            }
            .image-after {
                display: none;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-color: rgba(0, 0, 0, .5);
                border-radius: 4px;
                cursor: pointer;
                &:after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-100%, -50%);
                    width: 18px;
                    height: 18px;
                    background: url('../../assets/image/svg/uploadDelete.svg') 50% 50% no-repeat;
                }
                &:before {
                    content: '';
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(50%, -50%);
                    width: 18px;
                    height: 18px;
                    background: url('../../assets/image/svg/magnifier.png') no-repeat;
                    background-size: 18px;
                }
                span{
                    &:first-child{
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-80%, -50%);
                        width: 30px;
                        height: 30px;
                        z-index: 999;
                    }
                    &:last-child{
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(10%, -50%);
                        width: 30px;
                        height: 30px;
                        z-index: 999;
                    }
                }
            }
            &[disabled]::before {
                position: absolute;
                width: 100%;
                height: 100%;
                content: '';
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(255, 255, 255, 0.5);
                z-index: 1;
            }
        }
    }
    .upload-icon {
        display: inline-block;
        width: 110px;
        height: 110px;
        position: relative;
        margin-top: 16px;
    }
}
.single-upload-icon {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 4px;
    overflow: hidden;
    span {
        display: inline-block;
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        line-height: 25px;
        color: #fff;
        font-size: 14px;
        text-align: center;
        background-color: rgba(0, 0, 0, .4);
        border-radius: 0 0 4px 4px;
    }
}
.single-upload-body {
    position: relative;
}
.webuploader-container.multiple {
    display: inline-block;
    overflow: hidden;
    font-size: 0;
    .webuploader-pick {
        width: 110px;
        height: 110px ;
        padding: 0;
        border-radius: 0;
        font-size: 12px;
        border-radius: 4px;
        background-color: #F5FBFF;
        border: 1px dashed #E5E5E5;
        &:after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 26px;
            height: 26px;
            background: url('../../assets/image/svg/uploadIcon.svg') 50% 50% no-repeat;
        }
    }
    .webuploader-pick-hover {
        border: 1px dashed #5CAEDC;
    }
}
.hide {
    .webuploader-pick {
        opacity: 0;
    }
    .webuploader-pick-hover {
        border: none;
    }
}
</style>