参考文档
https://www.shangmayuan.com/a/eb1dd60138734a2ba47bc6f6.html
- 须要在文件上传到 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 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>