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

需要在文件上传到obs之前判断视频的分辨率 宽高比例

但是直接从file对象中只能拿到文件的后缀格式，体积大小;所以需要借助video来获取资源的宽高

通过video来获取视频的宽高 需要等到视频加载完，监听loadedmetadata事件；此处需要用到异步

查看 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.vue

class="upload-demo"

v-loading="loading"

action="#"

:on-remove="handleRemove"

:before-upload="beforeAvatarUpload"

:limit="ruleData.limit"

:on-exceed="handleExceed"

:http-request="httpRequest"

>

点击上传

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);

},

},

};