Uniapp 拍照以及摄像功能

<template>
    <view class="content">
        <view class="margin-bottom padding-sm radius shadow bg-white">
            <image :src="imagePath" mode="widthFix"></image>
        </view>

        <button class="margin-lr-xl cu-btn bg-red shadow-blur round lg" @click="takePhoto">房间 {{room}} 拍照</button>

        <button class="margin-lr-xl cu-btn bg-red shadow-blur round lg" @click="chooseVideo()">录像</button>
        <!--         <view class="cu-form-group margin-top">
            <textarea maxlength="-1" :disabled="modalName!=null" @input="textareaAInput"
                placeholder="这里是备注区域"></textarea>
        </view> -->

        <!-- 显示当前的 modalName 值 -->
        <view>当前显示路径</view>
        <view class="auto-wrap margin-tb padding-sm radius shadow bg-white"> {{ imagePath }}</view>
        <view>上传返回路径</view>
        <view class="auto-wrap margin-tb padding-sm radius shadow bg-white"> {{ returnImagePath }}</view>

        <view>当前显示路径</view>
        <view class="auto-wrap margin-tb padding-sm radius shadow bg-white"> {{ videoPath }}</view>
        <view>上传返回路径</view>
        <view class="auto-wrap margin-tb padding-sm radius shadow bg-white"> {{ returnVideoPath }}</view>
        <!-- <view class="auto-wrap margin-tb padding-sm radius shadow bg-white"> {{ textareaAValue }}</view> -->
        <view class="box footn" v-if="isShown">
            <view class="cu-bar btn-group">
                <button @click="goUpload()" class="cu-btn bg-green shadow-blur round lg">开始上传</button>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'CameraPage',
        data() {
            return {
                room: '1',
                isShown: false, // 初始状态为隐藏
                imagePath: '/static/98035487-eac1-4d24-928f-79f3fa3724f3.jpg',
                modalName: null,
                textareaAValue: '',
                token: "",
                returnImagePath: '',
                token: "",
                videoPath: '',
                returnVideoPath: ''
            }
        },
        onLoad() {
            this.token = uni.getStorageSync('token'); //用户信息
            this.room = uni.getStorageSync('room'); //用户信息
            this.checkToken()
        },
        methods: {
            checkToken() {
                uni.request({
                    url: "/app/getCurrentUser",
                    method: 'POST',
                    data: '',
                    header: {
                        'content-type': 'application/json', // 根据后端要求设置合适的Content-Type
                        'Authorization': this.token
                    },
                    success: (res) => {
                        console.log('请求成功:', res);
                        if (res.statusCode === 200) {
                            if (res.data.code === 401) {
                                uni.showToast({
                                    title: '您token过期，请重新登录',
                                    icon: "none"
                                });
                                uni.redirectTo({
                                    url: '/pages/user/index'
                                });
                            }
                        } else {
                            // 处理错误响应
                            console.error('错误状态码', res.statusCode);
                            return;
                        }
                    },
                    fail: (err) => {
                        console.error('请求失败', err);
                    }
                });
            },
            takePhoto() {
                if (process.env.TARO_ENV === 'app') { // 判断是否在原生App环境中
                    // 检查权限是否已获取
                    uni.getSetting({
                        success: (res) => {
                            if (!res.authSetting['scope.camera']) {
                                // 请求权限
                                uni.authorize({
                                    scope: 'scope.camera',
                                    success: () => {
                                        this.chooseImage();
                                    },
                                    fail: () => {
                                        uni.showModal({
                                            title: '需要权限',
                                            content: '需要获取摄像头权限才能拍照',
                                            showCancel: false
                                        });
                                    }
                                });
                            } else {
                                this.chooseImage();
                            }
                        }
                    });
                } else {
                    this.chooseImage();
                }
            },
            // 拍照或选择图片
            chooseImage() {
                uni.chooseImage({
                    count: 1, // 默认9, 选择数量限制
                    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: (res) => {
                        const tempFilePaths = res.tempFilePaths;
                        this.$set(this, 'imagePath', tempFilePaths[0]);

                        this.isShown = true;
                    }
                });
            },
            goUpload() {
                uni.uploadFile({
                    url: 'http://120.27.13.29:8888/common/upload',
                    filePath: this.videoPath,
                    name: 'file',
                    formData: {
                        'room': this.room
                    },
                    header: {
                        'Authorization': this.token // 添加 token 到请求头
                    },
                    success: (res) => {
                        const data = JSON.parse(res.data);
                        this.returnVideoPath = data.url
                        uni.showToast({
                            title: data.msg,
                            icon: "none"
                        });
                        this.isShown = false;
                    }
                })

            },
            textareaAInput(e) {
                this.textareaAValue = e.detail.value
            },
            chooseVideo() {
                uni.chooseVideo({
                    count: 1,
                    sourceType: ['camera'],
                    maxDuration: 60, // 最大视频录制时长（秒）
                    success: (res) => {
                        const videotempFilePath = res.tempFilePath;
                        console.log('选择视频成功，返回的参数URL：', videotempFilePath);
                        this.isShown = true;
                        console.log('选择视频成功，返回的参数：', res);
                        // 可以使用 res.tempFilePath 获取视频的本地路径
                        // 如果你需要将路径存储在组件的数据属性中，可以这样做
                        this.videoPath = videotempFilePath;
                    },
                    fail: (err) => {
                        console.error('选择视频失败：', err);
                    }
                });
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        margin: 30rpx;
        /* align-items: center; */
        /* justify-content: center; */
    }

    .footn {
        position: fixed;
        width: 90%;
        bottom: 20rpx;
        z-index: 1024;
        /* box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0.1); */
    }

    .auto-wrap {
        white-space: pre-wrap;
        word-wrap: break-word;
    }
</style>