记录微信小程序上传图片到阿里OSS;
一. 数据准备:
1. 阿里OSS提供的bucket、key以及accessKeyId、accessKeySecret、expiration、securityToken;
2. 图片地址:可以通过wx.chooseMedia方法获取;
二、上传:
通过wx.uploadFile API进行上传操作,
wx.uploadFile({
url: host, // 填写存储空间的访问域名，例如https://test.oss-cn-hangzhou.aliyuncs.com,
filePath: tempFiles ,//待上传的本地资源路径（wx.chooseMedia获取到的临时路径）
name: 'file', // 必须填file。
formData: {
key,//存放图片命名格式 ,自定义不重复就行,在上面的准备数据
policy,//包含失效时间和文件上传大小限制等信息
OSSAccessKeyId: accessKeyId, //AccessKey ID用于标识用户（后台接口提供）
signature,//accessKeySecret加密秘钥(后台接口提供)
'x-oss-security-token': securityToken // 使用STS签名时必传(后台接口提供)
},
success: (res) => {
console.log(res);
if (res.statusCode === 204) {
success(key);
}else {
fail()
}
},
fail: err => {
console.log(err);
}
});
注意上面的formData中的参数key要通过 key获取, 如下, 为图片上传后要存储在oss的位置,别重复, 我这边操作是
var timestamp = Date.parse(new Date()) / 1000;
key = key +'/'+timestamp+".png";
最终的key作为参数放在formData中;
注意上面的formData中的参数policy要通过 expiration获取, 如下:
const policyBase64 = function(expiration) {
let date = new Date(expiration);
date.setHours(date.getHours() + 24);// 过期时间为获取的时间+24小时
const policyText = {
"expiration": date.toISOString(), //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
"conditions": [
["content-length-range", 0,1* 1024 * 1024 * 1024] // 设置上传文件的大小限制1G
]
};
const jsonText = JSON.stringify(policyText);
const base64 = CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(jsonText));
return base64;
}
这里面主要用到了crypto-js中的CryptoJS.enc.Base64和CryptoJS.enc.Utf8, 其他的参数比如,过期时间, 和限制上传大小可以根据自己的需求设置.
注意上面的formData中的参数signature要通过 后台提供的accessKeySecret和上面的policy获取, 如下:
const getSignature = function(accessKeySecret, policyBase64) {
const bytes = CryptoJS.HmacSHA1(policyBase64, accessKeySecret);
return CryptoJS.enc.Base64.stringify(bytes);
}
这里面主要用到了crypto-js中的CryptoJS.HmacSHA1和 CryptoJS.enc.Base64方法.
通过以上步骤, 就可以在微信小程序中上传图片(不限于图片,我这边只操作了上传图片), 当接口返回204时即上传成功;