album.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. const { listToMatrix } = require('../../lib/util.js');
  2. var COS = require('../../lib/cos-wx-sdk-v5.js');
  3. const config = require('../../config.js');
  4. const util = require('../../lib/util.js');
  5. var cos = new COS({
  6. getAuthorization: function (options, callback) {
  7. wx.request({
  8. method: 'GET',
  9. url: config.stsUrl, // 服务端签名,参考 server 目录下的两个签名例子
  10. dataType: 'json',
  11. success: function (result) {
  12. var data = result.data;
  13. callback({
  14. TmpSecretId: data.credentials && data.credentials.tmpSecretId,
  15. TmpSecretKey: data.credentials && data.credentials.tmpSecretKey,
  16. XCosSecurityToken: data.credentials && data.credentials.sessionToken,
  17. ExpiredTime: data.expiredTime,
  18. });
  19. }
  20. });
  21. },
  22. });
  23. Page({
  24. data: {
  25. // 相册列表数据
  26. albumList: [],
  27. // 图片布局列表(二维数组,由`albumList`计算而得)
  28. layoutList: [],
  29. // 布局列数
  30. layoutColumnSize: 3,
  31. // 是否显示loading
  32. showLoading: false,
  33. // loading提示语
  34. loadingMessage: '',
  35. // 是否显示toast
  36. showToast: false,
  37. // 提示消息
  38. toastMessage: '',
  39. // 是否显示动作命令
  40. showActionsSheet: false,
  41. // 当前操作的图片
  42. imageInAction: '',
  43. // 图片预览模式
  44. previewMode: false,
  45. // 当前预览索引
  46. previewIndex: 0,
  47. // 切换动画的时间
  48. slideDuration: 400,
  49. },
  50. onShareAppMessage: function (res) {
  51. return {
  52. title: 'COS 上传示例 - 共享相册',
  53. path: this.route,
  54. }
  55. },
  56. // 显示loading提示
  57. showLoading(loadingMessage) {
  58. this.setData({ showLoading: true, loadingMessage });
  59. },
  60. // 隐藏loading提示
  61. hideLoading() {
  62. this.setData({ showLoading: false, loadingMessage: '' });
  63. },
  64. // 显示toast消息
  65. showToast(toastMessage) {
  66. this.setData({ showToast: true, toastMessage });
  67. },
  68. // 隐藏toast消息
  69. hideToast() {
  70. this.setData({ showToast: false, toastMessage: '' });
  71. },
  72. // 隐藏动作列表
  73. hideActionSheet() {
  74. this.setData({ showActionsSheet: false, imageInAction: '' });
  75. },
  76. onLoad() {
  77. var self = this;
  78. this.renderAlbumList();
  79. this.getAlbumList(function (list) {
  80. list = self.data.albumList.concat(list || {});
  81. if (!list.length) {
  82. list = [];
  83. }
  84. list = list.reverse();
  85. self.setData({ 'albumList': list });
  86. self.renderAlbumList();
  87. });
  88. },
  89. // 获取相册列表
  90. getAlbumList(callback) {
  91. this.showLoading('加载列表中…');
  92. setTimeout(() => this.hideLoading(), 1000);
  93. cos.getBucket({
  94. Bucket: config.Bucket,
  95. Region: config.Region,
  96. Prefix: config.albumDir
  97. }, function (err, data) {
  98. if (data) {
  99. var list = (data && data.Contents || [])
  100. .map((v) => 'https://' + config.Bucket + '.cos.' + config.Region + '.myqcloud.com/' + util.camSafeUrlEncode(v.Key).replace(/%2F/g, '/'))
  101. .filter((v) => /\.(jpg|png|gif)$/.test(v));
  102. callback(list);
  103. } else {
  104. callback([]);
  105. }
  106. });
  107. },
  108. // 渲染相册列表
  109. renderAlbumList() {
  110. let layoutColumnSize = this.data.layoutColumnSize;
  111. let layoutList = [];
  112. var imageList = [].concat(this.data.albumList);
  113. imageList.unshift({type:'add'});
  114. layoutList = listToMatrix(imageList, layoutColumnSize);
  115. this.setData({ layoutList });
  116. },
  117. // 从相册选择照片或拍摄照片
  118. chooseImage() {
  119. var self = this;
  120. wx.chooseImage({
  121. count: 9,
  122. sizeType: ['original', 'compressed'],
  123. sourceType: ['album', 'camera'],
  124. success: (res) => {
  125. this.showLoading('正在上传图片…');
  126. res.tempFilePaths.forEach(function (filePath) {
  127. var Key = config.albumDir + util.getRandFileName(filePath);
  128. filePath && cos.postObject({
  129. Bucket: config.Bucket,
  130. Region: config.Region,
  131. Key: Key,
  132. FilePath: filePath
  133. }, function (err, data) {
  134. if (data) {
  135. let albumList = self.data.albumList;
  136. albumList.unshift('https://' + data.Location);
  137. self.setData({ albumList });
  138. self.renderAlbumList();
  139. }
  140. self.hideLoading();
  141. });
  142. });
  143. },
  144. });
  145. },
  146. // 进入预览模式
  147. enterPreviewMode(event) {
  148. var self = this;
  149. if (this.data.showActionsSheet) {
  150. return;
  151. }
  152. let imageUrl = event.target.dataset.src;
  153. let previewIndex = this.data.albumList.indexOf(imageUrl);
  154. this.setData({ slideDuration: 0 });
  155. setTimeout(function () {
  156. self.setData({ previewMode: true, previewIndex: previewIndex});
  157. setTimeout(function () {
  158. self.setData({ slideDuration: 400 });
  159. }, 400);
  160. });
  161. },
  162. // 退出预览模式
  163. leavePreviewMode() {
  164. this.setData({ previewMode: false, previewIndex: 0 });
  165. },
  166. // 显示可操作命令
  167. showActions(event) {
  168. this.setData({ showActionsSheet: true, imageInAction: event.target.dataset.src });
  169. },
  170. // 下载图片
  171. downloadImage() {
  172. this.showLoading('正在保存图片…');
  173. console.log('download_image_url', this.data.imageInAction);
  174. wx.downloadFile({
  175. url: this.data.imageInAction,
  176. type: 'image',
  177. success: (resp) => {
  178. wx.saveFile({
  179. tempFilePath: resp.tempFilePath,
  180. success: (resp) => {
  181. this.showToast('图片保存成功');
  182. },
  183. fail: (resp) => {
  184. console.log('fail', resp);
  185. },
  186. complete: (resp) => {
  187. console.log('complete', resp);
  188. this.hideLoading();
  189. },
  190. });
  191. },
  192. fail: (resp) => {
  193. console.log('fail', resp);
  194. },
  195. });
  196. this.setData({ showActionsSheet: false, imageInAction: '' });
  197. },
  198. // 删除图片
  199. deleteImage() {
  200. let imageUrl = this.data.imageInAction;
  201. var m = imageUrl.match(/^https:\/\/[^\/]+\/([^#?]+)/);
  202. var Key = m && m[1] || '';
  203. if (Key) {
  204. this.showLoading('正在删除图片…');
  205. this.setData({ showActionsSheet: false, imageInAction: '' });
  206. cos.deleteObject({
  207. Bucket: config.Bucket,
  208. Region: config.Region,
  209. Key: Key,
  210. }, (err, data)=>{
  211. if (data) {
  212. let index = this.data.albumList.indexOf(imageUrl);
  213. if (~index) {
  214. let albumList = this.data.albumList;
  215. albumList.splice(index, 1);
  216. this.setData({ albumList });
  217. this.renderAlbumList();
  218. }
  219. this.showToast('图片删除成功');
  220. } else {
  221. this.showToast('图片删除失败');
  222. }
  223. this.hideLoading();
  224. });
  225. }
  226. },
  227. });