qjkankan_v1.1.1/packages/qjkankan-editor/src/components/shared/uploads/UploadVideo.vue

<template>
    <div
        class="com-upload-image"
        @click="onSelect"
        :style="{'background-image':(cover?`url(${cover})`:'')}"
        :class="{'no-border':showBorder== false}"
    >
        <div :class="{'has-image':cover,hover:hover}">
            <upload ref="uploadFile" media-type="video" @file-change="onFileChange"></upload>
            <div class="btn-push" v-show="!cover">
                <i class="iconfont icon-works_add"></i>
                <span>{{tips}}</span>
            </div>
            <div class="btn-change">
                <button class="ui-button submit">{{$t("common.change")}}</button>
                <a class="btn-clear" v-show="showClear" @click.stop="onClear">
                    <i class="iconfont icon-close"></i>
                </a>
            </div>
        </div>
    </div>
</template>
<script>
import Upload from "./Upload";
import { getPoster } from "@/utils/video";
let $video = null;
export default {
    name: "UploadImage",
    components: {
        Upload
    },
    props: {
        tips: String,
        poster: String,
        hover: {
            type: Boolean,
            default: false
        },
        showClear: {
            type: Boolean,
            default: true
        },
        showBorder: {
            type: Boolean,
            default: true
        },
        showBackground: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            base64: "",
            isClear: false
        };
    },
    computed: {
        cover() {
            if (this.isClear) {
                return null;
            }
            return this.poster || this.base64;
        }
    },
    methods: {
        onSelect() {
            this.$refs.uploadFile.click();
        },
        onClear() {
            this.$refs.uploadFile.clear();
            this.dataURL = "";
            this.isClear = true;
            this.$emit("file-change", null);
        },
        onFileChange(file, base64) {
            this.isClear = false;
            if (this.showBackground) {
                this.dataURL = file.dataURL;
            }

            getPoster(this.dataURL).then(poster => {
                this.base64 = poster
                file.poster = this.base64;
                this.$emit("file-change", file);
            });

            // if ($video == null) {
            //     $video = $(
            //         `<video muted style="display:none;z-index:-1"></video>`
            //     ).appendTo("body")[0];

            //     $video.addEventListener("canplay", () => {
            //         $video.pause();
            //         var $canvas = document.createElement("canvas");
            //         var minWidth = 97;
            //         var minHeight = 97;

            //         if ($video.videoWidth == 0) {
            //             $canvas.width = minWidth;
            //             $canvas.height = minHeight;
            //         } else {
            //             var r1 = minWidth / $video.videoWidth;
            //             var r2 = minHeight / $video.videoHeight;
            //             var r = Math.max(r1, r2);

            //             $canvas.width = $video.videoWidth * r;
            //             $canvas.height = $video.videoHeight * r;
            //         }
            //         var ctx = $canvas.getContext("2d");
            //         ctx.drawImage(
            //             $video,
            //             0,
            //             0,
            //             $video.videoWidth,
            //             $video.videoHeight,
            //             0,
            //             0,
            //             $canvas.width,
            //             $canvas.height
            //         );
            //         this.base64 = $canvas.toDataURL("image/jpeg", 0.8);
            //         file.poster = this.base64
            //         this.$emit("file-change", file);
            //     });
            // }

            // $video.src = this.dataURL;
            // $video.play();

            // getPoster
        }
    }
};
</script>
<style lang="less" scoped>
.com-upload-image {
    cursor: pointer;
    display: inline-block;
    min-width: 60px;
    min-height: 60px;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    border: 1px solid #5d5d5d;
    position: relative;
    background: #414141;
    background-position: center center;
    background-size: cover;
    &.no-border {
        border: none;
    }
    > div {
        position: relative;
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 12px;
        color: @color;
        &.has-image {
            background-color: rgba(0, 0, 0, 0.5);
            .btn-change {
                display: block;
            }
            &.hover {
                background-color: transparent;
                opacity: 0;
                transition: opacity 0.2s ease-in;
                &:hover {
                    opacity: 1;
                    background-color: rgba(0, 0, 0, 0.5);
                    .btn-change {
                        display: block;
                    }
                }
                .btn-change {
                    display: none;
                }
            }
        }
    }

    .icon-works_add {
        font-size: 28px;
    }
    .icon-close {
        color: #fff;
        font-size: 12px;
    }
    .ui-button {
        width: 60px;
    }
    .btn-push {
        text-align: center;
        span {
            display: block;
        }
    }
    .btn-change {
        display: none;
    }
    .btn-clear {
        position: absolute;
        right: 0;
        top: 0;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background-color: #c77a7a;
        border-radius: 50%;
        transform: translate(50%, -50%);
        &:hover {
            background-color: #e85353;
        }
    }
}
</style>