vue图片上传

<template>
  <div class="uploadBlock">
    <template v-for="(item,index) in img" v-show="img.length>0">
      <div class="uploadImage">
        <img :src="item.img" alt="">
        <span class="uploadSuccess el-icon-success"></span>
        <div class="uploadImageCover" v-if="!disabled">
          <span class="uploadCoverIcon el-icon-zoom-in" @click="showImage(item)"></span>
          <span class="uploadCoverIcon el-icon-delete" @click="deleteImg(index)"></span>
        </div>
      </div>
    </template>

    <div class="uploadBtn" v-loading="loading" v-show="!hideAdd" v-if="!disabled">
      <input type="file" ref="upload">
    </div>

  </div>
</template>
<script>
  import AliUpload from '../plugin/AliUpload'//导入阿里云地址

  export default {
    props: {
      finish: Function,
      title: String,
      multi: {
        type: Boolean,
        default: true
      },
      imgs: String,
      disabled: Boolean,
      limitNum: Number || String,
    },
    data() {
      return {
        token: '',
        loading: false,
        uploadToggle: false,
        fileList: [],
        count: 0,
        result: [],
        img: [],
        hideAdd: false
      }
    },
    watch: {
      imgs: function () {
        console.log(this.imgs);
        if (this.imgs) {
          this.img = this.imgs.split(',').map(item => {
            return {img: item};
          });
        } else {
          this.img = [];
        }
        if (this.img.length >= this.limitNum) {
          this.hideAdd = true;
        } else {
          this.hideAdd = false;
        }
      }
    },
    methods: {
      upload(file) {
        this.loading = true;
        let name = file.name.split('.');
        let type = name[name.length - 1];
        AliUpload(type, file, this.token, 'image').then((res) => {
          console.log(res);
          try {
            this.img.push({img: res.url});
            if (this.img.length >= this.limitNum) {
              this.hideAdd = true;
            } else {
              this.hideAdd = false;
            }
            this.finish(this.img);
          } catch (e) {
            console.log('error', e)
          }

          this.loading = false;
        }).catch((err) => {
          this.loading = false;
          console.log('errors', err)
        })
      },
      showImage(item) {
        window.open(item.img, '_blank')
      },
      deleteImg(index) {
        if (this.img.length <= 1) {
          this.img = [];
        } else {
          this.img.splice(index, 1);
        }
        if (this.img.length >= this.limitNum) {
          this.hideAdd = true;
        } else {
          this.hideAdd = false;
        }
        this.finish(this.img)
      },
    },
    mounted() {
      this.token = sessionStorage.getItem('token')
      let t = this;

      if (!this.disabled) {
        this.$refs.upload.addEventListener('change', function (e) {
          let file = e.target.files[0];
          console.log('file', file);
          t.upload(file);
          e.target.value = '';
        })
      }

    }
  }
</script>
<style scoped>
  .uploadBlock {
    flex: 1;
    /*height: 80px;*/
    background-color: #FFFFFF;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .uploadImage {
    width: 80px;
    height: 80px;
    overflow: hidden;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: #FFFFFF;
    border-radius: 5px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .uploadImage:hover .uploadImageCover {
    display: flex;
  }

  .uploadImage img {
    width: 80px;
  }

  .uploadSuccess {
    position: absolute;
    right: 2px;
    top: 2px;
    color: #67C23A;
    font-size: 20px;
  }

  .uploadImageCover {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    /*display: flex;*/
    flex-direction: row;
    align-items: center;
    justify-content: center;
    display: none;
  }

  .uploadCoverIcon {
    width: 24px;
    height: 24px;
    color: #FFFFFF;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    margin: 0 5px;
  }

  .uploadBtn {
    width: 80px;
    height: 80px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: #F5F7FA;
    border: 1px dashed #DCDFE6;
    border-radius: 5px;
    background-image: url("../assets/add.png");
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
  }

  .uploadBtn input {
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
    cursor: pointer;
  }
</style>
------------------------
 <UploadBtn :imgs="imgs.join(',')" :finish="finishUpload" :limitNum="1"></UploadBtn>//使用
 data(){
 return{
	imgs:[]
	}
 },
 methods:{
	  finishUpload(data){
          this.imgs = data.map(item => {
            return item.img
          })
	}