延安市网站建设_网站建设公司_无障碍设计_seo优化
2025/12/19 22:08:53 网站建设 项目流程

 最近在弄小程序/uniapp使用阿里云serverless进行oss客户端签名直传,因为官方文档的示例代码瞎几把写看不明白浪费了很多时间摸索,这里记录下:

其实大概半年前用php对接过,也是很顺利。。。

 node后端代码:

const config = require('../../config');
const OSS = require('ali-oss');module.exports = class AliOSS {static Bucket = 'hejiu-tools';static UrlTimeout = 600;static getClient() {return new OSS({accessKeyId: config.oss.RamAK,accessKeySecret: config.oss.RamSK,region: config.oss.RegionId,bucket: AliOSS.Bucket,secure: true, // https});}// 小程序端fileUpload只支持post,这个玩意强制put,弃了。static async getSignature(fileName) {const client = AliOSS.getClient();const response = await client.signatureUrlV4('PUT', 60*1000,{headers: {'content-type': 'xxx', // 默认是application/octet-stream,需要换成文件的content-type},}, fileName);return response;}// 表单上传签名,小程序端fileUpload只支持post上传static async getPostPolicy() {const client = AliOSS.getClient();const policy = {expiration: new Date(Date.now() + 10*60000).toISOString(), // 10分钟后过期conditions: [["content-length-range", 0, 104857600] // 文件大小限制100MB]};const formData = client.calculatePostSignature(policy);return {host: `https://${AliOSS.Bucket}.${config.oss.RegionId}.aliyuncs.com`,policy: formData.policy,signature: formData.Signature,OSSAccessKeyId: formData.OSSAccessKeyId,expire: Date.now() + 600000};}}

 小程序前端代码:

获取签名:

// 后端使用了serverless
import MPServerless from '@alicloud/mpserverless-sdk'
import config from '../../../config/config';export default class Serverless {static instance;isAuthorized = false;constructor(){if (!Serverless.instance) {this.mpsl = new MPServerless({uploadFile: uni.uploadFile,request: uni.request,getAuthCode: this._getAuthCode,}, config.sl); // config.sl: serverless配置Serverless.instance = this;this._authorize();}return Serverless.instance;}_authorize() {if (!this.isAuthorized) {// 进行匿名授权this.mpsl.init({authorType: 'anonymous'});this.isAuthorized = true;}}_getAuthCode(){return new Promise(async (resolve, reject) => {uni.login({provider: 'weixin',success: async (res) => {console.log('login success:', res);const authCode = res.code;if(authCode) resolve(authCode);else reject('获取授权码失败');},fail: (err) => {console.log('login fail:', err);}})})}request(url='', params={}, loading=false){return new Promise(async (resolve, reject) => {console.log('SL request:', url, params);const [ n, mod, method ]  = url.split('/');if(!mod || !method) return reject('Invalid url');loading && uni.showLoading({ title: '加载中...' });this.mpsl.function.invoke('slapi', { module: mod, method, ...params}).then(res => {if(res.success) resolve(res.result);reject(res.result);}).finally(() => uni.hideLoading());});}
}// 这里才是开始获取签名
(new Serverless()).request('/aliCloud/getPostPolicy', {}).then(res => {uni.hideLoading();console.log(res);if(res.code) return uni.showToast({ title: 'OSS服务异常,请稍重试!' });this.uploadFile(res.data);});

上传文件:

		uploadFile(ossData={}) {const { tempFile } = this;const fileName = generateUUID()+`.${tempFile.extname}`;const filePath = 'dir/'+fileName; // this.$g.tempFile.namereturn uni.uploadFile({url: config.oss.host,name: 'file',filePath: tempFile.path,formData: Object.assign({key: filePath}, ossData),success: (res) => {console.log(res);if(res?.statusCode >= 300) return this.$g.info('上传失败');this.$g.info('上传成功');this.path = config.oss.host+`/${filePath}`;this.fileName = fileName;// this.encodeData(fileName);},fail: (err) => {// console.warn(err);this.$g.info('上传失败');}});},

 

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询