uniapp开发微信小程序-实现拍照、录像、录音上传相关文件

加油乐
3,014 阅读3分钟

一、公共方法

授权

  • 用户拒绝或未授权时调用InquiriesEmpower方法
  • uni.showModal为弹出确认弹窗，点击确定调用uni.openSetting跳转设置页面，点击取消回跳uni.navigateBack()上一页（也可不做处理）
// 授权问询
InquiriesEmpower() {     
	uni.showModal({
		// title: '提示',
		content: '获取授权失败，是否重新授权？',
		success: function (res) {
			if (res.confirm) {
				console.log('用户点击确定');
				uni.openSetting({
					success(res) {
                                            console.log(res.authSetting)
					}
				});
			} else if (res.cancel) {
				console.log('用户点击取消');
				uni.navigateBack()
			}
		}
	});

拍照

  • 前置授权条件满足后进入下面的事件，参数flag需要区分录像or拍照,参数 _this传递this指向
  • uni.chooseImage从本地相册选择图片或使用相机拍照，sourceType: ['camera']控制为相机拍照
  • sizeType: ['original', 'compressed']，原图与缩略图
  • 调用相机并拍摄成功后，显示加载uni.showLoading，submitFlag用于控制是否可提交，调用上传uni.uploadFile
  • 上传成功后将数据处理进行回显fileList，修改submitFlag状态，关闭加载uni.showLoading
  • 本次回显不做演示，拍照上传成功后拿到文件路径后，可随具体业务场景按需处理

录像

  • 前置授权条件满足后进入下面的事件，参数flag需要区分录像or拍照,参数 _this传递this指向
  • uni.chooseVideo拍摄视频或从手机相册中选视频，返回视频的临时文件路径，sourceType: ['camera']控制为相机录制
  • 调用相机并录制成功后，显示加载uni.showLoading，submitFlag用于控制是否可提交，调用上传uni.uploadFile
  • 上传成功后将数据处理进行回显fileList，修改submitFlag状态，关闭加载uni.showLoading
  • 本次回显不做演示，录制上传成功后拿到文件路径后，可随具体业务场景按需处理
// 录像or拍照
captureOperateFn(flag, _this) {
	if (flag == 'captureOperate') {
		uni.chooseImage({
			sizeType: ['original', 'compressed'],
			sourceType: ['camera'],
			success: function (res) {
				this.submitFlag = false
				uni.showLoading()
				uni.uploadFile({
					url: '上传地址',
					filePath: res.tempFilePaths[0],
					name: 'file',
					formData: {
						file: res
					},
					header: {
						'Authorization': uni
							.getStorageSync('token'),
					},
					success: (res) => {
						console.log('相机上传', res);
						if (res.statusCode ==200) {
							const data = JSON.parse(res.data)
							_this.fileList.push({
								url: `${'前缀'}/${data.data}`
							})
							_this.submitFlag = true
							uni.hideLoading()
						}
					},
					fail: (err) => {
						console.error(err);
					}
				});
			}
		});
	} else {
		uni.chooseVideo({
			sourceType: ['camera'],
			success: function (res) {
				console.log('视频', res.tempFilePath);
				this.submitFlag = false
				uni.showLoading()
				uni.uploadFile({
					url: '上传地址'，
					filePath: res.tempFilePath,
					name: 'file',
					formData: {
						file: res
					},
					header: {
						'Authorization': uni
							.getStorageSync('token'),
					},
					success: (res) => {
						console.log('相机上传', res);
						if (res.statusCode ==200) {
							const data = JSON.parse(res.data)
							_this.fileList.push({
								url: `${'前缀'}/${data.data}`
							})
							_this.submitFlag = true
							uni.hideLoading()
						}
					},
					fail: (err) => {
						console.error(err);
					}
				});
			}
		});
	}
},

二、拍照

  • 首先存储this,内部嵌套过深this指向会变
  • 通过uni.getSetting获取用户的当前授权设置,res.authSetting指向用户授权名称及设置状态
  • 如果已授权则调用下载操作，否则获取授权
  • 如果获取授权同意则调用下载操作，否则弹窗提示
  • 如果未授权退出页面，下次触发会直接进入授权失败分支，默认弹窗提示
// 调用相机
captureOperate() {
        //存储this
	const _this = this
	uni.getSetting({
		success: (res) => {
			console.log('是否授权', res);
			console.log('相机', res.authSetting['scope.camera']);
			if (!res.authSetting['scope.camera']) {
				uni.authorize({
					scope: 'scope.camera',
					success: () => {
						this.captureOperateFn('captureOperate', _this)
					},
					fail: () => {
						console.log('授权失败')
						this.InquiriesEmpower()
					}
				})
			} else {
				this.captureOperateFn('captureOperate', _this)
			}
		},
	})
},

三、录像

  • 首先存储this,内部嵌套过深this指向会变
  • 通过uni.getSetting获取用户的当前授权设置,res.authSetting指向用户授权名称及设置状态
  • 如果已授权则调用下载操作，否则获取授权
  • 如果获取授权同意则调用下载操作，否则弹窗提示
  • 如果未授权退出页面，下次触发会直接进入授权失败分支，默认弹窗提示
// 调用视频
videoOperate() {
	const _this = this
	uni.getSetting({
		success: (res) => {
			console.log('是否授权', res);
			console.log('相机', res.authSetting['scope.camera']);
			if (!res.authSetting['scope.camera']) {
				uni.authorize({
					scope: 'scope.camera',
					success: () => {
						console.log('授权成功')
						this.captureOperateFn('videoOperate', _this)
					},
					fail: () => {
						console.log('授权失败')
						this.InquiriesEmpower()
					}
				})
			} else {
				this.captureOperateFn('videoOperate', _this)
			}
		},
	})
},

四、录音

  • 通过uni.getSetting获取用户的当前授权设置,res.authSetting指向用户授权名称及设置状态
  • 获取全局唯一的录音管理器 uni.recorderManager
  • 如果已授权则调用下载操作，否则获取授权
  • 如果获取授权同意则调用下载操作，否则弹窗提示
  • 如果未授权退出页面，下次触发会直接进入授权失败分支，默认弹窗提示
  • 本次上传使用uniapp扩展插件市场voice-sound-recording插件，也可根据全局管理器进行自定义设置，在此不做演示
// 调用音频
audioOperate() {
	const recorderManager = uni.getRecorderManager()
	uni.getSetting({
		success: (res) => {
			console.log('是否授权', res);
			console.log('相机', res.authSetting['scope.record']);
			if (!res.authSetting['scope.record']) {
				uni.authorize({
					scope: 'scope.record',
					success: () => {
						console.log('授权成功')
						this.recordingFlag = true
					},
					fail: () => {
						console.log('授权失败')
						this.InquiriesEmpower()
					}
				})
			} else {
				console.log('已授权');
				this.recordingFlag = true
			}
		},
	})
},
avatar
文章
阅读
粉丝