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

1 实现效果


2 代码

HTml：

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

Css： 使用了less ，需要引入less，才能使用（npm install less less-loader --save）

 .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;
        }

      }
    }

JS:
/**
 * 上传销售记录
 */
uploadserpRecords (e) {
  let file = e.target.files[0]
  if (file === undefined) {
    return
  }
  if (file.size / 1024 > 1025) { // 文件大于1M（根据需求更改），进行压缩上传
    this.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)
  })
},

---

Tips：【小程序云开发】中高级前端面试题库（源码：小程序中联系我哟）。
---------- 创作不易，感谢大家，请多多支持！