第一步 配置Bucket跨域访问
第二步 微信小程序配置域名白名单
以上两步,请参考阿里云官网,如何在微信小程序环境下将文件上传到OSS_对象存储 OSS-阿里云https://help.aliyun.com/document_detail/92883.html
然后创建uploadOssHelper.js, 复制官网js内容,注意引入的crypto-js,自行安装
const crypto = require("crypto-js");
class MpUploadOssHelper {
constructor(options) {
this.accessKeyId = options.accessKeyId;
this.accessKeySecret = options.accessKeySecret;
// 限制参数的生效时间,单位为小时,默认值为1。
this.timeout = options.timeout || 1;
// 限制上传文件的大小,单位为MB,默认值为10。
this.maxSize = options.maxSize || 10;
}
createUploadParams() {
const policy = this.getPolicyBase64();
const signature = this.signature(policy);
return {
OSSAccessKeyId: this.accessKeyId,
policy: policy,
signature: signature,
};
}
getPolicyBase64() {
let date = new Date();
// 设置policy过期时间。
date.setHours(date.getHours() + this.timeout);
let srcT = date.toISOString();
const policyText = {
expiration: srcT,
conditions: [
// 限制上传文件大小。
["content-length-range", 0, this.maxSize * 1024 * 1024],
],
};
const buffer = Buffer.from(JSON.stringify(policyText));
return buffer.toString("base64");
}
signature(policy) {
return crypto.enc.Base64.stringify(
crypto.HmacSHA1(policy, this.accessKeySecret)
);
}
}
module.exports = MpUploadOssHelper;
然后创建自己的上传index.js文件,引入uploadOssHelper.js
const MpUploadOssHelper = require("./uploadOssHelper.js");
class WxUpload {
/**
* @description 参数以对象形式传入
* @param {String} accessKeyId
* @param {String} accessKeySecret
* @param {Number} timeout
* @param {Number} maxSize
* @param {String} expirationTime
*/
constructor(ops) {
this.accessKeyId = ops.accessKeyId;
this.accessKeySecret = ops.accessKeySecret;
// 限制参数的生效时间,单位为小时,默认值为1。
this.timeout = ops.timeout || 1;
// 限制上传文件的大小,单位为MB,默认值为10。
this.maxSize = ops.maxSize || 10;
this.expirationTime = expirationTime
}
uploadParams = {} // 上传所需参数
expirationTime = null; //过期时间
getUploadHeper() {
return new Promise((resolve, reject) => {
if (!this.expirationTime || Date.now() > new Date(this.expirationTime).getTime()) {
const mpHelper = new MpUploadOssHelper({
accessKeyId: this.accessKeyId,
accessKeySecret: this.accessKeySecret,
timeout: this.timeout, // 限制参数的生效时间,单位为小时,默认值为1。
maxSize: this.maxSize, // 限制上传文件大小,单位为MB,默认值为10。
})
const params = mpHelper.createUploadParams();
this.uploadParams = params;
resolve({
params: params
})
} else {
resolve({
params: uploadParams
})
}
})
}
/**
* @description 参数以对象形式传入
* @param {String} host 存储空间访问域名
* @param {String} folder 文件存放位置路径,例如 /xx/xx/
* @param {String} filePath 本地上传文件路径
* @param {String} fileName 本地上传文件名称
* @param {String} securityToken STS签名Token。
*/
async uploadFile(ops) {
await this.getUploadHeper()
return new Promise((resolve, reject) => {
let tmp = ops.filePath.split('/')
let fileName = tmp[tmp.length - 1]
let ossUrl = ops.folder + fileName
wx.uploadFile({
url: ops.host, // 开发者服务器的URL。
filePath: ops.filePath, // 必须填file。
name: ops.fileName || 'file',
formData: {
key: ossUrl,
policy: this.uploadParams.policy,
OSSAccessKeyId: this.uploadParams.OSSAccessKeyId,
signature: this.uploadParams.signature,
'x-oss-security-token': ops.securityToken // 使用STS签名时必传。
},
success(res) {
if (res.statusCode === 204) {
resolve({
url: ops.host + ossUrl
})
} else {
reject(res)
}
},
fail(err) {
reject(err)
}
});
})
}
}
module.exports = WxUpload;
之后在调用的地方引入index.js,初始化 Wxupload Class
传入从后端返回的keyId和secret,如果需要签名认证,请保存token到调用uploadFile时传入,
代码只是随便写写,仅提供方法逻辑
|