arealy
<div class="block-input" style="height: 90px">
      <span><i class="red">*</i>上传图片:</span>
      <div class="img-area" v-for="(img,index) in imgs" :key="index">
        <img :src="img" style="width: 79px;height: 70px;" @click="showBig(img)"/>
        <a class="remove-log" @click="removeLog(img)">x</a>
      </div>

      <input type="file" id="pfile" accept="image/gif, image/jpeg,image/png, image/bmp" @change="getPhoto" style="display: none"/>
      <button  @click="getFile" v-show="isShowBtn" class="button">报表图片</button>
    </div>
    <div v-if="showImg" class="showImg-box">
      <div class="showImg-mask"  @click="hiddenImg"></div>
      <img :src="chooseImg" style="max-height:400px;max-width: 80%;"/>
    </div>
getFile () {
        document.getElementById(\'pfile\').click()
      },
      getPhoto () {
        let pfile = document.getElementById(\'pfile\')
        let f = pfile.files[0]
        let imgVal = pfile.value
        let fileName = imgVal.substring(imgVal.lastIndexOf(\'.\') + 1).toLowerCase()
        if (fileName !== \'jpg\' && fileName !== \'jpeg\' && fileName !== \'PNG\' && fileName !== \'png\' && fileName !== \'bmp\' && fileName !== \'gif\') {
          alert(\'不支持该格式的文件!\')
          return false
        }
        if (f.size > 1024 * 1024 * 10) {
          alert(\'上传图片大小不能大于10M!\')
          return false
        }
        var fReader = new FileReader()
        fReader.readAsDataURL(f)
        fReader.onload = (e) => {
          let res = fReader.result
          this.imgs.push(res)
          if (this.imgs.length === 1) {
            this.isShowBtn = false
          }
        }
      },
      removeLog (img) {
        this.imgs.pop()
        let upimgs = this.imgs
        for (let i = 0; i < upimgs.length; i++) {
          if (img === upimgs[i]) {
            upimgs.splice(i, 1)
            return
          }
        }
        if (upimgs.length < 1) {
          this.isShowBtn = true
          this.imgs = []
        }
      },
      showBig (img) {
        this.chooseImg = img
        this.showImg = true
      },
      hiddenImg () {
        this.showImg = false
      },

 

分类:

技术点:

相关文章: