WX05--页面传值、腾讯云对象存储
day05 页面传值、腾讯云对象存储
1. 页面传值
1.1 父页面向子页面传值
父页面：
# 通过参数形式放在 路由跳转的路径上
/pages/xx/xxx?id=1
子页面
// 通过子页面的 onLoad生命周期函数，option获取
onLoad:function(option){
}
1.2 子父页面
子页面
// 通过页面栈，获取到各级的页面对象，从而调用上级页面的对象属性或方法设置值
var pages = getCurrentPages();
var prevPage = pages[pages.length-2]; // 获取上一次的页面对象
prevPage.setData({ topicText:topicInfo.title });
// 注意：
1.该方法，只允许wx.navicagateTo() 跳转的形式，不能用 wx.redirectTo()，因为后者会关闭当前页面，没有页面栈
2.redirectTo是关闭当前页打开新页面，reLaunch是全部关闭打开新页面，navigateTo是不关闭当前页直接打开新页面
3.data-xx 可以给事件传值
2.腾讯云的对象存储
- 第一阶段：文件服务器，将文件存储在某个服务器（目录结构的划分）。
- 第二阶段：
- 文件存储，将文件存储在某个服务器（目录结构的划分）。
- 对象存储，存储优化和操作优化（不支持目录结构划分，以对象的形式存放在同一目录级）。
- 第三阶段：云服务（阿里/腾讯/七牛/亚马逊）
- 文件存储
- 对象存储
2.1 快速使用
- 注册相关信息
- 开发文档
// 由小程序端，直接上传到腾讯云服务器
<!--pages/publish/publish.wxml-->
<view bindtap="uploadImage">请上传图片</view>
<view class="container">
<image wx:for="{{imageList}}" src="{{item}}"></image>
</view>
<view bindtap="uploadFile">点击上传</view>
// pages/publish/publish.js
// 导入 小程序sdk.js 文件
var COS = require('../../utils/cos-wx-sdk-v5.js')
Page({
data: {
imageList: [],
onlineImageList:[],
},
// 选择图片
uploadImage:function(){
var that = this;
wx.chooseImage({
count:9,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success:function(res){
// 默认图片 + 选择的图片；
that.setData({
imageList: that.data.imageList.concat(res.tempFilePaths)
});
}
});
},
// 上传图片 (腾讯云对象存储+小程序sdk)
uploadFile:function(){
var onlineImageList = [];
var that = this;
// 实例化COS对象
var cos = new COS({
SecretId: 'AKIDW3Rgszw84ylQxMzNn7KOJ6kFPSL5c5MU',
SecretKey: 'GQSMXmtsjR0QhuIalzTp250nU6digZSD',
});
// 将选择后的图片，for循环，一张张上传
for(var index in this.data.imageList){
var filePath = this.data.imageList[index];
cos.postObject({
Bucket: 'mini-1251317460',
Region: 'ap-chengdu',
Key: index + "uuu.png",
FilePath: filePath,
onProgress: function (info) {
console.log('进度条', JSON.stringify(info));
}},
function (err, data) {
onlineImageList.push(data.Location);
});
}
)
2.2 临时密钥上传文件
// 实例化COS对象时，不直接传真实秘钥，去某个地方获取一个临时密钥
var cos = new COS({
getAuthorization: function (options, callback) {
// 服务端 JS 和 PHP 示例：https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/
// 服务端其他语言参考 COS STS SDK ：https://github.com/tencentyun/qcloud-cos-sts-sdk
// STS 详细文档指引看：https://cloud.tencent.com/document/product/436/14048
wx.request({
url: 'http://127.0.0.1:8000/api/credential/',
data: {
// 可从 options 取需要的参数
},
success: function (result) {
var data = result.data;
var credentials = data.credentials;
callback({
TmpSecretId: credentials.tmpSecretId,
TmpSecretKey: credentials.tmpSecretKey,
XCosSecurityToken: credentials.sessionToken,
ExpiredTime: data.expiredTime,
});
}
});
}
});
# python后端，生成临时秘钥的接口
from sts.sts import Sts
from django.conf import settings
class CredentialView(APIView):
def get(self,request,*args,**kwargs):
config = {
'duration_seconds': 1800, # 临时密钥有效时长，单位是秒
'secret_id': settings.TENCENT_SECRET_ID, # 固定密钥 id
'secret_key': settings.TENCENT_SECRET_KEY, # 固定密钥 key
# 设置网络代理
# 'proxy': {
# 'http': 'xx',
# 'https': 'xx'
# },
'bucket': 'mini-1251317460', # 换成你的 bucket
'region': 'ap-chengdu', # 换成 bucket 所在地区
# 这里改成允许的路径前缀，可以根据自己网站的用户登录态判断允许上传的具体路径
# 例子： a.jpg 或者 a/* 或者 * (使用通配符*存在重大安全风险, 请谨慎评估使用)
'allow_prefix': '*',
# 密钥的权限列表。简单上传和分片需要以下的权限，其他权限列表请看 https://cloud.tencent.com/document/product/436/31923
'allow_actions': [
'name/cos:PostObject',
],
}
sts = Sts(config)
response = sts.get_credential()
return Response(response)
3 七牛云的对象存储
3.1 Qiniu-wxapp-SDK
// 由小程序端，直接上传到七牛云服务器
// 通过七牛云社区SDK中的Qiniu-wxapp-SDK：https://developer.qiniu.com/sdk#community-sdk
// utils/qiniuUploader.js
(function () {
// 请参考demo的index.js中的initQiniu()方法，若在使用处对options进行了赋值，则此处config不需要赋默认值。init(options) 即updateConfigWithOptions(options)，会对config进行赋值
var config = {
// bucket 所在区域。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域
qiniuRegion: '',
// 七牛云bucket 外链前缀，外链在下载资源时用到
qiniuBucketURLPrefix: '',
// 获取uptoken方法三选一即可，执行优先级为：uptoken > uptokenURL > uptokenFunc。三选一，剩下两个置空。推荐使用uptokenURL，详情请见 README.md
// 由其他程序生成七牛云uptoken，然后直接写入uptoken
qiniuUploadToken: '',
// 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "0MLvWPnyy..."}
qiniuUploadTokenURL: '',
// uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数，详情请见 README.md
qiniuUploadTokenFunction: function () { },
// 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下载文件时，自定义下载名"使用样例。
qiniuShouldUseQiniuFileName: false
}
// init(options) 将七牛云相关配置初始化进本sdk
// 在整个程序生命周期中，只需要 init(options); 一次即可
// 如果需要变更七牛云配置，再次调用 init(options); 即可
function init(options) {
updateConfigWithOptions(options);
}
// 更新七牛云配置
function updateConfigWithOptions(options) {
if (options.region) {
config.qiniuRegion = options.region;
} else {
console.error('qiniu uploader need your bucket region');
}
if (options.uptoken) {
config.qiniuUploadToken = options.uptoken;
} else if (options.uptokenURL) {
config.qiniuUploadTokenURL = options.uptokenURL;
} else if (options.uptokenFunc) {
config.qiniuUploadTokenFunction = options.uptokenFunc;
}
if (options.domain) {
config.qiniuBucketURLPrefix = options.domain;
}
config.qiniuShouldUseQiniuFileName = options.shouldUseQiniuFileName
}
// 正式上传的前置方法，做预处理，应用七牛云配置
function upload(filePath, success, fail, options, progress, cancelTask) {
if (null == filePath) {
console.error('qiniu uploader need filePath to upload');
return;
}
if (options) {
updateConfigWithOptions(options);
}
if (config.qiniuUploadToken) {
doUpload(filePath, success, fail, options, progress, cancelTask);
} else if (config.qiniuUploadTokenURL) {
// console.log(config.qiniuUploadTokenURL)
getQiniuToken(function () {
doUpload(filePath, success, fail, options, progress, cancelTask);
});
} else if (config.qiniuUploadTokenFunction) {
console.log(config.qiniuUploadTokenFunction)
config.qiniuUploadToken = config.qiniuUploadTokenFunction();
if (null == config.qiniuUploadToken && config.qiniuUploadToken.length > 0) {
console.error('qiniu UploadTokenFunction result is null, please check the return value');
return
}
doUpload(filePath, success, fail, options, progress, cancelTask);
} else {
console.error('qiniu uploader need one of [uptoken, uptokenURL, uptokenFunc]');
return;
}
}
// 正式上传
function doUpload(filePath, success, fail, options, progress, cancelTask) {
if (null == config.qiniuUploadToken && config.qiniuUploadToken.length > 0) {
console.error('qiniu UploadToken is null, please check the init config or networking');
return
}
var url = uploadURLFromRegionCode(config.qiniuRegion);
// var fileName = filePath.split('//')[1]; 原始是切割到 tmp/xxx.jpg ，自己切割到 xxx.jpg
var fileName = filePath.split('//')[1].split('/')[1];
// 自定义上传key（即自定义上传文件名）。通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义文件名称。如果options非空，则使用options中的key作为fileName
if (options && options.key) {
fileName = options.key;
}
var formData = {
'token': config.qiniuUploadToken
};
// qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。
if (!config.qiniuShouldUseQiniuFileName) {
formData['key'] = fileName
};
var uploadTask = wx.uploadFile({
url: url,
filePath: filePath,
name: 'file',
formData: formData,
success: function (res) {
var dataString = res.data
try {
var dataObject = JSON.parse(dataString);
// 拼接fileURL
var fileURL = config.qiniuBucketURLPrefix + '/' + dataObject.key;
dataObject.fileURL = fileURL;
if (success) {
success(dataObject);
}
} catch (e) {
console.log('parse JSON failed, origin String is: ' + dataString);
if (fail) {
fail(e);
}
}
},
fail: function (error) {
console.error(error);
if (fail) {
fail(error);
}
}
})
// 文件上传进度
uploadTask.onProgressUpdate((res) => {
progress && progress(res)
})
// 中断文件上传
cancelTask && cancelTask(() => {
uploadTask.abort()
})
}
// 获取七牛云uptoken, url为后端服务器获取七牛云uptoken接口
function getQiniuToken(callback) {
wx.request({
url: config.qiniuUploadTokenURL,
success: function (res) {
var token = res.data.uptoken;
if (token && token.length > 0) {
config.qiniuUploadToken = token;
if (callback) {
callback();
}
} else {
console.error('qiniuUploader cannot get your token, please check the uptokenURL or server')
}
},
fail: function (error) {
console.error('qiniu UploadToken is null, please check the init config or networking: ' + error);
}
})
}
// 选择七牛云文件上传接口，文件向匹配的接口中传输。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域
function uploadURLFromRegionCode(code) {
var uploadURL = null;
switch (code) {
case 'ECN': uploadURL = 'https://up.qiniup.com'; break;
case 'NCN': uploadURL = 'https://up-z1.qiniup.com'; break;
case 'SCN': uploadURL = 'https://up-z2.qiniup.com'; break;
case 'NA': uploadURL = 'https://up-na0.qiniup.com'; break;
case 'ASG': uploadURL = 'https://up-as0.qiniup.com'; break;
default: console.error('please make the region is with one of [ECN, SCN, NCN, NA, ASG]');
}
return uploadURL;
}
module.exports = {
init: init,
upload: upload,
}
})();
3.2 后端python获取token
# http://127.0.0.1:8000/api/uptoken
# 生成七牛云上传uptoken接口
class uptokenView(APIView):
def get(self, request, *args, **kwargs):
# 需要填写你的 Access Key 和 Secret Key
access_key = 'xxx'
secret_key = 'yyy'
# 构建鉴权对象
q = Auth(access_key, secret_key)
# 要上传的空间
bucket_name = 'auction-edmond'
# 上传后保存的文件名
key = None # 由前端上传时，自己指定文件的key 即文件名
# 配置上传策略示例
# https://developer.qiniu.com/kodo/manual/1206/put-policy
# policy = {
# # 'callbackUrl':'https://requestb.in/1c7q2d31',
# # 'callbackBody':'filename=$(fname)&filesize=$(fsize)'
# # 'persistentOps':'imageView2/1/w/200/h/200'
# }
# 生成上传 Token，可以指定过期时间等
# 3600为token过期时间，秒为单位。3600等于一小时
token = q.upload_token(bucket_name, key, 86400, #policy)
print(token)
return APIResponse(uptoken=token)
3.3 上传使用
// 页面.js中
// 1.导入qiniuUploader
import qiniuUploader from "../../utils/qiniuUploader";
// 2.定义七牛云相关配置的初始化函数
function initQiniu() {
var options = {
region: 'SCN',
uptoken: '',
uptokenURL: 'http://127.0.0.1:8000/api/uptoken',
uptokenFunc: function () {},
domain: 'http://rayckcrlf.hn-bkt.clouddn.com',
shouldUseQiniuFileName: false
};
// 将七牛云相关配置初始化进本sdk
qiniuUploader.init(options);
}
Page({
data: {
imgList: []
},
// 3.在wx选择图片的成功回调函数中，上传到七牛云
upload_img: function () {
var that = this;
// 调用初始化函数，初始化七牛云配置
initQiniu();
wx.chooseImage({
count: 9,
sizeTypeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// 循环将选择后的图片，向七牛云上传
for(var filePath of res.tempFilePaths){
// 参数：文件路径、成功回调、失败回调、局部配置、进度函数、中止上传函数
qiniuUploader.upload(filePath, (res) => {
that.setData({ imgList: that.data.imgList.concat(res.fileURL)});
}, (error) => {
// console.error('error: ' + JSON.stringify(error));
},
// 此项为qiniuUploader.upload的第四个参数options，就是修改七牛云相关配置。若想在单个方法中变更七牛云相关配置，可以使用下述参数。
// 若想自定义上传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'
// },
null,
(progress) => {
// that.setData({
// 'imageProgress': progress
// });
// console.log('上传进度', progress.progress);
// console.log('已经上传的数据长度', progress.totalBytesSent);
// console.log('预期需要上传的数据总长度', progress.totalBytesExpectedToSend);
},
// 该参数在qiniuUploader.upload()中被赋值，用于中断上传
// cancelTask => that.setData({ cancelTask })
null)
}
}
})
},
})
浙公网安备 33010602011771号