小程序上传图片到七牛云
一、创建七牛云账号，获取ak、sk，创建对象存储空间名称
二、服务端接口获取七牛token值，个人使用的php编写的后端代码
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、服务端获取七牛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')//七牛云上传必须js
data: {
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文件获取路径：
扫描二维码关注公众号，回复：
16300823 查看本文章
链接：https://pan.baidu.com/s/1Vb93Hi8-GeS0abqHLSwqmQ
提取码：9fbo
以上小程序直传图片文件到七牛云简介完成，如有疑问留言即可。