uniapp chooseVideo和uploadFile 选择视频或照片上传抖快平台踩坑

先贴代码

复制代码
uni.chooseVideo({
	sourceType: ['album'],
	fail:(err)=>{
		console.log(TAG, "==chooseVideo-fail==err:", err)
		page.resetUploadFileField()
		if (err.errNo == 10200 || 'chooseVideo:fail take video fail' == err.errMsg || 'chooseVideo:fail auth deny' == err.errMsg) {
			ToastUtil.showTipToast(`前往手机设置-应用打开${getHostName_()}相册权限`)
		} else if (err.errNo != 10502 && 'chooseVideo:fail cancel' != err.errMsg) {
			ToastUtil.showTipToast("获取上传文件异常:" + JSON.stringify(err))
		} 
	},
	success:(res)=>{
		console.log(TAG, "==chooseVideo-success==res:", res)
		if (res && res.tempFilePath && res.duration >= 3 && res.size <= 500*1024*1024) {
			page.uploadFile = res.tempFilePath
			page.uploadFileDuration = res.duration
			page.uploadFileSize = res.size
			page.chooseVideoSucc = true
			page.uploadMedia()
		},				
	})

			//上传视频
			async uploadMedia() {
				let page = this
				//原生上传方法
				if (this.chooseVideoSucc) {
					this.isUploading = true
					let header = {
					}
					console.log(TAG,"==uploadMedia chooseVideoSucc 开始上传==")
					this.uploadTask = uni.uploadFile({
						url: res.data.host, //上传地址
						filePath: page.uploadFile,
						fileType: 'video',
						name: 'file',//重要标识
						header: header,
						formData:{
							//阿里云os端相关配置参数由后台下发
							"key":res.data.dir,
							"OSSAccessKeyId":res.data.access_id,
							"policy":res.data.policy,
							"signature":res.data.signature,
							"callback":res.data.callback,
						},
						success(res) {
							console.log(TAG, "==上传成功==res:", res)
						},
						fail(err) {
							console.log(TAG, "==上传失败==err:", err)
						}
					})

					//上传进度监听,条件编译
					this.uploadTask.onProgressUpdate((res) => {
						console.log('onProgressUpdate==res:',res)
						//快手浮点型0-1
						// #ifdef MP-KUAISHOU
						page.uploadProgress = (res.progress.toFixed(2))*100
						// #endif
						
						//非快手浮点型1.0-100.0
						// #ifndef MP-KUAISHOU
						page.uploadProgress = res.progress
						// #endif				
					})
				}
			},

上面的代码看着是真恶心,而且快手端根本达不到产品的要求,小吐槽一下。。。

先做个小笔记,学习中遇到的一个问题:运算符双问号 ?? 在快手的template标签中会编译报错,抖音是可以正常解析的。

以下是坑::::

  1. 申请访问相册权限拒绝后返回区别:抖音有明确的错误码: err.errNo,快手只有err.errMsg,
    而且快手自己没有"图片和视频"访问权限,和有权限了,跳转到相册选择页直接退出不选择内容,都在api回调中返回 errMsg:chooseVideo:fail take video fail,
    真的很不规范好吧
  2. uni.authorize({scope: "scope.camera",})这个玩意没法用,反馈的结果完全没有参考意义
  3. uni.openSetting({success(authSetting) {},fail() { }),这个方法打开的是小程序宿主对向程序开放的权限页面,在小程序的三个点里面也能拉起,实际真没啥意义
  4. 上传进度,快手是0-1的浮点型,抖音是1-100的浮点型;还有那个fileType: 'video',name: 'file',当时name随便填的,没想到把我后端一直收不到数据,但是上传进度是正常的,真是服了,到处屎坑
  5. 上传阿里云OSS的坑,如果使用阿里云node.js 的方法直接跨域传到阿里云上,是万万行不通的,真的把我折磨了两天,oss-sdk和api根本用不了,劝各位往后放弃直传,只能让后端透传创建一个我们自己的域名,给到相应的阿里云oss的key和secret也已完成间接直传
  6. 最大的坑是从阿里云跨域下载文件,到目前位置依然没有解决办法,小程序的网络请求都默认添加上了referer,这个需要在阿里云后端配置白名单,出于安全考虑,不让配都快自己的referer,所以没法直接下载,搞我半条命
相关推荐
HashTang1 天前
【AI 编程实战】第 12 篇:从 0 到 1 的回顾 - 项目总结与 AI 协作心得
前端·uni-app·ai编程
JunjunZ1 天前
uniapp 文件预览:从文件流到多格式预览的完整实现
前端·uni-app
郑州光合科技余经理2 天前
代码展示:PHP搭建海外版外卖系统源码解析
java·开发语言·前端·后端·系统架构·uni-app·php
REDcker2 天前
WebCodecs VideoDecoder 的 hardwareAcceleration 使用
前端·音视频·实时音视频·直播·webcodecs·videodecoder
gihigo19982 天前
基于TCP协议实现视频采集与通信
网络协议·tcp/ip·音视频
TT_Close2 天前
“啪啪啪”三下键盘,极速拉起你的 uni-app 项目!
vue.js·uni-app·前端工程化
特立独行的猫a2 天前
uni-app x跨平台开发实战:开发鸿蒙HarmonyOS影视票房榜组件完整实现过程
华为·uni-app·harmonyos·轮播图·uniapp-x
山河君2 天前
四麦克风声源定位实战:基于 GCC-PHAT + 最小二乘法实现 DOA
算法·音视频·语音识别·信号处理·最小二乘法·tdoa
00后整顿职场2 天前
Hbuilderx APP真机无法识别iqoo Z9+手机设备解决方案
uni-app·uniapp真机调试·真机运行
前端小雪的博客.2 天前
【保姆级教程】uniAI 插件高效开发 uni-app 微信小程序(附实战案例)
微信小程序·uni-app·ai编程·uniai