直播小程序接入七牛直传图片功能的教程

Qiniu-wxapp-SDK 用于直播小程序接入七牛云并实现直传功能，以便于用户在直播小程序端直接上传图片，并存储在七牛云存储中，步骤如下：

1、上传文件，支持图片文件、视频文件、PDF(.pdf), Word(.doc/.docx), Excel(.xls/.xlsx), PowerPoint(.ppt/.pptx)等文件格式。

2、文件在线查看，支持的文件格式：支持的文件格式：pdf, doc, docx, xls, xlsx, ppt, pptx。

以下根据个人需求改写Qiniu-wxapp-SDK简单使用介绍

一、七牛端：

创建七牛云账号，获取ak、sk，创建对象存储空间名称，根据你创建的七牛存储空间，把对应的 https 上传地址添加到小程序的访问白名单中，方法如下：

1. 登录 微信公众平台，前往 设置 - 开发设置，点击 服务器配置 下的「修改」链接。

2. 修改 uploadFile 域名(比如华东 https 上传地址为：https://up.qiniup.com，不同的存储区域上传地址也不相同

如果更新可参考官方链接：https://developer.qiniu.com/kodo/manual/1671/region-endpoint

二、服务端：

直播小程序上传七牛云需要qiniutoken，为保证安全，建议从服务端获取token值

本文以PHP为例：服务端接口获取token部分代码如下：

  /**
     * 获取七牛上传Token
     * @desc 用于获取七牛上传Token
     * @return int code 操作码，0表示成功
     * @return string msg 提示信息
     */
    public function getQiniuToken(){
      $rs = array('code' => 0, 'msg' => '', 'info' =>array());
 
      //获取后台配置的腾讯云存储信息
   $configpri=\App\getConfigPri();
   
   require_once API_ROOT.'/../sdk/qiniu/autoload.php';
   
   // 需要填写你的 Access Key 和 Secret Key
   $accessKey = $configpri['qiniu_accesskey'];
   
   $secretKey = $configpri['qiniu_secretkey'];
   $bucket = $configpri['qiniu_bucket'];
   $qiniu_domain_url = $configpri['qiniu_domain_url'];
   // 构建鉴权对象
   $auth = new \Qiniu\Auth($accessKey, $secretKey);
   // 生成上传 Token
   $token = $auth->uploadToken($bucket);
   $rs['info'][0]['token']=$token ; 
   return $rs; 
   
 }

三、直播小程序端

1、直播小程序需要调用服务接口获取七牛token，该方法我这里写在了utils文件夹里的util.js文件中，所以下文中上传图片引用的时候会用到对应的文件目录，该方法我在界面初始化监听的时候调用并写入了缓存方便后期使用，可根据自身需求更改token存储方式,代码如下：

 //获取七牛token
  function getQiniuloadToken() {
    var newurl=getApp().globalData.site_url + 'User.getQiniuToken';
    var data= {}
    this.requestpromise (newurl,'POST' ,data).then(res => {
      //服务器返回数据
      //console.log('success-七牛token----------:',res );
      //设置token信息缓存
      var qiniutoken=res.data.data.info[0]['token'];
      wx.setStorageSync('qiniutoken', qiniutoken);
      getApp().globalData.qiniutoken = qiniutoken;
 
    }).catch(res => {
        //异常
    }).finally(()=>{
        //结束
    })
  }
//模块化
module.exports = {
  getQiniuloadToken:getQiniuloadToken,
}

2、上传图片视图部分代码：

<view class="chooseView" bindtap="chooseDetail" >
<view class="add_img">
  .....
</view>
</view>

3、上传图片的js中需要引用七牛等通用js文件，其中：uploadURL、domain、region从文档开始的七牛部分获取。部分代码如下：

//引入相关文件
const app = getApp()
const tools = require('/upload/utils/util')//token获取方法所在文件
var qiniuUpload = require('/upload/utils/qiniuUploader')//七牛云上传必须js
4、js处理图片上传过程，
/** 选择图片detail */
chooseDetail: function() {
  var that = this;
  var state = 0;    // 上传第几张图片
  var imgList = []; // 保存图片数组
  if (that.data.detail.length < 9) {
    wx.chooseImage({
      count: 9,//限制文件个数
      sizeType: [ 'original','compressed'],//原图、压缩图
      sourceType: ['album', 'camera'],//相册、相机
      success: function(photo) {
        //上传到七牛
          wx.showLoading({
            title: '上传中...',
          })
          var uploadArr = photo.tempFilePaths;  // chooseImage上传成功的数组
          var uploadNum = photo.tempFilePaths.length; // 上传数组的长度
          var qiniutoken=getApp().globalData.qiniutoken;//全局定义七牛云token值，可根据需求自定义存储
          new Promise(function (resolve, reject) {
              for (var i = 0; i < uploadNum; i++) {
                  var random = Math.floor(Math.random() * 10000); //随机数
                  console.log("random======"+random);
                  qiniuUpload.upload(uploadArr[i], (res) => {
                      state++;
                      imgList.push(res.imageURL);
                      if (state == uploadNum) {
                          resolve(imgList);
                      }
                  }, (error) => {
                      reject('error');
                      console.log('error: ' + error);
                      wx.hideLoading();
                  }, {
                          uploadURL: 'http://up.qiniup.com', //上传到七牛的那个存储区域，上传区域根据存储空间所在区域决定。
                          domain: 'qiniu.pudu.live/',//CDN加速域名，此处末尾需加个/  不加的话在res.imageURL返回值中图片访问失败
                          uptoken: qiniutoken, //服务端接口获取的七牛token值
                          region: 'ECN',
                          key:'user/'+ random + '.png', // 图片自定义的key(名称) 
                      })
              }
          }).then(function (imgList) {
              console.log("imgList==========="+imgList);
              // imgLlist赋值
              that.setData({
                  imgList: that.data.imgList.concat(imgList)
              })
              wx.hideLoading();
          })
      }
    })
  } else {
    wx.showToast({
      title: '限制选择9个文件',
      icon: 'none',
      duration: 1000
    })
  }
},

以上为直播小程序接入七牛云直传图片等文件简单介绍，作为直播小程序服务商，云豹科技愿意为您免费协助申请七牛云账号并接入您的直播小程序中，如有需要请联系。

 声明：以上内容为云豹科技原创，未经作者本人同意，禁止转载，否则将追究相关法律责任www.yunbaokj.com