<div class="choosePic">
    <div class="pics" :style="{backgroundImage: 'url(' + form.erpRecords + ')'}">
     <input type="file" class="uploads" @change="uploadserpRecords" accept="image/*" multiple >
     <img src="../../assets/home/ic_AddImage@3x.png" alt="" v-if="form.erpRecords == ''">
     <div v-if="form.erpRecords == ''">添加圖片</div>
    </div>
</div>

.choosePic{
   margin: 0.64rem 0;
   .pics{
    background-position: center;
    background-size: cover;
    width: 15.1467rem;
    height: 5.5467rem;
    background-color: #F9F9F9;
    border: 2px solid #C3C3C3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    color: #3DCA9A;
    font-weight: bold;
    border-radius: 0.213rem;
    >div{
     margin-left: 0.213rem;
     letter-spacing: 2px
    }
    .uploads{
     position: absolute;
     z-index: 99;
     left: 0;
     width: 99%;
     height: 5.5467rem;
     opacity: 0;
    }
    img{
     width: 1.4933rem;
     height: 1.4933rem;
    }

   }
  }

/**
 * 上傳銷售記錄
 */
uploadserpRecords (e) {
 let file = e.target.files[0]
 if (file === undefined) {
  return
 }
 if (file.size / 1024 > 1025) { // 文件大于1M（根據(jù)需求更改），進行壓縮上傳
  that.photoCompress(file, { // 調(diào)用壓縮圖片方法
   quality: 0.2
  }, function (base64Codes) {
   // console.log("壓縮后：" + base.length / 1024 + " " + base);
   let bl = that.base64UrlToBlob(base64Codes)
   // file.append('file', bl, 'file_' + Date.parse(new Date()) + '.jpg') // 文件對象
   that.uploadLice(bl) // 請求圖片上傳接口
  })
 } else { // 小于等于1M 原圖上傳
  this.uploadLice(file)
 }
}, 
/**
 * base64 轉(zhuǎn) Blob 格式 和file格式
 */
base64UrlToBlob (urlData) {
 let arr = urlData.split(','),
  mime = arr[0].match(/:(.*?);/)[1], // 去掉url的頭，并轉(zhuǎn)化為byte
  bstr = atob(arr[1]), // 處理異常,將ascii碼小于0的轉(zhuǎn)換為大于0
  n = bstr.length,
  u8arr = new Uint8Array(n)
 while (n--) {
  u8arr[n] = bstr.charCodeAt(n)
 }
 // 轉(zhuǎn)blob
 // return new Blob([u8arr], {type: mime})
 let filename = Date.parse(new Date()) + '.jpg'
 // 轉(zhuǎn)file
 return new File([u8arr], filename, {type: mime})
},
  /*
  壓縮圖片
  file：文件(類型是圖片格式)，
  obj：文件壓縮后對象width， height， quality(0-1)
  callback：容器或者回調(diào)函數(shù)
*/
photoCompress (file, obj, callback) {
 let that = this
 let ready = new FileReader()
 /* 開始讀取指定File對象中的內(nèi)容. 讀取操作完成時,返回一個URL格式的字符串. */
 ready.readAsDataURL(file)
 ready.onload = function () {
  let re = this.result
  that.canvasDataURL(re, obj, callback) // 開始壓縮
 }
},
/* 利用canvas數(shù)據(jù)化圖片進行壓縮 */
/* 圖片轉(zhuǎn)base64 */
canvasDataURL (path, obj, callback) {
 let img = new Image()
 img.src = path
 img.onload = function () {
  let that = this // 指到img
  // 默認(rèn)按比例壓縮
  let w = that.width,
   h = that.height,
   scale = w / h
  w = obj.width || w
  h = obj.height || (w / scale)
  let quality = 0.2 // 默認(rèn)圖片質(zhì)量為0.7
  // 生成canvas
  let canvas = document.createElement('canvas')
  let ctx = canvas.getContext('2d')
  // 創(chuàng)建屬性節(jié)點
  let anw = document.createAttribute('width')
  anw.nodeValue = w
  let anh = document.createAttribute('height')
  anh.nodeValue = h
  canvas.setAttributeNode(anw)
  canvas.setAttributeNode(anh)
  ctx.drawImage(that, 0, 0, w, h)
  // 圖像質(zhì)量
  if (obj.quality && obj.quality >= 1 && obj.quality < 0) {
   quality = obj.quality
  }
  // quality值越小，所繪制出的圖像越模糊
  let base64 = canvas.toDataURL('image/jpeg', quality)
  // 回調(diào)函數(shù)返回base64的值
  callback(base64)
 }
},
// 返回file文件，調(diào)用接口執(zhí)行上傳
uploadLice (file) {
 console.log(file)
 uploadLog(file, (data) => {
  this.form.operatingLicense = data
  console.log(data)
 })
},