微信小步伐直传腾讯云COS并对图片长期化笔墨水印案例 ...

各人好，我是前端发现者https://blog.csdn.net/Smell_rookie，是一名页面仔工程师，我会不定时在CSDN更新我的博客，有兴趣的可以点个关注来逛逛我的主页。
写这个需求时网上搜索看到的文章不计其数，很多“缺斤少两”，今天做个总结吧。
一、前期准备

• 到 (COS对象存储控制台)[登录 - 腾讯云] 创建存储桶，得到 Bucket（存储桶名称） 和 Region（地域名称）
  
• 到 (控制台密钥管理)[登录 - 腾讯云] 获取您的项目 SecretId 和 SecretKey
  

二、盘算署名

由于署名盘算放在前端会暴露 SecretId 和 SecretKey，我们把署名盘算过程放在后端实现，前段通过 ajax 向后端获取署名结果，正式部署时请再后端加一层本身网站本身的权限查验。
三、下载需要的文件

去到这里下面地点下载文件到项目的utils文件夹下。https://github.com/tencentyun/cos-wx-sdk-v5

https://github.com/tencentyun/cos-wx-sdk-v5
四、实当代码

在需要实行上传操作的js文件复制如下代码：

1. const COS = require('./cos-wx-sdk-v5.js')
3. // 初始化腾讯云存储
4. const commonCos = new COS({
5.     // ForcePathStyle: true,
6.     // 如果使用了很多存储桶，可以通过打开后缀式，减少配置白名单域名数量，请求时会用地域域名
7.     FileParallelLimit: 40, //同一个实例下上传的文件并发数，默认值3
8.     ChunkParallelLimit: 40, //同一个上传文件的分块并发数，默认值3
9.     //获取签名的回调方法
10.     getAuthorization: (options, callback) => {
11.         // 异步获取临时密钥
12.         http.getRequest('/small/small/getTempScert', {
13.             bucket: options.Bucket,
14.             region: options.Region,
15.         }, res => {
16.             let credentials = res.data.credentials
17.             if (!credentials) return console.error('credentials invalid')
18.             callback({
19.                 TmpSecretId: credentials.tmpSecretId,
20.                 TmpSecretKey: credentials.tmpSecretKey,
21.                 XCosSecurityToken: credentials.sessionToken,
22.                 // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
23.                 StartTime: res.data.startTime, // 时间戳，单位秒，如：1580000000
24.                 ExpiredTime: res.data.expiredTime, // 时间戳，单位秒，如：1580000900
25.             })
26.         })
27.     }
28. })
31. // 上传图片 flag:1 需要校验是否需要水印 -1 不校验、不使用水印
32. const commonUploadImg = async (name, flag = -1, classId = null) => {
33.   return new Promise((resolve) => {
34.     wx.chooseImage({
35.       count: 9,
36.       sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
37.       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
38.       success: async (res) => {
39.         wx.showLoading({
40.           title: '上传中...',
41.           icon: 'loading',
42.         })
43.         let filenameList = []
44.         let filePathList = []
45.         if (res.tempFiles.length) {
46.           let tempFile = res.tempFiles
47.           let countNum = 0
48.           let waterResult = null
49.           if (flag == 1) {
50.             /**获取水印信息*/
51.             waterResult = await getClassInfoIfWaterMark({
52.               classId: classId,
53.               homeWorkId: name
54.             })
55.           }
56.           for (let temp of tempFile) {
57.             // 这里对图片校验-传入压缩后的图片
58.             const result = true
59.             if (result) {
60.               if (temp.size > 10485760) {
61.                 wx.hideLoading()
62.                 wx.showToast({
63.                   title: `图片最大可以上传${10485760/1024/1024}M`,
64.                   icon: 'none',
65.                   duration: 1500
66.                 })
67.               } else {
68.                 const filePath = temp.path
69.                 const tempDate = new Date()
70.                 const createPath = tempDate.getFullYear() + "" + utils.formatNumber((tempDate.getMonth() + 1)) + "" + utils.formatNumber(tempDate.getDate()) + "/"
71.                 const filename = createPath + name + '/' + filePath.substr(filePath.lastIndexOf('/') + 1)
72.                 let fileId = filePath.substr(filePath.lastIndexOf('/') + 1)
73.                 const wxfs = wx.getFileSystemManager()
74.                 let ruleValue = `imageMogr2/format/jpg/interlace/1/rquality/60`
75.                 let rule = {
76.                   "is_pic_info": 0,
77.                   "rules": [{
78.                     "fileid": `${fileId}`,
79.                     "rule": ruleValue
80.                   }]
81.                 }
82.                 if (flag == 1) {
83.                   if (waterResult && waterResult.ifWaterMark) {
84.                     let info = `${waterResult.waterFormat}`
85.                     let waterInfo = utils.Base64.encode(info)
86.                     let fontColor = utils.Base64.encode(waterResult.waterColor || '#09ff00')
87.                     let waterPosition = waterResult.waterPosition || 'center'
88.                     let waterRangle = waterResult.waterRangle || 0
89.                     let water = `watermark/2/text/${waterInfo}/font/c2ltaGVp6buR5L2TLnR0Zg/fill/${fontColor}/fontsize/50/gravity/${waterPosition}/degree/${waterRangle}/dissolve/100`
90.                     rule.rules[0].rule = `${ruleValue}|${water}`
91.                   }
92.                 }
93.                 wxfs.readFile({
94.                   filePath: filePath,
95.                   success(res) {
96.                     commonCos.putObject({
97.                       Bucket: 'img-work-1304215329',
98.                       Region: 'ap-beijing',
99.                       Key: filename,
100.                       Body: res.data,
101.                       Headers: {
102.                         // 通过 数据万象的压缩自定义规则 style/uploadStyle
103.                         // 'Pic-Operations': `{"is_pic_info": 0, "rules": [{"fileid": "${fileId}","rule": "style/uploadStyle"}]}`,
104.                         'Pic-Operations': `${JSON.stringify(rule)}`
105.                       },
106.                     }, function (err, data) {
107.                       if (data && data.statusCode == 200) {
108.                         countNum++
109.                         filenameList.push(filename)
110.                         filePathList.push(filePath)
111.                         if (countNum == tempFile.length) {
112.                           wx.hideLoading()
113.                           let obj = {
114.                             filenameList,
115.                             filePathList
116.                           }
117.                           resolve(obj)
118.                         }
119.                       }
120.                     })
121.                   }
122.                 })
123.               }
124.             }
125.           }
126.         }
127.       },
128.       fail() {
129.         wx.hideLoading()
130.       }
131.     })
132.   })
133. }

复制代码

长期化处置惩罚图片的规则可参考如下：
数据万象 图片长期化处置惩罚-API 文档-文档中心-腾讯云

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。