使用vue-image-crop-upload上传图片

安装

npm install vue-image-crop-upload

使用

// html
<myUpload
  v-model="show"
  @crop-success="cropSuccess"
  :width="imgLength"
  :height="imgLength"
/>
// script
// data
// 宽，高
imgLength: 120,
show: false
// method
cropSuccess(imgDataUrl, field) {
// url: imgDataUrl
      console.log('-------- crop success --------', imgDataUrl, field)
      this.imageUrl = imgDataUrl
      const arr = imgDataUrl.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const uBarr = new Uint8Array(n)
      while (n--) {
        uBarr[n] = bstr.charCodeAt(n)
      }
      const bdata = new Blob([uBarr], { type: mime })
      console.log(bdata)
      this.blobData = bdata
      this.paramsFile = new FormData()
      this.paramsFile.append('file', bdata, bdata.name) // this.paramsFile 上传的file文件
    }
    // bytes数组转 base64码
    arrayBufferToBase64(buffer) {
    // buffer : " [-1, -40, -1, -32, 0, 16, 74, 70, 73, 70, 0, 1, 2...]"
      var binary = ''
      var bytes = new Uint8Array(JSON.parse(buffer))
      var len = bytes.byteLength
      for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i])
      }
      console.log(binary)
      console.log(window.btoa(binary))
      const returnStr = 'data:image/png;base64,' + window.btoa(binary)
      return returnStr
    },