uniapp 微信小程序保存视频到本地

258 阅读1分钟

效果图:

image.png

获取写入相册权限

authorize-setting-popup组件

<template>
    <view class="uni-popup-bottom">
        <uni-popup ref="authorize" type="bottom">
            <view class="authorize" v-if="source">
                <view class="desc">检测到您没打开{{ authorizes[source].title }}权限,是否去设置打开?</view>
                <view class="btns">
                    <button size="mini" @click="close">拒绝</button>
                    <button size="mini" type="primary" @click="confirm">允许</button>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
const MAP = {
    photos: {
        title: '保存到相册',
        scope: 'scope.writePhotosAlbum',
        setting: 'uni.saveVideoToPhotosAlbum'
    }
};
export default {
    props: ['source'],
    data() {
        return {
            authorizes: MAP
        };
    },
    options: {
        styleIsolation: 'shared'
    },
    methods: {
        confirm() {
            uni.openSetting();
            this.close();
        },
        close() {
            this.$refs.authorize.close();
        },
        //获取用户授权
        getAuth() {
            const that = this;
            uni.showLoading({
                title: '获取权限中...'
            });
            uni.authorize({
                scope: that.authorizes[that.source].scope,
                success: res => {
                    that.$emit('onOk');
                },
                fail: res => {
                    uni.hideLoading();
                    uni.getSetting({
                        success: res => {
                            const setting = that.authorizes[that.source].setting;
                            if (!res.authSetting[setting]) {
                                that.$refs.authorize.open();
                            } else {
                                that.$emit('onOk');
                            }
                        }
                    });
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.authorize {
    width: 100% !important;
    padding: 50rpx;
    box-sizing: border-box;
    background-color: #e8e8e8;

    .desc {
        margin: 60rpx 0;
        font-size: 26rpx;
    }

    .btns {
        display: flex;
        justify-content: space-between;

        button {
            width: 30%;
            color: #1aad19;
        }

        button[type='primary'] {
            background-color: #1aad19;
            color: #fff;
        }
    }
}
</style>
<button @click="wxSave">保存</button>
<authorize-setting-popup ref="setting" source="photos" @onOk="wxDownload"></authorize-setting-popup>

wxSave() {
   this.$refs.setting.getAuth();
},
wxDownload() {
    wx.downloadFile({
        url: this.url,
        success(res) {
            if (res.statusCode === 200) {
                // 保存视频到相册
                wx.saveVideoToPhotosAlbum({
                    filePath: res.tempFilePath
                });
                
                // 保存图片到相册
                wx.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath
                });
            }
        }
    });
},

参考链接: uniapp.dcloud.net.cn/api/other/a…

uniapp.dcloud.net.cn/api/other/s…

developers.weixin.qq.com/miniprogram…

developers.weixin.qq.com/miniprogram…