vue 移动端七牛云图片上传js，附图片base64转码+压缩js

最近做一个vue公众号项目需要上传用户身份证到七牛云上，本想网上找一个现成的，找了一些都不是很满意于是自己参照着写了一个，做得不好勿喷！

HTML 代码

<div class="upload_main">
    <input type="file" class="uploadSelect" @change="uploadBack"  accept="image/*" multiple >
    <img :src="idCardBack" alt="">
    <div>选择图片</div>
</div>

CSS 代码

.upload_main{
        width: 100%;
        height: 120px;
        border-radius: 5px;
        position: relative;
        display: flex;
        justify-content: center;
        margin: 10px 0;
        align-items: center;
        border: 1px solid #eee;
        .uploadSelect{
            position: absolute;
            z-index: 2;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
        img{
            position: absolute;
            width: 100%;
            z-index: 1;
            max-height: 100%;
        }
    }

JS 代码

<script>
import { uploads } from '../../js/baseCodes.js' // 图片转码压缩
import { qiniudnUploader } from '../../js/qiniudnUploader.js' // 七牛上传
export default {
  data () {
    return {
      idCardBack: '', // 果农身份证背面图片
      token: '', // 七牛云上传凭证token 后台给
      key:'' // 七牛上传key 后台给
    }
  },
  methods: {
  	uploadBack (e) { // 获取身份证反面
  	  // e图片信息，传到uploads方法进行图片转码压缩，file是回调处理好的文件信息，
  	  // 直接上传即可（此处我是用的七牛云）
      uploads(e, file => { 
      	// 七牛方法
        qiniudnUploader(this.token, file, this.key, json => { // 请求上传
          // 上传成功回调数据
        })
      })
    }
  }
}
</script>

baseCodes.js 代码 ===== 图片小于1M直接上传，大于1M图片base64转码压缩

var uploads = (e, upload) => {
  // 图片选择
  var file = e.target.files[0]
  // console.log(file)
  if (file === undefined) { return }
  if (file.size / 1024 > 1025) { // 文件大于1M（根据需求更改），进行压缩上传
    photoCompress(file, { // 调用压缩图片方法
      quality: 0.2
    }, function (base64Codes) {
      // console.log("压缩后：" + base.length / 1024 + " " + base);
      var bl = baseUrlToBlob(base64Codes)
      // console.log(bl)
      // file.append('file', bl, 'file_' + Date.parse(new Date()) + '.jpg') // 文件对象
      upload(bl) // 请求图片上传接口
    })
  } else { // 小于等于1M 原图上传
    upload(file)
  }
}

// base64 转 Blob 格式 和file格式
var baseUrlToBlob = (urlData) => {
  var arr = urlData.split(',')
  var mime = arr[0].match(/:(.*?);/)[1] // 去掉url的头，并转化为byte
  var bstr = atob(arr[1]) // 处理异常,将ascii码小于0的转换为大于0
  var n = bstr.length
  var u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  // 转blob
  // return new Blob([u8arr], {type: mime})
  var filename = Date.parse(new Date()) + '.jpg'
  // 转file
  return new File([u8arr], filename, { type: mime })
}

// 压缩图片
// file：文件(类型是图片格式)，
// obj：文件压缩后对象width， height， quality(0-1)
// callback：容器或者回调函数
var photoCompress = (file, obj, callback) => {
  var ready = new FileReader()
  /* 开始读取指定File对象中的内容. 读取操作完成时,返回一个URL格式的字符串. */
  ready.readAsDataURL(file)
  ready.onload = function () {
    var re = this.result
    canvasDataURL(re, obj, callback) // 开始压缩
  }
}

/* 利用canvas数据化图片进行压缩 */
/* 图片转base64 */
var canvasDataURL = (path, obj, callback) => {
  var img = new Image()
  img.src = path
  img.onload = function () {
    var that = this // 指到img
    // 默认按比例压缩
    var w = that.width
    var h = that.height
    var scale = w / h
    w = obj.width || w
    h = obj.height || (w / scale)
    var quality = 0.2 // 默认图片质量为0.7
    // 生成canvas
    var canvas = document.createElement('canvas')
    var ctx = canvas.getContext('2d')
    // 创建属性节点
    var anw = document.createAttribute('width')
    anw.nodeValue = w
    var 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值越小，所绘制出的图像越模糊
    var base64 = canvas.toDataURL('image/jpeg', quality)
    // 回调函数返回base64的值
    callback(base64)
  }
}

export { uploads }

qiniudnUploader.js 代码 ===== 七牛上传

// npm安装：npm install qiniu-js
import * as qiniu from 'qiniu-js'
// 七牛云上传
var qiniudnUploader = (token, file, key, obj) => {
  // var keyall = key + (new Date()).getTime() + '1' + Math.floor(Math.random() * 10000) // 当前时间戳+随机数
  var putExtra = {
    fname: '',
    params: {},
    mimeType: ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'] // 不限制 null
  }

  var config = {
    useCdnDomain: true,
    region: qiniu.region.z2
  }

  // 上传回调
  var observer = {
    next (res) {
      // ...
      console.log('next：' + JSON.stringify(res))
    },
    error (err) {
      // ...
      console.log('error：' + err)
    },
    complete (res) {
      // ...
      obj(res)
      console.log('complete：' + JSON.stringify(res))
    }
  }

  var observable = qiniu.upload(file, key, token, putExtra, config)
  observable.subscribe(observer) // 上传开始
}

export { qiniudnUploader }

注意：qiniudnUploader.js 需要安装七牛js

npm安装：npm install qiniu-js

import * as qiniu from 'qiniu-js'

到此完结了