day03上传图片和名称给后端

<template>
  <div class="app" v-if="showModal">
    <div class="mask"></div>
    <div class="container">
      <div class="header">
        <span>阶段奖励</span>
        <span @click="cancel">X</span>
      </div>
      <div class="rewardBody">
        <div class="rewardInput">
          <a href="javascript:;">奖励内容： </a>
          <input type="text" id="txt" placeholder="奖励内容" v-model="inputVal" ref="count" @input="lengthCheck($event, 5)">
          <span ref="tip" class="tip"></span>
        </div>
        <div class="updateFile">
          <a href="javascript:;">上传图片：</a>
          <img :src="avatar" class="img-avatar" ref="img_avatar">
          <div class="up_add_bg" data-attr="上传图片" ref="up_bg">
            <input type="file" name="avatar" id="uppic" accept="image/gif,image/jpeg,image/jpg,image/png" 
             @change="changeImage($event)" ref="avatarInput" class="uppic" value="请选择图片">
          </div>
        </div>
        <div class="rewardFoot">
          <div class="cancelBtn" @click="cancel">取消</div>
          <div class="comfirm">保存</div>
        </div>
      </div>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      maxlength: 5,
      sw: false,
      inputVal: '',
      inputText: '',
      showModal: true,
      avatar: require('../assets/clip.jpg'), //图片占位符号
      imgUrl: ''
    }
  },
  // watch: {
  //   inputVal: {
  //     handler: function() {
  //       var maxlength = 5;
  //       this.$refs.count.setAttribute("maxlength", maxlength);
  //       this.number = maxlength- this.$refs.count.value.length;
  //       console.log(this.number)
  //       if(this.number === 0) {
  //         console.log('dayu5')
  //       }
  //     },
  //     deep: true
  //   }
  // },
  methods: {
    lengthCheck(event, len) {
      if(event.target.value.length >= 5) {
       this.$refs.count.setAttribute('maxlength',len);
      }
      if(event.target.value.length >= 5) {
        this.$refs.tip.innerHTML = '最多只能输入五个字符'
      }
      console.log(this.inputVal)
      // if(event.target.value.length >= 6) {
      //   this.$message.error('不能超过5个字');
      // }
    },
     changeImage(e) {
        var imgurl 
				var file = e.target.files[0]
				var reader = new FileReader()
				var that = this
				reader.readAsDataURL(file)
				reader.onload = function(e) {
          console.log(e)
          console.log(this.result)
          if(this.result !== '') {
            that.$refs.img_avatar.style.display = 'inline-block';
            // that.$refs.attr('data-attr', '重新上传');
            that.$refs.up_bg.setAttribute('data-attr', '重新上传')
            console.log(that.$refs.img_avatar)
          }
          that.avatar = this.result
          // imgurl = JSON.stringify(that.avatar)
          that.base64ToBlob(that.avatar)
          console.log(imgurl)
          console.log(that.avatar)
        }
    },
     cancel() {
          this.showModal = false
    },
    // base64ToBlob(urlData) {
    //   var arr = urlData.split(',');
    //     var mime = arr[0].match(/:(.*?);/)[1] || 'image/png';
    //     // 去掉url的头，并转化为byte
    //     var bytes = window.atob(arr[1]);
    //     // 处理异常,将ascii码小于0的转换为大于0
    //     var ab = new ArrayBuffer(bytes.length);
    //     // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
    //     var ia = new Uint8Array(ab);
        
    //     for (var i = 0; i < bytes.length; i++) {
    //         ia[i] = bytes.charCodeAt(i);
    //     }

    //     var imgurl = new Blob([ab], {
    //         type: mime
    //     });
    //     console.log(imgurl)
    // }
  base64ToBlob(dataurl, filename = 'file') {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let suffix = mime.split('/')[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  
  var imgFile = new File([u8arr], `${filename}.${suffix}`, {
    type: mime
  })
  console.log(imgFile)
  return imgFile;
}
  }
}
</script>
<style lang="scss">
.app {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  .mask {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #cccccc;
    opacity: 0.5; //透明度
    z-index: -222;
  }
  .container {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 400px;
    width: 800px;
    transform: translate(-50%, -50%);
    background: #ffffff;
    box-shadow: 2px 2px 2px #cccccc, -2px -1px 2px #cccccc;
    .header {
      display: flex;
      padding: 3px 5px;
      font-size: 16px;
      color: #cccccc;
      justify-content: space-between;
      span:last-child {
        cursor: pointer;
        font-size: 18px;
        color: #000000;
      }
    }
    .rewardBody {
      width: 600px;
      margin: 0 auto;
      margin-top: 6px;
      .rewardInput {
        margin: 6px 0;
        height: 40px;
        // width: 200px;
        a {
          text-decoration: none;
          color: #cccccc;
          font-size: 15px;
          &::before {
            content: '*';
            color: red;
          }
        }
        input {
          outline: none;
          border: none;
          border: 1px solid #ccc;
          height: 20px;
          line-height: 20px;
        }
        .tip {
            font-size: 8px;
            white-space: nowrap;
            color: pink;
            padding-left: 20px;
          }
      }
      .updateFile {
        margin-top: 20px;
        height: 40px;
        width: 100%;
        a {
          text-decoration: none;
          color: #cccccc;
          font-size: 15px;
          &::before {
            content: '*';
            color: red;

          }
        }
        .img-avatar {
          height: 100px;
          width: 100px;
          vertical-align: text-top;
          display: none;

        }
        .up_add_bg {
          display: inline-block;
          margin-left: 10px;
          width: 80px;
          height: 30px;
          background: blueviolet !important;
          vertical-align: text-top;
          line-height: 30px;
          color: #ffffff;
          font-size: 18px;
          text-align: center;
          input {
            position: absolute;
            outline: none;
            border: none;
            display: inline-block;
            height: 30px;
            line-height: 30px;
            width: 100px;
            margin: 0 auto;
            opacity: 1;
            z-index: 99999;
            overflow: hidden;
            margin-top: 10px;
            margin-left: 6px;
            z-index: 222;
            opacity: 0;
          }
          &::after {
            content: attr(data-attr);;
            color: #ffffff;
          }
          
        }
        
      }
      .rewardFoot {
        margin-top: 120px;
        display: flex;
        justify-content: center;
        .cancelBtn, .comfirm {
          width: 60px;
          height: 40px;
          margin-right: 30px;
          color: #ffffff;
          line-height: 40px;
          text-align: center;
          background: orange;
          border-radius: 8px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>