Vue移动端实现图片上传及超过1M压缩上传

<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（根据需求更改），进行压缩上传
 that.photocompress(file, { // 调用压缩图片方法
  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 转 blob 格式 和file格式
 */
base64urltoblob (urldata) {
 let arr = urldata.split(','),
 mime = arr[0].match(/:(.*?);/)[1], // 去掉url的头，并转化为byte
 bstr = atob(arr[1]), // 处理异常,将ascii码小于0的转换为大于0
 n = bstr.length,
 u8arr = new uint8array(n)
 while (n--) {
 u8arr[n] = bstr.charcodeat(n)
 }
 // 转blob
 // return new blob([u8arr], {type: mime})
 let filename = date.parse(new date()) + '.jpg'
 // 转file
 return new file([u8arr], filename, {type: mime})
},
 /*
 压缩图片
 file：文件(类型是图片格式)，
 obj：文件压缩后对象width， height， quality(0-1)
 callback：容器或者回调函数
*/
photocompress (file, obj, callback) {
 let that = this
 let ready = new filereader()
 /* 开始读取指定file对象中的内容. 读取操作完成时,返回一个url格式的字符串. */
 ready.readasdataurl(file)
 ready.onload = function () {
 let re = this.result
 that.canvasdataurl(re, obj, callback) // 开始压缩
 }
},
/* 利用canvas数据化图片进行压缩 */
/* 图片转base64 */
canvasdataurl (path, obj, callback) {
 let img = new image()
 img.src = path
 img.onload = function () {
 let that = this // 指到img
 // 默认按比例压缩
 let w = that.width,
  h = that.height,
  scale = w / h
 w = obj.width || w
 h = obj.height || (w / scale)
 let quality = 0.2 // 默认图片质量为0.7
 // 生成canvas
 let canvas = document.createelement('canvas')
 let ctx = canvas.getcontext('2d')
 // 创建属性节点
 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)
 // 图像质量
 if (obj.quality && obj.quality >= 1 && obj.quality < 0) {
  quality = obj.quality
 }
 // quality值越小，所绘制出的图像越模糊
 let base64 = canvas.todataurl('image/jpeg', quality)
 // 回调函数返回base64的值
 callback(base64)
 }
},
// 返回file文件，调用接口执行上传
uploadlice (file) {
 console.log(file)
 uploadlog(file, (data) => {
 this.form.operatinglicense = data
 console.log(data)
 })
},