vue2 前端上传视频，并且带出视频的时间

最新推荐文章于 2024-05-21 23:21:19 发布

htt2321

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量144

点赞数

文章标签：前端音视频

本文链接：https://blog.csdn.net/weixin_43204464/article/details/134120447

版权

// html
<el-form-item prop="courseAddress" label="课程：" style="width: 360px">
                                <template v-if="videoUrl && videoUrl != ''">
                                    <div class="" style="position: relative">
                                        <video id="videos" style="width: 200px; height: 150px" controls="controls">
                                            <source :src="videoUrl" />
                                        </video>
                                        <i class="el-icon-circle-close delete_icon" @click="deleteVideo"></i>
                                    </div>
                                </template>

                                <template v-else>
                                    <el-upload
                                        style="display: flex; flex-direction: row"
                                        action="#"
                                        :show-file-list="true"
                                        :auto-upload="false"
                                        :multiple="false"
                                        :on-change="fileChange"
                                        :before-remove="removeV"
                                        :limit="paramObj.imageCount"
                                        :on-preview="previewV"
                                        accept=".MP4,.TS,.MOV,.MXF,.MPG,.FLV,.WMV,.AVI,.M4V,.F4V,.MPEG,.3GP,.ASF,.MKV,.HLS"
                                        :on-exceed="onExceed"
                                        :on-success="uploadSuccess"
                                        :on-error="uploadError"
                                        :on-progress="uploadProgress"
                                        :file-list="fileList"
                                        :class="{ disUoloadSty: noneBtnImg }"
                                    >
                                        <div class="" style="margin-top: 10px" v-if="!noneBtnImg">
                                            <i class="el-icon-plus avatar-uploader-icon"></i>
                                        </div>
                                    </el-upload>
                                </template>
                            </el-form-item>