123

<template>
    <view class="mian">
        <view class="header_title">
            奕驰家具
        </view>

        <div style="height: 129rpx;"></div>
        <h1>上传图片</h1>
        <uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select" @progress="progress"
            @success="success" @fail="fail" :auto-upload="false" ref="files" class="ufp" />
        <button @click="upload()" type="primary">上传图片</button>
        <!-- <h1>上传视频</h1>
        <uni-file-picker v-model="imageValue" fileMediatype="video" mode="grid" @select="select" @progress="progress"
            @success="success1" @fail="fail" :auto-upload="false" ref="files" class="ufp" />
        <button @click="upload()" type="primary">上传图片</button> -->
    </view>
</template>

<script>
    import uniFilePicker from "@/components/uni-file-picker/uni-file-picker.vue"
    export default {
        data() {
            return {
                imageValue: [],
                title: 'Hello',
                video_url: [],
                videoName: ""
            }
        },
        components: {
            uniFilePicker
        },
        onLoad() {
            setTimeout(function() {
                console.log('start pulldown');
            }, 1000);
            uni.startPullDownRefresh();
        },
        // 页面生命周期，下拉刷新后触发
        onPullDownRefresh() {
            console.log('refresh');
            setTimeout(function() {
                uni.stopPullDownRefresh();
            }, 1000);
            // this.$refs.udb.loadData({
            //     clear: true
            // }, () => {
            //     // 停止下拉刷新
            //     uni.stopPullDownRefresh()
            // })

        },
        methods: {
            upload() {
                this.$refs.files.upload()
            },
            // 获取上传状态
            select(e) {
                console.log('选择文件：', e)
            },
            // 获取上传进度
            progress(e) {
                console.log('上传进度：', e)
            },

            // 上传成功
            success(e) {
                console.log('上传成功', e)
                for (let i = 0; i < e.tempFiles.length; i++) {
                    uniCloud.callFunction({
                        name: 'addImageFile',
                        data: {
                            name: e.tempFiles[i].name,
                            img_url: e.tempFilePaths[i]
                        }
                    }).then(res => {
                        console.log("添加成功！");
                    })
                }
                uni.showToast({
                    title: '添加成功',
                    duration: 2000,
                    // icon: 'error'
                })
            },
            success1(e) {
                console.log('上传成功', e)
                uniCloud.callFunction({
                    name: 'addVideo',
                    data: {
                        name: e.tempFiles[0].name.substring(0, e.tempFiles[0].name.indexOf(".")),
                        video_url: e.tempFilePaths[0]
                    }
                }).then(res => {
                    console.log("添加成功！");
                })
                uni.showToast({
                    title: '添加成功',
                    duration: 2000,
                    // icon: 'error'
                })
            },

            // 上传失败
            fail(e) {
                console.log('上传失败：', e)
            },
        }
    }
</script>

<style scoped>
    .header_title {
        width: 100%;
        height: 99rpx;
        line-height: 99rpx;
        text-align: center;
        /* border-bottom: 2rpx solid black; */
        background-color: white;
        position: fixed;
        z-index: 999;
        border-bottom: 2rpx solid #333;
    }

    .video_box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .video_box li,
    .video_box video {
        display: inline-block;
        width: 300rpx;
        height: 360rpx;
        border: 2rpx solid red;
        margin-bottom: 20rpx;
    }

    .video_box video {}

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .text_name {
        margin-bottom: 20rpx;
    }

    .text_name input {
        border: 5rpx solid green;
        caret-color: red;
        padding-left: 10rpx;
        margin-bottom: 20rpx;
    }
</style>