微信小程序上传图片到阿里云oss（纯前端）

之前一篇主要写关于vue上传到阿里云服务oss上面，文章地址：vue上传图片到阿里云oss
根据业务必要还必要做小程序端上传，故而也记载一下
  

---

  

---

1. 准备工作

1.2 小程序后台设置阿里云地址

1.2.1 添加正当域名

小程序后台地址：后台管理地址
步骤：登录小程序后台 → 开发 → 开发管理 → 开发设置 → 服务器域名 → 修改
提示：若使用过程中没有报域名问题第一步，大概调试阶段可忽略，只必要在开发者工具中→ 本地设置→ 勾选不校验正当域名即可

---

2. 主要方法

上传方法封装：主要也是使用这位大佬：wxapp-ali-oss-use 封装的方法，方法源码感兴趣可以研究下，我主要记载如何使用
官方方法地址：微信小程序上传
3. 使用步骤

3.1 文件改造

可以使用npm方式，由于项目不大，直接复制文件到本地目次来进行调取使用

对alioss.js文件进行个性化改造
代码示例：
   方法的重点主要是在于policy以及Signature值的获取，其他值都可以固定大概自己控制，只有这两个值是必要算法计算出来的

1. const Base64 = require('./alioss/base64.js');
2. const Crypto = require('./alioss/crypto.js');
4. const aliOSS = {
5.   accessKeyID: 'aaaaaaaaaaa',
6.   accessKeySecret: 'bbbbbbbbbbbb',
7.   host: 'https://ccccccccccc.oss-cn-hangzhou.aliyuncs.com',
8.   timeout: 87600,
9. };
11. export function uploadFile(filePath) {
12.   return new Promise(function (resolve, reject) {
14.     if (!filePath) {
15.       reject({
16.         status: false,
17.         err:'文件错误',
18.       });
19.       return;
20.     }
21.     const aliyunFileKey = 'cecbImages/' + Date.now() + '-' + Math.floor(Math.random() * 1000) + '.png';
22.     const policyBase64 = Base64.encode(JSON.stringify({
23.       "expiration": new Date(new Date().getTime() + aliOSS.timeout).toISOString(),
24.       "conditions": [
25.         ["content-length-range", 0, 1024 * 1024 * 10]//10m
26.       ]
27.     }));
28.     let bytes = Crypto.util.HMAC(Crypto.util.SHA1, policyBase64, aliOSS.accessKeySecret, { asBytes: true });
29.     const signature = Crypto.util.bytesToBase64(bytes);
30.     wx.uploadFile({
31.       url: aliOSS.host,
32.       filePath: filePath,
33.       name: 'file',
34.       formData: {
35.         'key': aliyunFileKey,
36.         'OSSAccessKeyId': aliOSS.accessKeyID,
37.         'policy': policyBase64,
38.         'Signature': signature,
39.         'success_action_status': '200',
40.       },
41.       success: function (res) {
42.         resolve({
43.           url:aliOSS.host+'/' + aliyunFileKey
44.         });
45.       },
46.       fail: function (err) {
47.         console.log(err);
48.       },
49.     })
50.   });
51. }

复制代码

• accessKeyID与accessKeySecret若纯前端实现的话 就是固定写死的，这个在申请阿里云的时间就会给
  
• host 是一个拼接路径 bucket名称+ region地区节点（比如 oss-cn-hangzhou）
  
• timeout 超时时间
  
• aliyunFileKey 这里是上传的key的参数值，也是存放在oss上面的路径+名称（这里使用了随机数，也可以使用时间戳，只要确保唯一性就可以）
  

【注意】 上传后的文件地址：aliOSS.host+‘/’ + aliyunFileKey，该地址也是图片的实际获取地址，必要传给后端保存，以便于后期回显使用
使用Promise将上传成功之后的地址进行返回
3.2 文件调用

项目必要，我使用的图片是通过canvas绘制的，但是调用上是一样的，只必要腾讯对图片的暂存路径传进去即可

1. import {uploadFile} from './alioss.js'
2. ...
3. uploadImage(){
4.         const that = this
5.     wx.canvasToTempFilePath({
6.       canvas: this.data.canvas, // canvas 实例
7.       success(res) {
8.         // canvas 生成图片成功
9.         uploadFile(res.tempFilePath).then(res=>{
10.           console.log(res.url)//图片路径
11.         })
12.       }
13.     })
14. }

复制代码

3.3 拓展–canvas署名实现

.wxml文件：

1.     <!-- 签字部分 -->
2.     <view class="signature-canvas">
3.       <canvas class="canvas"
4.         disable-scroll="{{true}}"
5.         id="myCanvas"
6.         bindtouchstart="scaleStart"
7.         bindtouchmove="scaleMove"
8.         bindtouchend="scaleEnd"
9.         bindtap="mouseDown"
10.         type="2d"
11.       >
12.       </canvas>
13.     </view>

复制代码

.scss文件

1.     // 签字部分
2.     .signature-canvas {
3.       .canvas{
4.         width: 670rpx;
5.         height: 260rpx;
6.         background-color: #33374A;
7.       }
8.     }

复制代码

.js文件

1.   data: {
2.     canvas: {},
3.   },
4.     onShow() {
5.     const query = wx.createSelectorQuery()
6.     query.select('#myCanvas')
7.       .fields({
8.         node: true,
9.         size: true
10.       })
11.       .exec((res) => {
12.         const canvas = res[0].node
13.         const ctx = canvas.getContext('2d')
14.         const dpr = wx.getSystemInfoSync().pixelRatio
15.         canvas.width = res[0].width * dpr
16.         canvas.height = res[0].height * dpr
17.         this.width = canvas.width;
18.         this.height = canvas.height;
19.         ctx.scale(dpr, dpr)
20.         this.ctx = ctx;
21.         this.setData({
22.           canvas: canvas
23.         })
24.       })
25.   },
26.   scaleStart(e) {
27.     let {
28.       x,
29.       y
30.     } = e.touches[0]
31.     this.ctx.beginPath()
32.     this.ctx.moveTo(x, y)
33.     this.ctx.strokeStyle = "#24A6A4";
34.     this.ctx.lineWidth = '5'
35.   },
36.   scaleMove(e) {
37.     let {
38.       x,
39.       y
40.     } = e.touches[0]
41.     this.ctx.lineTo(x, y)
42.     this.ctx.stroke();
43.     this.ctx.lineCap = "round";
44.     this.ctx.moveTo(x, y)
45.   },
46.   scaleEnd(e) {
47.     this.ctx.lineCap = "round";
48.   },
49.   clearCanvas() {
50.     this.ctx.clearRect(0, 0, this.width, this.height)
51.     this.setData({
52.       scoreList:[
53.         {
54.           index:0,
55.           title:'专业水平：',
56.           value:1
57.         },
58.         {
59.           index:1,
60.           title:'服务态度：',
61.           value:1
62.         },
63.         {
64.           index:2,
65.           title:'解决速度：',
66.           value:1
67.         },
68.       ]
69.     });
70.   },

复制代码

修改线色通过：this.ctx.strokeStyle = “#24A6A4”;
修改背景致直接在scss里面修改 .canvas{ background-color: #33374A;}

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