zoukankan      html  css  js  c++  java
  • 点击div上传图片,在img中预览

    template部分

    <div v-if="!form.imgVal" class="ad-img-wrap" @click="changeImageHandler">
      <span class="iconfont iconjiahao"></span>
    </div>
    <img v-else class="ad-img-wrap" :src="form.imgVal" alt="" accept="image/*">
    <input type="file" @change="changeImgHandler($event)" ref="adImg" style="display: none;"  accept="image/*">

    script部分

    data(){
      return{
        form:{
          imgVal: null
        }
      }
    }
    methods:{
      changeImageHandler () {
          this.$refs.adImg.dispatchEvent(new MouseEvent('click'))
      },
      changeImgHandler (e) {
          let fileName = this.$refs.adImg.value
          let list = fileName.split('.')
          let type = list[list.length - 1]
          let flag = false
          for (let i = 0; i < imgFormat.length; i++) {
            if (imgFormat[i] === type) flag = true
          }
          if (!flag) {
            this.$message({
              message: '请选择图片',
              type: 'warning'
            })
            return false
          }
          this.form.imgVal = this.getImg(e.target.files[0]) // 图片地址
        },
        getImg (file) {
          let url = ''
          if (window.createObjectURL !== undefined) { // basic
            url = window.createObjectURL(file)
          } else if (window.URL !== undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file)
          } else if (window.webkitURL !== undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file)
          }
          return url
        }
    }
  • 相关阅读:
    查杀木马利器,clamav
    zabbix运行久了以后效率会变慢的原因分析
    oracle sqlplus
    3000价位电脑配置实践
    phpmyadmin 万能密码漏洞
    nginx 的防cc攻击
    减少tcp TIME_WAIT 的数量
    nginx平滑升级
    心太大
    CentOS5.2下安装mplayer
  • 原文地址:https://www.cnblogs.com/haishen/p/11649286.html
Copyright © 2011-2022 走看看