关于前端:elupload-上传文件到服务器上传之前在beforeupload中异步判断文件后缀宽高分辨率size大小

参考文档
https://www.shangmayuan.com/a/eb1dd60138734a2ba47bc6f6.html

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>