前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >uniapp对接oss视频上传+压缩

uniapp对接oss视频上传+压缩

作者头像
阿超
发布2022-08-21 11:09:15
8.3K0
发布2022-08-21 11:09:15
举报
文章被收录于专栏:快乐阿超快乐阿超

首先是文件上传的代码:

代码语言:javascript
复制
module.exports = {
	getUUID() { //生成UUID
		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
			return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
		})
	},
	beforeUpload({
		file,
		module
	}) {
		let _self = this;
		return new Promise((resolve, reject) => {
			this.policy(module)
				.then(response => {
					resolve({
						policy: response.data.policy,
						signature: response.data.signature,
						ossaccessKeyId: response.data.accessid,
						key: response.data.dir + this.getUUID() + "${filename}",
						dir: response.data.dir,
						host: response.data.host
					});
				})
				.catch(err => {
					reject(err);
				});
		});
	},
	policy(module) {
		return new Promise((resolve, reject) => {
			uni.request({
                // 在这改获取oss签证的接口
				url: 'http://获取签证的接口/' + 'oss',
				data: {
					module
				},
				success: (res) => {
					if (res.data.success) {
						resolve(res.data)
					} else {
						reject(res)
					}
				},
				fail: (err) => {
					reject(err)
				}
			});
		})
	},
	uploadFile({
		file,
		module,
		response,
		limit = 5242880
	}) {
		console.log("uploadFile: ", {
			file,
			module,
			response
		})
		// 限制5M,单位B
		if (!file) {
			uni.showToast({
				title: "读取文件失败",
				icon: 'none'
			});
			return false;
		}
		if (file.size > limit) {
			uni.showToast({
				title: "超过限制大小",
				icon: 'none'
			});
			return false;
		}
		let filename = file.path.substr(file.path.lastIndexOf("/") + 1)
		this.beforeUpload({
			file,
			module
		}).then(res => {
			let options = {
				url: res.host,
				name: 'file',
				filePath: file.path,
				formData: res,
				success: ossCallBack => {
					console.log({
						ossCallBack,
						filename
					})
					response(res.host + "/" + res.key.replace("${filename}", filename))
				},
				fail: console.error
			}
			console.log(options)
			uni.uploadFile(options)
		}).catch(console.error)
	}
}

然后是视频上传+压缩

代码语言:javascript
复制
<script>
const oss = require('@/utils/oss.js');
export default {
    methods: {
		upload(file, { contentType }) {
			console.log({ file });
			console.log({ contentType });
			let messageType = '';
			let content = file.path;
			let limit;
			switch (contentType) {
				case 1:
					messageType = 'IMAGE';
					limit = 2097152;
					break;
				case 4:
					messageType = 'VIDEO';
					limit = 10485760;
					break;
			}
			oss.uploadFile({
				file,
				module: 'chat',
				limit,
				response: filePath => {
					console.log('File upload success!');
					console.log({ filePath });
                    // 上传完成结束回调
				}
			});
		},

		onImage() {
			uni.chooseImage({
				sourceType: ['album'],
				success: res => {
					res.tempFiles.forEach(file => {
						this.upload(file, {
							contentType: 1
						});
					});
				}
			});
		},

		onVideo() {
			uni.chooseVideo({
				count: 1,
				compressed: true,
				sourceType: ['album', 'camera'],
				success: res => {
					console.log({ res });
                    // 这块是自定义压缩,需要在上方compressed设置为false关闭默认上传压缩
					// console.log('压缩前大小:: ', res.size / (1024 * 1024) + 'KB');
					// uni.getVideoInfo({
					// 	src: res.tempFilePath,
					// 	success: ({ fps, bitrate }) => {
					// 		console.log({ fps, bitrate });
					// 		uni.compressVideo({
					// 			src: res.tempFilePath,
					// 			quality: 'high',
					// 			bitrate,
					// 			fps,
					// 			resolution: 1,
					// 			success: res => {
					// 				console.log({ res });
					// 				console.log('压缩后大小:: ', res.size / (1024 * 1024) + 'KB');
					// 				this.upload({ path: res.tempFilePath, size: res.size }, { contentType: 4 });
					// 			}
					// 		});
					// 	}
					// });
					console.log('视频大小:: ', res.size / (1024 * 1024) + 'KB');
					this.upload({ path: res.tempFilePath, size: res.size }, { contentType: 4 });
				}
			});
		},

		onShoot() {
			uni.chooseImage({
				sourceType: ['camera'],
				success: res => {
					this.upload(res.tempFiles[0], {
						contentType: 1
					});
				}
			});
		}
	}
};
</script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-01-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档