uniapp小程序上传文件到阿里云oss

wx_lidysun

已于 2022-03-04 18:56:22 修改

阅读量931

点赞数

分类专栏： Javascript 文章标签： ali-oss uniapp 阿里云OSS

于 2022-03-04 18:54:42 首次发布

本文链接：https://blog.csdn.net/lidysun/article/details/123283046

版权

Javascript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了阿里云OSS对象存储服务的文件上传过程，包括签名函数、获取上传凭证、设置上传策略等关键步骤。通过调用API获取OSS Token，并使用HMAC-SHA1算法进行签名，确保上传安全性。最后展示了如何使用uni-app进行图片上传，成功后显示上传成功的提示。

摘要由CSDN通过智能技术生成

// 签名函数库
const crypto = require('crypto-js')

// 签名函数
getsignature(policy, accessKeySecret) {
	return crypto.enc.Base64.stringify(crypto.HmacSHA1(policy, accessKeySecret))
},
getPolicyBase64() {
   let date = new Date()
   date.setHours(date.getHours() + 1)
   let srcT = date.toISOString()
   const policyText = {
    expiration: srcT,
    conditions: [['content-length-range', 0, 100 * 1024 * 1024]]
   }
   const buffer = new Buffer(JSON.stringify(policyText))
   return buffer.toString('base64')
},

// 获取上传tocken
apiGetOssfsToken(vm, {
	param1:'某参数1',
	param2:'某参数2',
	name:'lidysun',
}).then(res => {
	if(res.code==200){
		vm.uplpadEntity = res.datas;
		console.log(vm.uplpadEntity);
		// uplpadEntity打印如下：xxx为模拟
		/*{
			accessKeyId: "xxxSTS.NUjgNfgQLTdeMvNsi84wxjs1C"
			accessKeySecret: "xxxFXTaUG9NMLcKHVAtHU9Esdq3sBvCEeUUamtsnFPZPfM9"
			bucketName: "xxxproject"
			endpoint: "img.lidysun.xxx.com"
			expiration: "2022-03-04T11:33:48Z"
			requestId: "xxx678B0CBF-5D31-5097-8B0A-D7642AD0D9BB"
			securityToken: "xxx/xxx1499695025521365060.png"
		}*/
	}
})

// 上传操作
chooseHeadImg() {
    uni.chooseImage({
        count: 9, 
        sizeType: ['original', 'compressed'], 
        sourceType: ['album', 'camera'], //从相册选择
        success: res => {
			const url = `https://${endpoint}`
			const policy = this.getPolicyBase64()
			const key = `${uploadPath}${new Date().getTime()}${this.suffix}`
			const { 
				accessKeyId,
				accessKeySecret,
				securityToken:stsToken,
				bucketName:bucket,
				uploadPath,
				endpoint 
			} = this.uplpadEntity
			const imageSrc = res.tempFilePaths[0]
			const signature = this.getsignature(policy, accessKeySecret)
			const params = {
				'key':uploadPath,
				'policy':policy,
				'OSSAccessKeyId':accessKeyId,
				'success_action_status':200,
				'signature':signature,
				'x-oss-security-token':stsToken
			}
			uni.uploadFile({
				url:`https://${endpoint}`,
				filePath: imageSrc,
				fileType: 'image',
				name: 'file',
				formData:params,
				success: (res) => {
					console.log('uploadImage success:', res)
					uni.showToast({
						title: '上传成功',
						icon: 'success',
						duration: 1000
					})
				},
				fail: (err) => {
					console.log('uploadImage fail:', err);
					uni.showModal({
						content: err.errMsg,
						showCancel: false
					});
				}
			});
        }
    });
},