小程序直接上传七牛云并在本地生成token

写在前面

本文主要记录小程序在本地生成七牛云的token，并上传到七牛云的探索历程。

效果展示

相关资料

1. 七牛云小程序插件官方文档： 七牛云小程序插件官方文档
2. 七牛云插件官方文档: 七牛云插件官方文档
3. 参考文章： 小程序生成七牛云token

需要引入的工具包

工具包链接： 工具包链接

步骤

1. 小程序端从七牛云后台管理获取相应的密钥 AK， SK， Bucket
2. 用这三个参数生成交互的 token
3. 再将七牛云sdk引入小程序
4. 调用上传方法上传文件

注意

生成token 的 Bucket是七牛云的命名空间， 如图所示： bucket是 hhimg

核心代码

• wxml

<button bindtap="chooseImage">选择图片</button>
<view>本地文件路径：{{imageLocalPath}}</view>
<button bindtap="startUpload">开始上传</button>
<image wx:if="{{showImageSrc}}" src="{{showImageSrc}}" mode="widthFix"></image>

• js

const utils = require("../../utils/util");
const qiniuUploader = require("../../utils/qiniuUploader");


Page({

  /**
   * 页面的初始数据
   */
  data: {
    imageLocalPath: "",
    token: "",
    showImageSrc: ""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    let param = {
      ak: "eG6z0ExxxxxxsscyH0gCkv_1vSALnyZ20K",
      sk: "9YAkRiOz-xxxxxxxnHXhOXmOkbOiqzGtDTu",
      bkt: "hhimg"
    };

    let token = utils.getQiniuToken(param);
    utils.initQiniu(token);

    this.setData({
      token
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  chooseImage() {
    const that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],  // original  原图  compressed 压缩图
      sourceType: ['album', 'camera'],
      success(res) {
        console.log(res);
        that.setData({
          imageLocalPath: res.tempFilePaths
        });
      },
      complete: (res) => { },
    })
  },

  startUpload() {
    let that = this;
    var filePath = this.data.imageLocalPath[0];
    

    // var filePath = res.tempFilePaths[0];
    // wx.chooseImage 目前微信官方尚未开放获取原图片名功能(2020.4.22)
    // 向七牛云上传
    qiniuUploader.upload(filePath, (res) => {
      that.setData({
        'imageObject': res
      });
      console.log('提示: wx.chooseImage 目前微信官方尚未开放获取原图片名功能(2020.4.22)');
      console.log('file url is: ' + res.fileURL);
      that.setData({
        showImageSrc: res.imageURL
      });
    }, (error) => {
      console.error('error: ' + JSON.stringify(error));
    },
      // 此项为qiniuUploader.upload的第四个参数options。若想在单个方法中变更七牛云相关配置，可以使用上述参数。如果不需要在单个方法中变更七牛云相关配置，则可使用 null 作为参数占位符。推荐填写initQiniu()中的七牛云相关参数，然后此处使用null做占位符。
      // 若想自定义上传key，请把自定义key写入此处options的key值。如果在使用自定义key后，其它七牛云配置参数想维持全局配置，请把此处options除key以外的属性值置空。
      // 启用options参数请记得删除null占位符
      // {
      //   region: 'NCN', // 华北区
      //   uptokenURL: 'https://[yourserver.com]/api/uptoken',
      //   domain: 'http://[yourBucketId].bkt.clouddn.com',
      //   shouldUseQiniuFileName: false,
      //   key: 'testKeyNameLSAKDKASJDHKAS',
      //   uptokenURL: 'myServer.com/api/uptoken'
      // },
      {
        key: utils.getUUid()
      },
      (progress) => {
        that.setData({
          'imageProgress': progress
        });
        console.log('上传进度', progress.progress);
        console.log('已经上传的数据长度', progress.totalBytesSent);
        console.log('预期需要上传的数据总长度', progress.totalBytesExpectedToSend);
      }, cancelTask => that.setData({ cancelTask })
    );
  }
})

• 工具类

const qiniuUploader = require("./qiniuUploader");
const Buffer = require('./buffer.js');
const CryptoJS = require('./hmac-sha1.js');
const base64 = require('./enc-base64.js');


const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

const base64ToUrlSafe = (v) => {
  return v.replace(/\//g, '_').replace(/\+/g, '-');
}

/**
 * 
 * @param {opt.ak 七牛云 ak  opt.sk 七牛云 sk opt.bkt七牛云的命名空间}} opt 
 */
const getQiniuToken = (opt) => {

  var accessKey = opt.ak;
  var secretkey = opt.sk;
  var bucket = opt.bkt;

  var strdata = {
    "scope": bucket,//空间域名
    "deadline": Date.parse(new Date()) + 360000 //当前时间截
  }
  wx.setStorageSync('tokentime', strdata.deadline)
  var str = JSON.stringify(strdata);
  var encoded = Buffer.from(str).toString('base64');
  var encodedStr = base64ToUrlSafe(encoded);
  //HmacSHA1加密

  var sign = CryptoJS.HmacSHA1(encodedStr, secretkey);
  var cod = base64.stringify(sign)
  var encodedSign = base64ToUrlSafe(cod);
  var token = accessKey + ':' + encodedSign + ':' + encodedStr;
  console.log('token', token)
  return token;
}

/**
 *  初始化七牛云相关配置
 * @param {}} token 七牛的加密token
 */
const initQiniu = (token) => {
  var options = {
    // bucket所在区域，这里是华北区。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域
    region: 'ECN',

    // 获取uptoken方法三选一即可，执行优先级为：uptoken > uptokenURL > uptokenFunc。三选一，剩下两个置空。推荐使用uptokenURL，详情请见 README.md
    // 由其他程序生成七牛云uptoken，然后直接写入uptoken
    uptoken: token,
    // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "0MLvWPnyy..."}
    // uptokenURL: 'https://[yourserver.com]/api/uptoken',
    // uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数，详情请见 README.md
    // uptokenFunc: function () { },

    // bucket 外链域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 fileURL 字段。否则需要自己拼接
    domain: 'https://qiniu.sijitianjian.com',
    // qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。
    // 微信自动生成的 filename较长，导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时，自定义下载名" 的组合方式。
    // 自定义上传key 需要两个条件：1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义key。（请不要直接在sdk中修改options参数，修改方法请见demo的index.js）
    // 通过fileURL下载文件时，自定义下载名，请参考：七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”（https://developer.qiniu.com/kodo/manual/1659/download-setting）。本sdk在README.md的"常见问题"板块中，有"通过fileURL下载文件时，自定义下载名"使用样例。
    shouldUseQiniuFileName: false
  };
  // 将七牛云相关配置初始化进本sdk
  qiniuUploader.init(options);
}

/**
 * 获取唯一字符串
 */
const getUUid = () => {
  var s = [];
  var hexDigits = "0123456789abcdef";
  for (var i = 0; i < 36; i++) {
    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
  }
  s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
  s[8] = s[13] = s[18] = s[23] = "-";

  var uuid = s.join("");
  return uuid;
}

module.exports = {
  formatTime: formatTime,
  getUUid,
  formatNumber,
  base64ToUrlSafe,
  getQiniuToken,
  initQiniu
}