bab-icon/resources/js/components/UiFile.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"
                    :imageurl="imageurl ? imageurl : ''"
                    :on-error="handleAvatarError"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    :show-file-list="showFileList"
                    name="file_image"
                    drag
                    :multiple="multiple">
                    <img v-if="imageUrl" style="width:100%;height:100%" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <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')
            }
          };
        },
        mounted() {
            $(document).find('.upImage .el-upload-dragger').css({width:180,height:180});
            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);
            });
        },
        methods: {
            handleAvatarError(err, file, fileList) {
                this.$message.error('文件上传被中断 ... ');
            },
            handleAvatarSuccess(res, file) {
                if( res.success != 0 ){
                    var _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.imageUrl = res.url;
                    var _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) {
              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>
    .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>