H5 上传视频对接oss

1、utils 创建upload.js
npm install ali-oss --save 安装插件

// const OSS = require("ali-oss"); //引入安装包;
import OSS from 'ali-oss'
//配置 阿里 oss 存储对应的 bucket 桶
var client = new OSS({
	region: "xxx", //指申请OSS服务时的地域
	endpoint: "xxx", //指定为HTTPS,也可以是IP的形式 region将会被忽略
	accessKeyId: "xxx", //  填写你的accessKeyId
	accessKeySecret: "xxx", // 填写你的accessKeySecret
	bucket: "xxx", // 桶的名称
	secure: true // 配合region使用。如果指定secure为true,则使用HTTPS访问。
});

// e : 文件对象,filename:存储文件名
export function uploadVid(e, filename) {
	console.log(e, e.tempFile.length, filename)
	return new Promise((resolve, reject) => {
		uni.showLoading({
			title: '正在上传...'
		});
		if (e.tempFile.length == 0) {
			uni.hideLoading();
			uni.showToast({
				title: '未找到视频',
				icon: 'none'
			})
			return false;
		};
		let file = e.tempFile;
		let time = new Date(),
			y,
			m,
			d;
		y = time.getFullYear();
		m = String(time.getMonth() + 1).length === 2 ?
			time.getMonth() + 1 :
			"0" + (time.getMonth() + 1);
		d = String(time.getDate()).length === 2 ?
			time.getDate() :
			"0" + time.getDate();
		let dfilefold = y + m + d;
		let r = Math.random().toString(16).substr(2);
		let name = filename + dfilefold + "/" + r + ".mp4";
		client.multipartUpload(name, file).then(function(result) {
				uni.hideLoading();
				uni.showToast({
					title: "上传成功",
					icon: "none"
				})
				let url = result.res.requestUrls[0];
				var index = url.indexOf("?");
				url = url.substring(0, index);
				resolve(url);
			})
			.catch((err) => {
				uni.hideLoading();
				uni.showToast({
					title: "上传失败",
					icon: "none"
				})
				reject(err)
			});
	})
}
//上传
const afterReadVideo = async event => {
			let lists = [].concat(event.file);
			let fileListLen = fileListVideo.value.length;
			lists.map(item => {
				fileListVideo.value.push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await uploadFilePromise(lists[i]);
				let item = fileListVideo.value[fileListLen];
				fileListVideo.value.splice(fileListLen, 1, {
					...item,
					status: 'success',
					message: '',
					url: result
				});
				fileListLen++;
			}
		};
		const deletePicVideo = event => {
			fileListVideo.value.splice(event.index, 1);
		};
		const uploadFilePromise = url => {
			console.log(url)
			return uploadVid(url, '名字xx')
		};
### 实现 UniApp H5 与微信对接 #### 支付功能集成 对于非微信浏览器环境下的H5支付,可以通过`document.location.href`来触发支付流程。当用户不在微信内置浏览器中访问应用时,服务器会返回一个用于发起支付的URL (`mweb_url`),前端通过改变当前窗口的位置至该URL从而启动支付过程[^1]。 ```javascript // 假设已从服务端接收到响应数据res if (typeof WeixinJSBridge === 'undefined') { // 非微信浏览器处理逻辑 document.location.href = res.data.mweb_url; } ``` #### 图片上传至阿里云OSS 针对图片上传遇到的问题,如果在引入特定JavaScript库的过程中遇到了关于`hmac.js`文件内的错误提示,则很可能是由于传递给函数的`accessKey`参数为空或未定义所引起的。因此,在调用任何依赖于这些密钥的方法之前,请务必确认它们已经被正确设置并有效传递给了相应的API接口[^2]。 ```javascript function generateSignature(policyBase64, accessKeyId, accessKeySecret) { const encodedAccessKeySecret = encodeURIComponent(accessKeySecret); if (!encodedAccessKeySecret || !policyBase64) { console.error('Invalid Access Key or Policy'); return ''; } try { var hmac = new HMAC(encodedAccessKeySecret); // 使用正确的加密算法初始化对象 var signature = CryptoJS.enc.Base64.stringify(hmac.update(policyBase64).finalize()); return signature; } catch (e) { console.log(e.message); throw e; } } ``` #### 页面导航管理 为了优化用户体验以及遵循最佳实践原则,在某些情况下可能希望清除历史页面栈再打开新页面。这通常发生在登录成功后重定向到首页或其他重要操作之后。可以利用uni-app框架提供的API轻松达成此目的[^3]: ```javascript uni.reLaunch({ url: '/pages/index/index' }); ``` 以上就是有关如何在UniApp项目里实现H5平台下与微信交互的一些基本指导和技术要点介绍。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值