bab-icon/resources/assets/js/components/UiImgUpload.vue

<template>
  <el-row class="form-group">
    <el-col :span="3" style="padding-top:10px;">
      <label style="margin-left:10px;vertical-align: middle;" class="control-label">{{label ? label : '上传'}}</label>
    </el-col>
    <el-col :span="14">
      <div class="layui-input-block-my">
        <el-upload class="avatar-uploader upImage"
                   :action="actiony"
                   :data="data ? data : {}"
                   :headers="headers"
                   :accept="accept ? accept : '.jpg,.png,.jpeg,.gif,.bmp,.webp'"
                   :size="size ? size : 1"
                   :on-error="handleAvatarError"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeAvatarUpload"
                   name="file_image"
                   drag
                   :multiple="multiple"
                   :list-type="listType?listType:'picture-card'"
                   :show-file-list="showFileList"
                   :file-list="fileList"
                   @change="selectChange">
          <el-button v-if="listType==='text'" size="small" type="primary">点击上传</el-button>
          <i v-else slot="default" class="el-icon-plus"></i>
        </el-upload>
      </div>
    </el-col>
    <el-col :span="7">
      <div class="classJs">
        <div v-if="tips">
          <span class="red">*</span>&ensp;{{tips}}
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: ['label','action','data','name','accept','size','multiple','imgNum','imageurl','tips','imgtype','value','listType'],
  data() {
    return {
      actiony: this._props.action ? this._props.action : parent.Domain+'/admin/oneImage',
      showFileList: true,
      fileList: [],
      imageUrl: [],
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    };
  },
  mounted() {
    console.log('imgNum------------------------'+this.imgNum)
    console.log('imgtype------------------------'+this.imgtype)
    console.log('size------------------------'+this.size)
    $(document).find('.upImage .el-upload-dragger').css({width:160,height:160});
    var thumbHoverLayerEl;
    $(document).on('mouseover', '.upImage .el-upload-dragger img', function(event) {
      var evt = event || window.event;
      var th = $(evt.target);
      if( th.prop('src') ){
        thumbHoverLayerEl = layer.tips('<img src="'+th.prop('src')+'" style="width:40%;height:50%" />', th, {
          time : 0,
          tips: 4,
          maxWidth: '40%'
        });
      }
    });
    $(document).on('mouseout', '.upImage .el-upload-dragger img', function(event) {
      layer.close(thumbHoverLayerEl);
    });
    $(document).on('click', '.upImage .el-upload-dragger img', function(event) {
      layer.close(thumbHoverLayerEl);
    });
    if(this.value){

    }
  },
  watch:{
    value(val) {
      // if (val) {
      //   if (typeof val === 'string') {
      //     let list = val.split(';');
      //     list.forEach((url) => {
      //       this.setFileUrl(url);
      //     })
      //   } else {
      //     val.forEach((url) => {
      //       if (typeof url === 'string') {
      //         this.setFileUrl(url);
      //       } else {
      //         this.setFileUrl(url.url);
      //       }
      //     })
      //   }
      // }
    },
  },
  methods: {
    setValue(){
      let val=this.value
      if (val) {
        if (typeof val === 'string') {
          let list = val.split(';');
          list.forEach((url) => {
            this.setFileUrl(url);
          })
        } else {
          val.forEach((url) => {
            if (typeof url === 'string') {
              this.setFileUrl(url);
            } else {
              this.setFileUrl(url.url);
            }
          })
        }
      }
    },
    setFileUrl(){
      let isAdd = true;
      this.fileList.forEach((v, k) => {
        if (v.url === url) {
          isAdd = false;
        }
      })
      if (isAdd) {
        this.fileList.push({
          name: this.getFileName(url),
          url: url
        });
      }
      console.log(this.fileList);
    },
    selectChange(value) {
      this.$emit('set-keys',value);
    },
    handleAvatarError(err, file, fileList) {
      this.$message.error('文件上传被中断 ... ');
    },
    handleAvatarSuccess(res, file) {
      if( res.success != 0 ){
        this.$message.error(res.message);
      }else{
        //> 上传成功
        file.url = res.url;
        this.imageUrl.push(res.url)
        console.log(this.imgType+'-----------------------------')
        if (this.imgtype*1 !== 1) {
          this.$emit('input', this.imageUrl)
        } else {
          this.$emit('input', this.imageUrl.join(';'))
        }
        this.$message.success('上传成功');
      }

    },
    beforeAvatarUpload(file) {
      var size = this._props.size;
      var accept = null;
      if( parseFloat(size) <= 0 || size == undefined ){
        size = 1;
      }
      const isLt1M = parseFloat(file.size / 1024 / 1024) < size;
      if( ! this._props.accept ){
        accept = '.jpg,.jpeg,.png';
      }else{
        accept = this._props.accept;
      }
      var accept_evt = accept.replace(/\./g,'image/');
      var cs = new RegExp(file.type);
      if( ! cs.test(accept_evt) ){
        this.$message.error('上传图片类型不匹配!当前支持上传后缀 "'+accept+'"');
        accept = false;
      }
      if (!isLt1M) {
        this.$message.error('上传图片大小不能超过 '+size+'MB!');
      }
      return isLt1M && accept;
    }
  }
}
</script>

<style scoped>
.control-label{
  color: #606266;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  /*width: 178px;*/
  height: 178px;
  display: block;
}
.layui-input-block-my {
  margin-left:0;
  min-height: 42px;
}
.classJs {
  margin-left: 10px;
  vertical-align: middle;
  height:42px;
  line-height:42px;
}
.red{
  color: red;
}
</style>