el-upload 上傳文件到服務器，上傳以前在before-upload中異步判斷文件後綴，寬高分辨率，size大小

參考文檔
https://www.shangmayuan.com/a...

1. 須要在文件上傳到obs以前判斷視頻的分辨率 寬高比例
2. 可是直接從file對象中只能拿到文件的後綴格式，體積大小;因此須要藉助video來獲取資源的寬高
3. 經過video來獲取視頻的寬高 須要等到視頻加載完，監聽loadedmetadata事件；此處須要用到異步
4. 查看 el-upload中before-upload說明，若返回 false 或者返回 Promise 且被 reject，則中止上傳；因此在before-upload的回調方法beforeAvatarUpload中返回promise,若是驗證不經過則reject中止上傳，而且返回reject會自動觸發on-remove方法來移除文件

videoResolution：[{width: 1920, height: 1080}, {width: 544, height: 960}]

// 手動清除表單校驗驗證信息
validateField(formName, type) {
    this.$refs[formName].validateField(type);
},

<videoUpload v-model="orderForm.videoUrl" :resolution="videoResolution" :ruleData="{type:['mp4'], size: 50, limit: 1}" @input="validateField('orderForm', 'f')"></videoUpload>

videoUpload.vue 
<template>
  <div class="videoUpload">
      <!-- 視頻，音頻上傳 -->
    <el-upload
      class="upload-demo"
      v-loading="loading"
      action="#"
      :on-remove="handleRemove"
      :before-upload="beforeAvatarUpload"
      :limit="ruleData.limit"
      :on-exceed="handleExceed"
      :http-request="httpRequest"
      >
      <el-button size="small" plain>點擊上傳</el-button>
      <!-- <video ref="video" controls></video> -->
      <!-- <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div> -->
    </el-upload>
  </div>
</template>

<script>
import { Upload } from '@x-tech/fe-puma-lib-upload';
export default {
    props: {
        value: {
            type: Array,
        },
        ruleData: {
            type: Object,
            default: () => {
                return {
                    type: 'mp4',
                    size: 50,
                    limit: 1
                };
            }
        },
        resolution: {
            type: Array,
            default: ()=> {
                return [{
                    width: 1920,
                    height: 1080
                }];
            }
        }
    },
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            imgObjList: [],
            uploadImgList: this.value,
            loading: false,
        };
    },
    methods: {
        // mp3 or mp4
        handleRemove(file, fileList) {
            console.log('handleRemove', file, fileList, this.imgObjList);
            this.imgObjList = this.imgObjList.filter(item => item.file.uid !== file.uid);
            console.log(this.imgObjList);
            this.$emit('input', this.getImgObsUrl(this.imgObjList));
        },
        handleExceed(files, fileList) {
            console.log(files, fileList, this.imgObjList);
            if (this.imgObjList.length === Number(this.ruleData.limit)) {
                this.$message.warning('當前限制選擇 1 個文件');
            }
        },
        beforeAvatarUpload(file) {
            console.log('beforeAvatarUpload',file);
            console.log(this.resolution);


            return new Promise((resolve, reject) => {
                // 判斷size width height 是否上傳符合規範
                let typeLists = this.ruleData.type.map(item => item.toLowerCase());
                const isVideo = !!typeLists.find(item => file.type.includes(item));
                const isLt20M = file.size / 1024 / 1024 < this.ruleData.size;

                if (!isVideo) {
                    this.$message.error(`上傳視頻只能是 ${typeLists} 格式!`);
                    reject();
                }
                if (!isLt20M) {
                    this.$message.error(`上傳視頻大小不能超過 ${this.ruleData.size}MB!`);
                    reject();
                }


                let videoElement = document.createElement('video');
                console.log('videoElement', videoElement);
                console.dir(videoElement);
                videoElement.addEventListener('loadedmetadata', ()=> {
                    console.dir(videoElement);
                    const { videoWidth, videoHeight, duration } = videoElement;
                    console.log( videoWidth, videoHeight );
                    let isResolution = !!this.resolution.find(item => {
                        return Number(videoWidth) === Number(item.width) && Number(videoHeight) === Number(item.height);
                    });
                    // isResolution = Number(videoWidth) === Number(this.resolution.width) && Number(videoHeight) === Number(this.resolution.height);
                    console.log(isResolution, 'isResolution');
                    if (!isResolution) {
                        this.$message.error('上傳圖片分辨率不符合要求!');
                        reject();
                    }
                    resolve();
                });
                let url= URL.createObjectURL(file);
                videoElement.src = url;
                // this.$refs.video.src = url;
            });

            // return true;

        },
        httpRequest(data) {
            this.loading= true;
            console.log('httpRequest', data, data.file);
            // 操做上傳到obs 師 封裝的upload方法調用
            this.uploadExcel(data.file);
        },
        async uploadExcel(file) {
            let upl;
            if (process.env.VUE_APP_ENV === 'prod') {
                upl = Upload.createProdUpload();
            } else {
                upl = Upload.createDevUpload();
            }
            // await返回是臨時地址，須要後臺進行轉存
            let url = await upl.upload(file, false);
            this.imgObjList.push({url: url, file: file});



            console.log(this.imgObjList);
            this.$message.success('上傳成功');
            console.log(this.getImgObsUrl(this.imgObjList));
            this.$emit('input', this.getImgObsUrl(this.imgObjList));
            this.loading = false;
        },
        getImgObsUrl(list) {
            return list.map(item => item.url);
        },
    },
};
</script>

<style scoped  lang='stylus'></style>