小程序上传图片到七牛云
一、创建七牛云账号，获取ak、sk，创建对象存储空间名称
二、服务端接口获取七牛token值，个人使用的php编写的后端代码
1、小程序获取token接口调用，该方法我这里写在了utils文件夹里的util.js文件中，所以下文中上传图片引用的时候会用到对应的文件目录，该方法我在界面初始化监听的时候调用并写入了缓存方便后期使用，可根据自身需求更改token存储方式,代码如下：
//获取七牛tokenfunction 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、服务端获取七牛token接口，相关的七牛信息都在配置文件中读取，需要引用七牛autoload.php文件，代码如下：
/*** 获取七牛上传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、wxml部分代码，chooseDetail为绑定的选择图片的方法
<view class="chooseView" bindtap="chooseDetail" ><view class="add_img">.....</view></view>2、上传图片js引用公共js：
//引入相关文件
const app = getApp()
const tools = require('../../utils/util')//token获取方法所在文件
var qiniuUpload = require('../../utils/qiniuUploader')//七牛云上传必须jsdata: {imgList: [],//初始化定义上传图片集合},3、chooseDetail方法代码如下：
/** 选择图片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})}},其中qiniuUploader.js文件获取路径：
链接：https://pan.baidu.com/s/1Vb93Hi8-GeS0abqHLSwqmQ
提取码：9fbo
以上小程序直传图片文件到七牛云简介完成，如有疑问留言即可。
