el-upload上传视频，并且可以预览（使用非自动上传方式上传文件）

video预览本地文件需要将文件地址转换

页面部分：

<div class="imgVideo">
                            <span>采集图片/视频</span>
                            <el-upload :multiple="false" :limit="limitNum" action=""
                                :on-change="handleEditChange"
                                :before-upload="beforeAvatarUpload"
                                :http-request="ImgUploadSectionFile"
                                :file-list="fileList">
                                <el-button v-if="!fileList.length" type="primary"
                                    plain size="mini">
                                    <i class="el-icon-upload" style="font-size: 15px;"></i>
                                    点击上传
                                </el-button>
                                <div slot="file" slot-scope="{ file }" v-if="formData.mediaFlag == 1">
                                    <video :src="file.url" class="video-avatar"
                                        controls="controls" style="height: 200px;">
                                    </video>
                                </div>
                                <div slot="file" slot-scope="{ file }" v-else>
                                    <img :src="file.url" style="max-height: 200px;object-fit: contain;"
                                         alt="" class="imgVideo"></img>
                                </div>
                            </el-upload>
                            <div v-if="fileList.length" style="margin-top: 10px;">
                                <el-button type="primary"
                                    plain size="mini" @click="handlePictureCardPreview"
                                    v-if="formData.mediaFlag == 0">
                                    <i class="el-icon-zoom-in" style="font-size: 15px;"></i>
                                    预览
                                </el-button>
                                <el-button type="danger"
                                    plain size="mini" @click="handleRemove">
                                    <i class="el-icon-delete" style="font-size: 15px;"></i>
                                    删除
                                </el-button>
                            </div>
                        </div>

script部分

// 上传相关方法
        // 文件移除
        handleRemove() {
            this.fileList = []
            this.imgMessage = null
        },
        // before-upload上传文件之前的钩子 
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg" || file.type === "image/png" || 
                          file.type === "video/mp4" || file.type === "video/flv"
                          file.type === "video/avi" || file.type === "video/mov";
            if (!isJPG) {
                this.$message.error("上传图片只能是 JPG 或 PNG 格式! 上传视频只能是 mp4 或 flv 或 avi 或 mov 格式!");
            }
            // media_flag  0:图片  1：视频
            if(file.type !== "image/jpeg" && file.type !== "image/png") {
                this.formData.mediaFlag = 1
            } else {
                this.formData.mediaFlag = 0
            }
            const videourl = URL.createObjectURL(file);
            this.fileList.push({ name: file.name, url: videourl });

            return isJPG;
        },
        // http-request自定义上传
        ImgUploadSectionFile(param) {
            this.imgMessage = param
        },
        // 预览图片
        handlePictureCardPreview() {
            this.dialogImageUrl = this.fileList[0].url;
            this.dialogImageVisible = true;
        }