微信小程序上传图片到阿里云oss（纯前端）
之前一篇主要写关于vue上传到阿里云服务oss上面，文章地址：vue上传图片到阿里云oss根据业务必要还必要做小程序端上传，故而也记载一下
1. 准备工作
1.2 小程序后台设置阿里云地址
1.2.1 添加正当域名
小程序后台地址：后台管理地址
步骤：登录小程序后台 → 开发 → 开发管理 → 开发设置 → 服务器域名 → 修改
提示：若使用过程中没有报域名问题第一步，大概调试阶段可忽略，只必要在开发者工具中→ 本地设置→ 勾选不校验正当域名即可
2. 主要方法
上传方法封装：主要也是使用这位大佬：wxapp-ali-oss-use 封装的方法，方法源码感兴趣可以研究下，我主要记载如何使用
官方方法地址：微信小程序上传
3. 使用步骤
3.1 文件改造
可以使用npm方式，由于项目不大，直接复制文件到本地目次来进行调取使用
https://img-blog.csdnimg.cn/direct/aad5c84d08f14619bc1b9d1b05fc39e1.png
对alioss.js文件进行个性化改造
代码示例：
方法的重点主要是在于policy以及Signature值的获取，其他值都可以固定大概自己控制，只有这两个值是必要算法计算出来的
const Base64 = require('./alioss/base64.js');
const Crypto = require('./alioss/crypto.js');
const aliOSS = {
accessKeyID: 'aaaaaaaaaaa',
accessKeySecret: 'bbbbbbbbbbbb',
host: 'https://ccccccccccc.oss-cn-hangzhou.aliyuncs.com',
timeout: 87600,
};
export function uploadFile(filePath) {
return new Promise(function (resolve, reject) {
if (!filePath) {
reject({
status: false,
err:'文件错误',
});
return;
}
const aliyunFileKey = 'cecbImages/' + Date.now() + '-' + Math.floor(Math.random() * 1000) + '.png';
const policyBase64 = Base64.encode(JSON.stringify({
"expiration": new Date(new Date().getTime() + aliOSS.timeout).toISOString(),
"conditions": [
["content-length-range", 0, 1024 * 1024 * 10]//10m
]
}));
let bytes = Crypto.util.HMAC(Crypto.util.SHA1, policyBase64, aliOSS.accessKeySecret, { asBytes: true });
const signature = Crypto.util.bytesToBase64(bytes);
wx.uploadFile({
url: aliOSS.host,
filePath: filePath,
name: 'file',
formData: {
'key': aliyunFileKey,
'OSSAccessKeyId': aliOSS.accessKeyID,
'policy': policyBase64,
'Signature': signature,
'success_action_status': '200',
},
success: function (res) {
resolve({
url:aliOSS.host+'/' + aliyunFileKey
});
},
fail: function (err) {
console.log(err);
},
})
});
}
[*]accessKeyID与accessKeySecret若纯前端实现的话 就是固定写死的，这个在申请阿里云的时间就会给
[*]host 是一个拼接路径 bucket名称+ region地区节点（比如 oss-cn-hangzhou）
[*]timeout 超时时间
[*]aliyunFileKey 这里是上传的key的参数值，也是存放在oss上面的路径+名称（这里使用了随机数，也可以使用时间戳，只要确保唯一性就可以）
【注意】 上传后的文件地址：aliOSS.host+‘/’ + aliyunFileKey，该地址也是图片的实际获取地址，必要传给后端保存，以便于后期回显使用
使用Promise将上传成功之后的地址进行返回
3.2 文件调用
项目必要，我使用的图片是通过canvas绘制的，但是调用上是一样的，只必要腾讯对图片的暂存路径传进去即可
import {uploadFile} from './alioss.js'
...
uploadImage(){
const that = this
wx.canvasToTempFilePath({
canvas: this.data.canvas, // canvas 实例
success(res) {
// canvas 生成图片成功
uploadFile(res.tempFilePath).then(res=>{
console.log(res.url)//图片路径
})
}
})
}
3.3 拓展–canvas署名实现
.wxml文件：
<!-- 签字部分 -->
<view class="signature-canvas">
<canvas class="canvas"
disable-scroll="{{true}}"
id="myCanvas"
bindtouchstart="scaleStart"
bindtouchmove="scaleMove"
bindtouchend="scaleEnd"
bindtap="mouseDown"
type="2d"
>
</canvas>
</view>
.scss文件
// 签字部分
.signature-canvas {
.canvas{
width: 670rpx;
height: 260rpx;
background-color: #33374A;
}
}
.js文件
data: {
canvas: {},
},
onShow() {
const query = wx.createSelectorQuery()
query.select('#myCanvas')
.fields({
node: true,
size: true
})
.exec((res) => {
const canvas = res.node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res.width * dpr
canvas.height = res.height * dpr
this.width = canvas.width;
this.height = canvas.height;
ctx.scale(dpr, dpr)
this.ctx = ctx;
this.setData({
canvas: canvas
})
})
},
scaleStart(e) {
let {
x,
y
} = e.touches
this.ctx.beginPath()
this.ctx.moveTo(x, y)
this.ctx.strokeStyle = "#24A6A4";
this.ctx.lineWidth = '5'
},
scaleMove(e) {
let {
x,
y
} = e.touches
this.ctx.lineTo(x, y)
this.ctx.stroke();
this.ctx.lineCap = "round";
this.ctx.moveTo(x, y)
},
scaleEnd(e) {
this.ctx.lineCap = "round";
},
clearCanvas() {
this.ctx.clearRect(0, 0, this.width, this.height)
this.setData({
scoreList:[
{
index:0,
title:'专业水平：',
value:1
},
{
index:1,
title:'服务态度：',
value:1
},
{
index:2,
title:'解决速度：',
value:1
},
]
});
},
修改线色通过：this.ctx.strokeStyle = “#24A6A4”;
修改背景致直接在scss里面修改 .canvas{ background-color: #33374A;}
https://img-blog.csdnimg.cn/direct/915631941c8c4327bee384843824c03e.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]