js 上传图片

<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
      },

 

posted @ 2019-06-19 16:26  拈花醉  阅读(225)  评论(0编辑  收藏  举报