微信h5--直传图片到阿里云OSS

step1 获取阿里云签名（相当于获取一个上传到服务器的密钥）

         await flyGetAlioss()

step2 自定义图片文件名

//自定义文件名
        let key = utils.formatFileName(avatar)
//上传到阿里云，具体方法下文有介绍
        await utils.uploadHandler(avatar, key, result)
//最后头像地址这边采取cdn拼接（看公司需求）
        this.userInfo.avatar = 'https://' + result.cdn + '/' + key

/**
 * 定义阿里云上传文件名
 */
function formatFileName () {
  // 随机生成文件名
  let fileRandName = Date.now() + '' + parseInt(Math.random() * 1000)
  let key =
    'userAvatar/' +
    fileRandName +
    store.state.userInfo.id +
    '.jpg'
  return key
}

step3 上传到阿里云具体步骤（利用OSS Browser.js SDK 将文件上传到 OSS）

详情见--- help.aliyun.com/document_de…

需要注意的坑！！！

1.getlocalImgData方法获得的是base64格式，需要专成blob格式，方法在后文有介绍

2.手机端getlocalImgData方法获得的是base64格式不是正常的base64格式，安卓/ios都要进行相应转换

const OSS = require('ali-oss')
/**
 * 上传图片到阿里云
 * @param avatar [string] 头像临时地址
 * @param key [string] 上传后文件名
 * @param ossResult [string] 阿里云签名
 */
function uploadHandler (avatar, key, ossResult) {
  let {
    bucket,
    region,
    credentials: { AccessKeyId, AccessKeySecret, SecurityToken }
  } = ossResult
  let client = new OSS({
    region,
    // 云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
    accessKeyId: AccessKeyId,
    accessKeySecret: AccessKeySecret,
    stsToken: SecurityToken,
    bucket
  })
  console.log(client)
  return new Promise((resolve, reject) => {
    wx.getLocalImgData({
      localId: avatar,
      success: (res) => {
        let localData = res.localData
        //手机端getlocalImgData方法获得的是base64格式不是正常的base64格式，安卓/ios都要进行相应转换
        if (localData.indexOf('data:image') !== 0) {
          // 判断是否有这样的头部
          localData = 'data:image/jpeg;base64,' + localData
        }
        localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
        
        let fileImage = dataURLtoBlob(localData)
        
        //以下步骤不可省略（fileImage只能是buffer/blob格式）
        client.put(key, fileImage).then((r1) => {
          console.log(r1, 'r1')
          resolve()
          return client.get(key)
        }).then(function (r2) {
          console.log('get success: %j', r2)
        }).catch(function (err) {
          console.error('error: %j', err)
          reject(err)
        })
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

// 符合微信的base64转blob
function dataURLtoBlob (dataURI) {
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0] // mime类型
  var byteString = atob(dataURI.split(',')[1]) // base64 解码
  var arrayBuffer = new ArrayBuffer(byteString.length) // 创建缓冲数组
  var intArray = new Uint8Array(arrayBuffer) // 创建视图

  for (var i = 0; i < byteString.length; i++) {
    intArray[i] = byteString.charCodeAt(i)
  }
  return new Blob([intArray], { type: mimeString })
}