Skip to content

Commit 62d63fb

Browse files
Wonder233wonderswang
Wonder233
and
wonderswang
authored
feat: 改变demo 展示形式，分类别展示。demo 增加数据万象示例。 (#45)
Co-authored-by: wonderswang <[email protected]>
1 parent dcbe236 commit 62d63fb

File tree

4 files changed

+274
-18
lines changed

4 files changed

+274
-18
lines changed

‎demo/demo-sdk.js‎

Lines changed: 236 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -134,13 +134,14 @@ var mylog = function (msg) {
134134
duration: 3000
135135
});
136136
};
137-
var dao = {
137+
138+
var toolsDao = {
138139
'request': function(){
139140
// 对云上数据进行图片处理
140141
cos.request({
141142
Bucket: config.Bucket,
142143
Region: config.Region,
143-
Key: '1.png',
144+
Key: 'photo.png',
144145
Method: 'POST',
145146
Action: 'image_process',
146147
Headers: {
@@ -352,8 +353,11 @@ var dao = {
352353
});
353354
console.log(url);
354355
},
356+
};
357+
358+
var bucketDao = {
355359
// Service
356-
getService: function() {
360+
'getService 获取存储桶列表': function() {
357361
cos.getService(requestCallback);
358362
},
359363
// 简单 Bucket 操作
@@ -363,12 +367,6 @@ var dao = {
363367
Region: config.Region,
364368
}, requestCallback);
365369
},
366-
getBucket: function() {
367-
cos.getBucket({
368-
Bucket: config.Bucket,
369-
Region: config.Region
370-
}, requestCallback);
371-
},
372370
headBucket: function() {
373371
cos.headBucket({
374372
Bucket: config.Bucket,
@@ -497,7 +495,92 @@ var dao = {
497495
Region: config.Region
498496
}, requestCallback);
499497
},
500-
// Object
498+
};
499+
500+
var objectDao = {
501+
'getBucket 获取对象列表': function() {
502+
cos.getBucket({
503+
Bucket: config.Bucket,
504+
Region: config.Region
505+
}, requestCallback);
506+
},
507+
// 上传文件适用于单请求上传大文件
508+
'postObject 表单上传对象': function() {
509+
wx.chooseImage({
510+
count: 1, // 默认9
511+
sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
512+
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
513+
success: function(res) {
514+
var file = res.tempFiles[0];
515+
cos.postObject({
516+
Bucket: config.Bucket,
517+
Region: config.Region,
518+
Key: '1.png',
519+
FilePath: file.path,
520+
onTaskReady: function(taskId) {
521+
TaskId = taskId
522+
},
523+
onProgress: function(info) {
524+
console.log(JSON.stringify(info));
525+
}
526+
}, requestCallback);
527+
}
528+
})
529+
},
530+
'putObject 简单上传文件': function(type) {
531+
wx.chooseMessageFile({
532+
count: 10,
533+
type: 'all',
534+
success: function(res) {
535+
var file = res.tempFiles[0];
536+
wxfs.readFile({
537+
filePath: file.path,
538+
success: function (res) {
539+
cos.putObject({
540+
Bucket: config.Bucket,
541+
Region: config.Region,
542+
Key: file.name,
543+
Body: res.data, // 在小程序里，putObject 接口只允许传字符串的内容，不支持 TaskReady 和 onProgress，上传请使用 cos.postObject 接口
544+
Headers: {
545+
// 万象持久化接口，上传时持久化。例子：通过 imageMogr2 接口使用图片缩放功能：指定图片宽度为 200，宽度等比压缩
546+
// 'Pic-Operations': '{"is_pic_info": 1, "rules": [{"fileid": "desample_photo.jpg", "rule": "imageMogr2/thumbnail/200x/"}]}'
547+
},
548+
}, requestCallback);
549+
},
550+
fail: err => console.error(err),
551+
});
552+
},
553+
fail: err => console.error(err),
554+
});
555+
},
556+
'putObject 上传字符串': function(type) {
557+
cos.putObject({
558+
Bucket: config.Bucket,
559+
Region: config.Region,
560+
Key: '1.txt',
561+
Body: 'hello world', // 在小程序里，putObject 接口只允许传字符串的内容，不支持 TaskReady 和 onProgress，上传请使用 cos.postObject 接口
562+
Headers: {
563+
aa: 123,
564+
},
565+
Query: {
566+
bb: 123,
567+
},
568+
}, requestCallback);
569+
},
570+
// 上传文件
571+
'putObject base64 转 ArrayBuffer 上传': function() {
572+
var base64Url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABRFBMVEUAAAAAo/8Ao/8Ao/8Ao/8ApP8Aov8Ao/8Abv8Abv8AyNwAyNwAo/8Ao/8Ao/8Abv8Ao/8AivgAo/8AyNwAbv8Abv8AydwApf8Abf8Ao/8AbP8Ao/8AyNwAydwAbv8AydwApP8Ao/8AyNwAo/8AyNwAydsAyNwAxd8Aov8AyNwAytsAo/8Abv8AyNwAbv8Av+MAo/8AytsAo/8Abv8AyNwAo/8Abv8AqfkAbv8Aov8Abv8AyNwAov8Abv8Ao/8Abv8Ao/8AydwAo/8Ao/8Ate8Ay9oAvOcAof8AveAAyNwAyNwAo/8AyNwAy9kAo/8AyNwAyNwAo/8AqP8Aaf8AyNwAbv0Abv8Abv8AaP8Ao/8Ao/8Ao/8Ao/8Abv8AyNwAgvcAaP8A0dkAo/8AyNwAav8Abv8Ao/8Abv8AyNwAy9sAvOUAtePdkYxjAAAAZnRSTlMAw/co8uAuJAn8+/Tt29R8DAX77+nZz87Jv6CTh3lxTklAPjouJRsL5tjAuLiyr62roaCakYp0XVtOQTMyLiohICAcGRP49vTv5+PJurawq6mnnJuYl4+OiIB7eXVvX15QSDgqHxNcw3l6AAABe0lEQVQ4y82P11oCQQxGIy5FUJpKk6aAhV6k92LvvXedDfj+92ZkYQHxnnMxu3/OfJMEJo6y++baXf5XVw22GVGcsRmq431mQZRYyIzRGgdXi+HwIv86NDBKisrRAtU1hSj9pkZ9jpo/9YKbRsmNNKCHDXI00BxfMMirKNpMcjQ5Lm4/YZArUXyBYUwg40nsdr5jb3LBe25VWpNeKa1GENsEnq52C80z1uW48estiKjb19G54QdCrScnKAU69U3KJ4jzrsBawDWPuOcBqMyRvlcb1Y+zjMUBVsivAKe4gXgEKiVjSh9wlunGMmwiOqFL3RI0cj+nkgp3jC1BELVFkGiZSuvkp3tZZWZ2sKCuDj185PXqfmwI7AAOUctHkJoOeXg3sxA4ES+l7CVvrYHMEmNp8GtR+wycPG0+1RrwWQUzl4CvgQmPP5Ddofl8tWkJVT7J+BIAaxEktrYZoRAUfXgOGYHfcOqw3WF/EdLccz5cMfvUCPb4QwUmhB8+v12HZPCkbgAAAABJRU5ErkJggg==';
573+
var m = (/data:image\/(\w+);base64,(.*)/.exec(base64Url) || []);
574+
var format = m[1];
575+
var bodyData = m[2];
576+
var fileBuf = wx.base64ToArrayBuffer(bodyData);
577+
cos.putObject({
578+
Bucket: config.Bucket,
579+
Region: config.Region,
580+
Key: '1.' + format,
581+
Body: fileBuf,
582+
}, requestCallback);
583+
},
501584
getObject: function() {
502585
cos.getObject({
503586
Bucket: config.Bucket,
@@ -604,7 +687,61 @@ var dao = {
604687
// Level: 'bucket',
605688
}, requestCallback);
606689
},
607-
sliceCopyFile: function() {
690+
}
691+
692+
var advanceObjectDao = {
693+
'sliceUploadFile 分片上传': function() {
694+
var sliceUploadFile = function (file) {
695+
var key = file.name;
696+
cos.sliceUploadFile({
697+
Bucket: config.Bucket,
698+
Region: config.Region,
699+
Key: key,
700+
FilePath: file.path,
701+
FileSize: file.size,
702+
CacheControl: 'max-age=7200',
703+
Headers: {
704+
aa: 123,
705+
},
706+
Query: {
707+
bb: 123,
708+
},
709+
onTaskReady: function(taskId) {
710+
TaskId = taskId
711+
},
712+
onHashProgress: function(info) {
713+
console.log('check hash', JSON.stringify(info));
714+
},
715+
onProgress: function(info) {
716+
console.log(JSON.stringify(info));
717+
}
718+
}, requestCallback);
719+
};
720+
wx.chooseMessageFile({
721+
count: 10,
722+
type: 'all',
723+
success: function(res) {
724+
sliceUploadFile(res.tempFiles[0]);
725+
}
726+
});
727+
// wx.chooseVideo({
728+
// sourceType: ['album','camera'],
729+
// maxDuration: 60,
730+
// camera: 'back',
731+
// success(res) {
732+
// var name = res.tempFilePath.replace(/^.*?([^/]{32}\.\w+)$/, '$1');
733+
// sliceUploadFile({
734+
// name: name,
735+
// path: res.tempFilePath,
736+
// size: res.size,
737+
// });
738+
// },
739+
// fail(err) {
740+
// console.log(err);
741+
// }
742+
// })
743+
},
744+
'sliceCopyFile 分片复制': function() {
608745
// 创建测试文件
609746
var sourceName = '1.txt';
610747
var Key = '1.slicecopy.exe';
@@ -638,6 +775,93 @@ var dao = {
638775
},
639776
};
640777

778+
var ciObjectDao = {
779+
'上传时使用图片处理': function(){
780+
wx.chooseMessageFile({
781+
count: 10,
782+
type: 'all',
783+
success: function (res) {
784+
var file = res.tempFiles[0];
785+
wxfs.readFile({
786+
filePath: file.path,
787+
success: function (res) {
788+
cos.putObject({
789+
Bucket: config.Bucket, // Bucket 格式：test-1250000000
790+
Region: config.Region,
791+
Key: file.name,
792+
Body: res.data,
793+
Headers: {
794+
// 通过 imageMogr2 接口使用图片缩放功能：指定图片宽度为 200，宽度等比压缩
795+
'Pic-Operations':
796+
'{"is_pic_info": 1, "rules": [{"fileid": "desample_photo.jpg", "rule": "imageMogr2/thumbnail/200x/"}]}',
797+
},
798+
},
799+
requestCallback,
800+
);
801+
},
802+
fail: (err) => console.error(err),
803+
});
804+
},
805+
fail: (err) => console.error(err),
806+
});
807+
},
808+
'对云上数据进行图片处理': function(){
809+
// 对云上数据进行图片处理
810+
cos.request({
811+
Bucket: config.Bucket,
812+
Region: config.Region,
813+
Key: 'photo.png',
814+
Method: 'POST',
815+
Action: 'image_process',
816+
Headers: {
817+
// 通过 imageMogr2 接口使用图片缩放功能：指定图片宽度为 200，宽度等比压缩
818+
'Pic-Operations': '{"is_pic_info": 1, "rules": [{"fileid": "desample_photo.jpg", "rule": "imageMogr2/thumbnail/200x/"}]}'
819+
},
820+
}, requestCallback);
821+
},
822+
'下载时使用图片处理': function(){
823+
cos.getObject({
824+
Bucket: config.Bucket,
825+
Region: config.Region,
826+
Key: '1.png',
827+
QueryString: `imageMogr2/thumbnail/200x/`,
828+
}, requestCallback);
829+
},
830+
'生成带图片处理参数的签名 URL': function(){
831+
// 生成带图片处理参数的文件签名URL，过期时间设置为 30 分钟。
832+
cos.getObjectUrl({
833+
Bucket: config.Bucket,
834+
Region: config.Region,
835+
Key: 'photo.png',
836+
QueryString: `imageMogr2/thumbnail/200x/`,
837+
Expires: 1800,
838+
Sign: true,
839+
},
840+
(err, data) => {
841+
console.log('带签名', err || data);
842+
});
843+
844+
// 生成带图片处理参数的文件URL，不带签名。
845+
cos.getObjectUrl({
846+
Bucket: config.Bucket,
847+
Region: config.Region,
848+
Key: 'photo.png',
849+
QueryString: `imageMogr2/thumbnail/200x/`,
850+
Sign: false,
851+
},
852+
(err, data) => {
853+
console.log('不带签名', err || data);
854+
});
855+
856+
},
857+
}
858+
641859
// require('./test');
642860

643-
module.exports = dao;
861+
module.exports = {
862+
toolsDao: toolsDao,
863+
bucketDao: bucketDao,
864+
objectDao: objectDao,
865+
advanceObjectDao: advanceObjectDao,
866+
ciObjectDao: ciObjectDao,
867+
};

‎demo/pages/index/index.js‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,26 @@ var postUpload = require('../../demo-post-policy');
55

66
var option = {
77
data: {
8-
list: []
8+
listMap: {},
9+
title: {
10+
toolsDao: '工具函数',
11+
bucketDao: '存储桶操作',
12+
objectDao: '对象操作',
13+
advanceObjectDao: '高级操作',
14+
ciObjectDao: '数据万象示例',
15+
},
916
},
1017
};
1118

1219
for (var key in demoSdk) {
1320
if (demoSdk.hasOwnProperty(key)) {
14-
option.data.list.push(key);
15-
option[key] = demoSdk[key];
21+
var sublist = [];
22+
var subDemoSdk = demoSdk[key];
23+
for (var subkey in subDemoSdk){
24+
sublist.push(subkey);
25+
option[subkey] = subDemoSdk[subkey];
26+
}
27+
option.data.listMap[key] = sublist;
1628
}
1729
}
1830

‎demo/pages/index/index.wxml‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@
66
<button type="primary" class="button" bindtap="simpleUpload"><text style="font-weight:bold;">[推荐]</text> 不使用 SDK 简单上传2</button>
77
</view>
88
<view class="title">小程序完整 SDK 例子（功能齐全，文件较大）</view>
9-
<view class="list">
10-
<button type="primary" class="button {{index}}" bindtap="{{item}}" wx:for="{{list}}" wx:key="key">{{item}}</button>
9+
<view class="list-panel" wx:for="{{listMap}}" wx:index="index" wx:for-item="list" wx:key="index">
10+
<view class="sub-title"> {{title[index]}} {{key}}</view>
11+
<view class="list">
12+
<button type="primary" class="button {{index}}" bindtap="{{item}}" wx:for="{{list}}" wx:key="key">{{item}}</button>
13+
</view>
1114
</view>
1215
</view>

‎demo/pages/index/index.wxss‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,33 @@
66
width: 100%;
77
height: 30px;
88
line-height: 30px;
9-
vertical-align:middle;
109
border-top: 1px solid #ccc;
1110
margin:auto;
11+
font-size:14px;
12+
color:#333;
13+
text-align: left;
14+
font-weight: bold;
15+
}
16+
17+
.list-panel{
18+
width: 100%;
19+
}
20+
21+
.sub-title{
22+
display:block;
23+
box-sizing: border-box;
24+
padding: 0 5px;
25+
width: 100%;
26+
height: 30px;
27+
line-height: 30px;
1228
font-size:12px;
1329
color:#333;
1430
text-align: left;
1531
font-weight: bold;
1632
}
1733

1834
.list {
35+
margin-top: 10px;
1936
padding-bottom: 10px;
2037
width: 100%;
2138
}

0 commit comments

Comments
 (0)