vue项目上传base64位图片； 及预览效果

第一步:html部分

<input type="file" style="display: none;" name="img" ref="inputFile" id="" @change="changeFile">
      <div>
        <button @click="clickFile">上传图片</button>
      </div>
      <div>
        <img :src="item" v-for="(item, index) in imgData" :key="index" alt="">
      </div>

第二步:change事件

changeFile (e) {
      if (this.imgData.length < 2) {
        for (var i = 0; i < this.$refs.inputFile.files.length; i++) {
          var imgFile = this.$refs.inputFile.files[i]
          console.log(imgFile.size)
          if (imgFile.size > 1 * 1024 * 1024) return alert('不能超过1m')
          var reader = new FileReader()
          reader.onload = (res) => {
            this.imgData = this.imgData.concat(res.target.result)
          }
          reader.readAsDataURL(imgFile)
        }
      } else {
        alert('最多只能上传2张图片')
      }
    }

第三步: 模拟点击

clickFile () {
      this.$refs.inputFile.click()
    }