bab-icon/resources/assets/js/components/UiFiles1.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"
                   list-type="picture-card"
                   :on-preview="handlePictureCardPreview"
                   :on-remove="handleRemove"
                   :action="actiony"
                   :data="data ? data : {}"
                   :headers="headers"
                   :accept="accept ? accept : '.jpg,.png,.jpeg,.gif,.bmp,.webp'"
                   :size="size ? size : 1"
                   :imageurl="imageurl ? imageurl : ''"
                   :on-error="handleAvatarError"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeAvatarUpload"
                   :show-file-list="showFileList"
                   name="file_image"
                   drag
                   :multiple="multiple">
          <i class="el-icon-plus"></i>

        </el-upload>
        <el-dialog :visible.sync="dialogImageUrl.length>0">
          <div  v-for="imgUrl in dialogImageUrl" v-dragging="{ item: imgUrl, list: dialogImageUrl, group: 'imgList' }">
            <el-image
                style="width: 100px; height: 100px"
                :src="imgUrl"
                fit="fit"
                :preview-src-list="dialogImageUrl">
            </el-image>
          </div>

        </el-dialog>
        <input type="text" style="width:0;height:0.5px;border: 0 solid rgba(255,255,255,0)" v-model="imageUrl"
               :name="name ? name : 'file'" value="imageUrl"/>
      </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', 'imageurl', 'tips'],
  data() {
    return {
      actiony: this._props.action ? this._props.action : parent.Domain + '/admin/oneImage',
      showFileList: false,
      multiple: false,
      imageUrl: this._props.imageurl ? this._props.imageurl : '',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      dialogImageUrl: [],
      dialogVisible: false
    };
  },
  mounted() {
    $(document).find('.upImage .el-upload-dragger').css({width: 180, height: 180});
    let thumbHoverLayerEl;
    $(document).on('mouseover', '.upImage .el-upload-dragger img', function (event) {
      let evt = event || window.event;
      let 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);
    });
  },
  methods: {
    handlePictureCardPreview(){

    },
    handleRemove(){

    },
    handleAvatarError(err, file, fileList) {
      this.$message.error('文件上传被中断 ... ');
    },
    handleAvatarSuccess(res, file) {
      if (res.success != 0) {
        let _input = $(document).find('.upImage');
        if ($($(_input).find('input')[0]).val()) {
          this.imageUrl = $($(_input).find('input')[0]).val();
        } else {
          this.imageUrl = '';
        }
        this.$message.error(res.message);
      } else {
        //> 上传成功
        this.dialogImageUrl.push(res.url)
        this.imageUrl = this.dialogImageUrl.join(',');
        // let _input = $(document).find('.upImage');
        // $($(_input).find('input')[0]).prop('type', 'hidden');
        // $($(_input).find('input')[0]).val(res.url);
        // $($(_input).find('input')[0]).prop('type', 'file');
        this.$message.success('上传成功');
      }

    },
    beforeAvatarUpload(file) {
      let size = this._props.size;
      let 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;
      }
      let accept_evt = accept.replace(/\./g, 'image/');
      let 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>
.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>