标签：title 上传 zA banner file type reg

<template>
    <div>
        <!--:http-request="upload"-->
        <!--:action="$upload.imgUrl+'/pc/common/uploadImage/'"-->
        <!--:disabled='sirIf'-->

        <el-upload
                :disabled='sirIf'
                class="avatar-uploader edit-form-banner"
                :action="$serverUrl+'/pc/common/uploadImage/'"
                :headers="headers"
                :show-file-list="false"
                :on-success="uploadBannerSuccess"
                :before-upload="beforeUploadBanner"
        >
            <img
                    v-if="banner"
                    :src="banner"
                    class="avatar"
            />
            <div v-else class="upload-txt">
                <i class="avatar-uploader-icon iconfont icontupian"></i>
            </div>
        </el-upload>
        <p class='edit-proposal' :class='[{"proposal-must":sirMust=="true"}]'>
            <span>{{sirTitle}}</span>
        </p>
    </div>
</template>

<script type="text/ecmascript-6">
import { getStorage } from '@/utils/auth'

export default {
    props: {
      sirProps: {
        type: String, default: '',
      },
      sirTitle: {
        type: String, default: '',
      },
      sirMust: {
        type: [String,Boolean], default: 'false',
      },
      sirUrl: {
        type: [String], default: '',
      },
      sirIf: {
        type: [String,Boolean], default: false,
      }
    },

    data() {
      return {
        banner: this.sirUrl,
      }
    },
    computed: {
      headers() {
        return{
          "Authorization": getStorage('token') // 直接从本地获取token就行
        }
      }
    },
  mounted() {
      console.log('sirIf',this.sirIf)
  },
    methods: {
      // 自定义上传方法 未使用
      upload(options) {
        let formData = new FormData()
        formData.append('file', options.file)
        console.log('options',options.file);
        console.log('formData',formData);

        this.$api.Common.uploadImage({
          file: formData,
        }).then(res => {
          console.log('res',res)
          // options.onSuccess({ fileId: res.fileId }) // 上传成功出现成功提示，同时把id传入
        }).catch(err => {
          console.log(err)
        })
      },
      // 上传成功
      uploadBannerSuccess(res) {
        const data = {
          sirProps: this.sirProps,
          url: res.data
        }
        this.banner = res.data;
        this.$emit('upSuccess', data)
        // this.setForm.banner = URL.createObjectURL(file.raw);
      },
      // 上传前
      beforeUploadBanner(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    }
  }
</script>

<style scoped lang='scss'>
    .edit-form-banner {
        width: 179px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        border-radius:3px;
        border:1px dotted #D9D9D9;
        /deep/.el-upload--text {
            display: block;
        }
        .avatar {
            width: 179px;
            height: 100px;
            object-fit: cover;
        }
        .avatar-uploader-icon {
            font-size: 30px;
            color: #999999;
        }
    }
    .edit-proposal {
        position: relative;
        width: 177px;
        height: 20px;
        color: #333333;
        font-size: 14px;
        text-align: center;
        span{
            position: relative;
        }
    }
    .proposal-must{
        span:before {
            position: absolute;
            content: '*';
            color: #F04C60;
            left: -9px;
            top: -3px;
        }
    }
</style>

export const validateArr = {
  // 手机号验证
  phone: {
    reg: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
    title: '请输入有效的手机号码'
  },
  just: {
    reg: /^[1-9]\d{0,9}$/,
    title: '请输入正整数,最多9位'
  },
  // 用户名
  user: {
    reg: /^[a-zA-Z0-9]{0,20}$/,
    title: '请输入字母数字组合'
  },
  // 姓名
  name: {
    reg: /^[\u4e00-\u9fa5a-zA-Z]{2,20}$/,
    title: '请输入有效的姓名(2-20位字符)'
  },
  // 密码验证
  password: {
    reg: /^([a-zA-Z0-9]|[!@#$%^&*.`~'"|]){6,20}$/i,
    title: '请输入密码(6-20位字符(数字、字母、特殊符号))'
  },
  // 邮箱验证
  email: {
    /* eslint-disable */
    reg: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
    /* eslint-enable*/
    title: '请输入正确的邮箱格式'
  },
  company: {
    reg: /^([a-zA-Z0-9_\u4e00-\u9fa5]){3,30}$/,
    title: '请输入有效的公司(3-30位字符)'
  },
  idCode: {
    reg: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
    title: '请输入正确身份证号'
  }
}
export function validate(type) {
  const item = validateArr[type]
  return (rule, value, callback) => {
    if (item.reg.test(value) === false) {
      callback(new Error(item.title))
    } else {
      callback()
    }
  }
}

{ validator: validate('just') },

标签：title,上传,zA,banner,file,type,reg
来源： https://www.cnblogs.com/cx698038/p/13702995.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。