Element组件自定义上传视频至OSS、限制文件格式、获取视频首帧画面

最新推荐文章于 2024-03-28 19:20:20 发布

Dawson_

最新推荐文章于 2024-03-28 19:20:20 发布

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/Dawson_/article/details/106916400

Element UI Upload 组件中两个关键属性：

http-request ：覆盖默认的上传行为，可以自定义上传的实现
before-upload ：上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。

<el-upload
                        class="avatar2-uploader"
                        action
                        :show-file-list="false"
                        :http-request="videoUpload"
                        :before-upload="beforeVideoUpload"
                    >
                        <div>
                            <img
                                v-if="ruleForm.HeadImgUrl"
                                :src="preUrl+ruleForm.HeadImgUrl"
                                class="avatar2"
                            />
                            <i v-else class="el-icon-plus avatar2-uploader-icon"></i>
                        </div>
                        <el-button class="upBtn" size="small">上传视频</el-button>
                        <div slot="tip" class="el-upload__tip2">
                            重要提示：
                            <br />支持常用视频格式，推荐使用mp4、webm
                            视频文件大小不超过500MB，时长在60分钟以内
                            分辨率为720p（1280x720）
                            <el-progress
                                class="progress"
                                :text-inside="true"
                                :stroke-width="26"
                                :percentage="progress"
                            ></el-progress>
                        </div>
                    </el-upload>

我们可以自定义这两个函数时间完善业务

下面是文件上传前对文件格式的检验
注释部分为获取视频首帧画面

// 上传文件前的文件格式、尺寸等等的规则定制
beforeVideoUpload(file) {
   
   
            let _this = this;
            return new Promise(async function(resolve, reject) {
   
   
                console.log("beforeeeee", file);
                let fileName = file.name || "";
                let ext = fileName.split("."