el-upload 上传文件到服务器，上传之前在before-upload中异步判断文件后缀，宽高分辨率，size大小

Posted 2021-09-06 花之舞

参考文档
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>